Media Focus Point

Installatie

Als je de plugin hebt geïnstalleerd en een focuspunt op je afbeelding of video hebt ingesteld, zou het meteen moeten werken. De meeste WordPress thema’s gebruiken deze standaard WordPress methode al om uitgelichte afbeeldingen weer te geven.

💡 De plugin voegt automatisch een inline stijl attribuut toe aan het afbeelding element, zoals:

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

Om een afbeelding in je aangepaste template weer te geven met het toegepaste focuspunt, kun je de volgende code snippet gebruiken:

Voor uitgelichte afbeeldingen (bericht thumbnails):

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

Voor achtergrondafbeeldingen inclusief de 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>

Om inline achtergrondafbeelding weg te laten, stel de tweede parameter in op false:

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

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

Voor afbeeldingen van Advanced Custom Fields (ACF):

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

Om ervoor te zorgen dat de afbeelding zijn element vult terwijl het focuspunt behouden blijft, gebruik je de object-fit eigenschap in je CSS. Bijvoorbeeld:

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

Voor aangepaste 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>

Aangepaste video functie

<?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>