it-swarm.com.de

So fügen Sie dem Image-Tag der nativen Galerieausgabe ein "data-" Attribut hinzu

Beim Versuch, WordPress und Galleria Freunde zu werden, habe ich bereits ein gutes Ergebnis. Galleria kann leicht verwendet werden, um native WordPress-Galerien anzuzeigen. Ich verwende ein Plugin, aber das ist überhaupt nicht erforderlich. Eine Sache, die mich schon dazu gebracht hat, mir die Haare auszureißen: Was mir fehlt, ist eine Methode, um add den Bildeigenschaften der Vorschaubilder der Galerien einen data-big zuzuweisen, da Galleria dadurch gezwungen wird, den zu verwenden "Vollbild" im Vollbildmodus. In HTML würde dies so aussehen

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

Wobei Galleria <img> verwendet, um die Miniaturansicht und den <a href ...> für das reguläre Bild anzuzeigen. Das funktioniert wie ein Zauber und fast aus der Box. Aber ich habe keine Lösung gefunden

  • add ein Attribut data-big to <img>
  • übergeben Sie die Bildgröße WP (z. B. "full") mit diesem Argument

Gibt es jemanden, der mich in die richtige Richtung lenken oder ein Beispiel dafür geben könnte? Haftungsausschluss: Ich habe einige Erfahrungen mit WP Filtern und Hooks, bin aber weit davon entfernt, ein PHP Experte zu sein.

Danke im Voraus.

Bearbeiten: Um etwas genauer zu sein: Der Wert für "data-big" ist bereits verfügbar (das große/vollständige Bild). Daher möchte ich dem Tag grundsätzlich das neue Attribut hinzufügen und die URL des vollständigen Tags übergeben -Größe Bild.

3
eventcom

Abhängig davon, wie Ihr Galleria-Plugin mit den Bildfiltern für Anhänge interagiert, sollten Sie in der Lage sein, Ihr Datenattribut mithilfe des Filters wp_get_attachment_image_attributes einzufügen.

Offensichtlich würde das Attribut für alles hinzugefügt, was wp_get_attachment_image() verwendet, aber es wird das tun, wonach Sie fragen.

/**
 * 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 );

Welche gibt die folgende Auszeichnung für Galerie mit den Standardeinstellungen aus:

<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