Media Focus Point

This plugin makes managing background images or videos effortless by allowing you to set a focus point that stays consistent. Regardless of how the media is resized or the background changes, the focus point ensures that the most important part of your media remains visible and centered.

Ideal for responsive designs and dynamic backgrounds, this tool ensures your media always looks polished and professional on any screen size or resolution.

🚀 See the plugin in action on WP Company

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>