Media Focus Point

Instalace

If you installed the plugin and set a focus point on your image or video it should work right away.
Most WordPress themes already use this standard WordPress method to render featured images.

💡 The plugin automatically adds an inline style attribute to the image element, such as:

style="object-position: 50% 38%;"

To display an image in your custom template with the focus point applied, you can use the following code snippet:

For featured images (post thumbnails):

<?php
    echo get_the_post_thumbnail('', 'full');
?>

For background images including the background-image:url():

<div class="myelement" style="<?= MFP_Background($image_id); ?>"></div>

<!-- Result -->
<div class="myelement" style="background-image:url('example.jpg');background-position: 45% 34%;background-size: cover;"></div>

To omit inline background-image, set second parameter to false:

<div class="myelement" style="<?= MFP_Background($image_id, false); ?>"></div>

<!-- Result -->
<div class="myelement" style="background-position: 45% 34%;background-size: cover;"></div>

For images from Advanced Custom Fields (ACF):

<?php
    echo wp_get_attachment_image( get_field('MY-CUSTOM-IMAGE'), 'full' );
?>

To ensure the image fills its element while maintaining the focus point, use the object-fit property in your CSS. For example:

img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

For custom video tags

<video src="/path/to/video.mp4" style="<?= MFP_Video_Style($video_id) ?>"></video>

<!-- Result -->
<video src="/path/to/video.mp4" style="object-position: 50% 50%;"></video>

Custom video function

<?php MFP_Video($video_id, 'controls autoplay', 'videoClass') ?>

<!-- Result -->
<video class="videoClass" controls autoplay style="object-position: 50% 50%; object-fit: cover;">
    <source src="/path/to/video.mp4">
</video>