web-dev-qa-db-fra.com

Comment ajouter un attribut "data-" à la balise image de la sortie de la galerie native

En essayant de faire WordPress et Galleria de devenir amis, j'ai déjà un bon résultat. Galleria peut facilement être utilisé pour afficher des galeries WordPress natives. J'utilise un plugin mais ce n'est pas obligatoire du tout. Une chose qui m’a déjà fait me tirer les cheveux: Ce qui me manque, c’est une méthode pour add un attribut data-big aux propriétés d’image des vignettes des galeries, ce qui obligera Galleria à utiliser le image "complète" en mode plein écran. En HTML cela ressemblerait à ceci

<div class="galleria">
    <a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description"></a>
    <a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description"></a>
</div>

Où Galleria utilisera <img> pour afficher la vignette et le <a href ...> pour l’image normale. Cela fonctionne comme un charme et presque hors de la boîte. Mais je n'ai pas trouvé de solution pour savoir comment

  • add un attribut data-big à <img>
  • transmettre la taille d'image WP (par exemple, "complète") avec cet argument

Y a-t-il quelqu'un qui pourrait me diriger dans la bonne direction ou donner un exemple sur la façon de procéder Avertissement: J'ai quelques expériences avec les filtres et crochets WP, mais je suis loin d'être un expert PHP.

Merci d'avance.

Edit: Pour être un peu plus spécifique: la valeur de "data-big" est déjà disponible (l'image grand/taille réelle), donc j'aimerais en principe ajouter le nouvel attribut à la balise et transmettre l'URL de l'intégralité. image de taille.

imagesjavascriptgallerywp-get-attachment-imageattribute
3
eventcom

Selon l'interaction de votre plug-in Galleria avec les filtres d'image de pièce jointe, vous devriez pouvoir injecter votre attribut de données à l'aide du filtre wp_get_attachment_image_attributes.

Évidemment, l'attribut serait ajouté pour tout ce qui utilisait wp_get_attachment_image(), mais il ferait ce que vous demandez.

/**
 * Filter attributes for the current gallery image tag.
 *
 * @param array   $atts       Gallery image tag attributes.
 * @param WP_Post $attachment WP_Post object for the attachment.
 * @return array (maybe) filtered gallery image tag attributes.
 */
function wpdocs_filter_gallery_img_atts( $atts, $attachment ) {
    if ( $full_size = wp_get_attachment_image_src( $attachment->ID, 'full' ) ) {
        if ( ! empty( $full_size[0] ) ) {
            $atts['data-big'] = $full_size[0];
        }
    }
    return $atts;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpdocs_filter_gallery_img_atts', 10, 2 );

Ce qui génère le balisage suivant pour la galerie en utilisant les paramètres standard:

<div class="gallery galleryid-2160 gallery-columns-3 gallery-size-thumbnail" id="gallery-1">
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image1.png"><img width="150" height="150" data-big="http://...image1.png" alt="" class="attachment-thumbnail" src="http://...image1-150x150.png"></a>
        </div>
    </figure>
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image2.png"><img width="150" height="150" data-big="http://...image2.png" alt="" class="attachment-thumbnail" src="http://...image2-150x150.png"></a>
        </div>
    </figure>
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image3.png"><img width="150" height="150" data-big="http://...image3.png" alt="" class="attachment-thumbnail" src="http://...image3-150x150.png"></a>
        </div>
    </figure>
</div>
1
DrewAPicture