Ajouter l'outil de mise au point d'image à la bibliothèque de médias de WordPress

Qu'est-ce que l'outil Image Focus ?

L'outil de mise au point de l'image est un outil qui vous permet de sélectionner rapidement l'emplacement de la zone de mise au point principale de n'importe quelle image. En cliquant simplement sur l'image, vous pouvez facilement déterminer l'emplacement exact du point focal de l'image sur les axes x et y.

Ces positions x et y peuvent ensuite être utilisées dans les propriétés CSS "background-position" ou "object-position". Ainsi, les parties importantes de l'image sont visibles quelle que soit la taille de l'écran.

Pourquoi utiliser l'outil Image Focus

Souvent, les images que nous définissons sur le bureau masquent les personnes ou les objets importants lorsqu'elles sont visualisées sur d'autres appareils. Ce problème peut être évité en réglant la mise au point de l'image de manière à ce que les parties importantes de l'image soient toujours visibles.

Comment mettre en œuvre

Pour ajouter l'outil Image Focus à votre bibliothèque de médias WordPress, il suffit d'ajouter le code à l'extrait de code PHP ou au fichier functions.php du thème enfant.

Suivez les étapes ci-dessous :

1. se connecter au tableau de bord de WordPress

2. ouvrir l'éditeur de thème

1. Dans le menu de gauche, trouvez et cliquez sur "état extérieur".
2. Dans le menu déroulant, sélectionnez "Éditeur de fichiers de thèmes".

3) Modifier le fichier functions.php.

Dans la liste des fichiers à droite, recherchez et cliquez sur le fichier "functions.php" (qui peut apparaître comme "Theme Functions").

Nom de l'extrait de code : Ajouter l'outil de mise au point d'image à la bibliothèque de médias

function add_focus_point_field($form_fields, $post) {
    $form_fields['focus_point'] = array(
        'label' => 'Image Focus Point',
        'input' => 'html',
        'html' => 'ID . '" class="focus-point" readonly>', '
    ).

    return $form_fields.
}
add_filter('attachment_fields_to_edit', 'add_focus_point_field', 10, 2) ;

function add_focus_point_scripts() {
    ?  ; function add_focus_point_scripts() { ?

.attachment-info .thumbnail.thumbnail {
    max-width : 210px ;
    max-height : 210px ;
}

.attachment-info .thumbnail.thumbnail img {
    max-width : 210px ; max-height : 210px ; }
    max-height : 210px ; }
}
</style
    
document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (event) => {
        const imgParent = event.target.closest('.thumbnail-image, .attachment-media-view, .wp_attachment_image') ;

        if (!imgParent) return ;

        const img = imgParent.querySelector('img') ;

        const img = imgParent.querySelector('img') ; if (!img) return ;

        const imgWidth = img.width ; const imgHeight = img.height ; if (!img)
        const imgHeight = img.height ; const offsetX = event.offsetX ; event.height ; event.offsetX
        const offsetX = event.offsetX ; const
        const offsetY = event.offsetY ; const xPercent = ((offsetX / /))
        const xPercent = ((offsetX / imgWidth) * 100).toFixed(0) ; const yPercent = ((offsetY / imgWidth) * 100).
        const yPercent = ((offsetY / imgHeight) * 100).toFixed(0) ; const sharedParent = img.
        const sharedParent = img.closest('.media-frame-content, #post-body-content') ;

        if (!sharedParent) return ;

        const focusPoint = sharedParent.querySelector('[id^="focus-point-"]') ;
        if (!focusPoint) return ;

        focusPoint.value = `${xPercent}% ${yPercent}%` ;
    }) ;
}) ;
    </script
    <?php
}
add_action('admin_head', 'add_focus_point_scripts') ;
add_action('elementor/editor/after_enqueue_scripts', 'add_focus_point_scripts') ;

function add_focus_point_scripts_for_bricks() {
    // Ne chargez les scripts que dans le panneau de l'éditeur de Bricks Builder
    if (function_exists('bricks_is_builder_main') && bricks_is_builder_main()) {
        add_focus_point_scripts() ; }
    }
}
add_action('wp_enqueue_scripts', 'add_focus_point_scripts_for_bricks') ;

Comment utiliser l'outil Image Focus

Étapes d'utilisation

1. Médiathèque ouvertePour ce faire, vous devez vous rendre dans le backend de WordPress et naviguer jusqu'à la bibliothèque de médias.
2. Sélectionner une imageCliquez sur n'importe quelle image et vous verrez apparaître une nouvelle option sur le côté droit.
3. Définir l'objectif: Cliquez sur n'importe quelle partie de l'image et l'outil utilisera automatiquement l'icône xx% yy% met à jour la position du focus.

mise en garde

• La position de mise au point n'est pas sauvegardéeLes positions de mise au point ne sont pas enregistrées dans la base de données afin d'éviter toute confusion inutile. Cela signifie que la mise au point peut être réinitialisée à chaque fois pour des besoins différents.

Application des CSS

Lorsque vous utilisez la fonctionTaille de l'arrière-plan : couvertureLa valeur de mise au point peut être utilisée lorsque l'image d'arrière-plan de la page

• mettre en place background-position : 22% 40% ; peut-être
• mettre en place background-position-x : 22% ; background-position-y : 40% ;

Pour les paramètres réglés surobjet-fit : couverturede l'image, en utilisant les mêmes valeurs :

• mettre en place object-position : 22% 40%.

Utilisation dans Elementor

Elementor fournitPosition de l'arrière-planrépondre en chantantposition de l'objetmais il peut y avoir des problèmes ou des manques dans ces options. Par conséquent, pour définir le focus correctement, vous devrez peut-être utiliser des feuilles de style CSS personnalisées.

Réglage de la mise au point de l'image d'arrière-plan

1. Accès à l'éditeur ElementorSélectionnez l'élément pour lequel l'image d'arrière-plan doit être définie.
2. Réglage de la taille de l'arrière-planDans Elementor UI, réglez la taille de l'arrière-plan sur "cover".
3. Ajouter une feuille de style CSS personnaliséePour ce faire, vous devez vous rendre dans la section Avancé > CSS personnalisé et ajouter le code suivant :

selector {
    background-position : 22% 40% ;
}

Bien entendu, remplacez 22% 40% par votre propre valeur de mise au point.

Définit la focalisation de l'image de l'objet-fit : cover.CSS défini par l'utilisateur d'ElementorRéférençable.

Pour les paramètres réglés surobjet-fit : couverturevous devez ajouter le CSS suivant :

sélecteur {
    object-position : 22% 40% ;
}

Soutien à l'éditeur

L'outil Image Focus fonctionne directement lors de la sélection d'images dans l'éditeur de blocs, l'éditeur Elementor et l'éditeur Bricks Builder.

Dans ces éditeurs, vous pouvez cliquer sur la petite image de prévisualisation dans le coin supérieur droit :

1. éditeur de blocsAprès avoir sélectionné un bloc d'image, cliquez sur Aperçu de l'image pour définir la mise au point.
2. Éditeur ElementorAprès avoir sélectionné un élément d'image, cliquez sur la petite image de prévisualisation dans le coin supérieur droit pour définir la mise au point.
3. Bricks Builder EditeurAprès avoir sélectionné un élément d'image, cliquez sur Aperçu de l'image pour définir la mise au point.

Il fonctionne sur tous les sites WordPress ayant un accès direct à la bibliothèque de médias.

Résumé :

L'outil Image Focus est un outil qui aide les utilisateurs à sélectionner rapidement l'emplacement de la zone de mise au point principale d'une image. En ajoutant cet outil à la bibliothèque de médias de WordPress, les utilisateurs peuvent facilement définir la position de mise au point d'une image, en s'assurant que les parties importantes sont toujours visibles lorsqu'elles sont affichées sur différents appareils. Grâce à cet outil, les utilisateurs peuvent cliquer sur une image pour déterminer les coordonnées x et y de la position de mise au point et utiliser ces valeurs de coordonnées pour les propriétés CSS afin de s'assurer que les parties importantes de l'image sont affichées en totalité quelle que soit la taille de l'écran. En ajoutant l'extrait de code approprié au fichier functions.php, les utilisateurs peuvent mettre en œuvre cette fonctionnalité dans WordPress et l'utiliser directement dans l'éditeur de blocs, l'éditeur Elementor et l'éditeur Bricks Builder.