3

While trying to make WordPress and Galleria to become friends I already have a good result. Galleria can easily be used to display native WordPress Galleries. I'm using a plugin but that's not required at all. One thing that already made me pull my hair out, though: The thing I'm missing is a method to add an attribute data-big to the image properties of the galleries' thumbnails as that will force Galleria to use the "full" image in fullscreen mode. In HTML this would look like this

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

Where Galleria will use <img> to display the thumbnail and the <a href ...> for the regular image. That works like a charm and almost out of the box. But I didn't find a solution how to

  • add an attribute data-big to <img>
  • pass the WP image size (e.g. "full") with that argument

Is there anybody who could point me into the right direction or give an example how to do that. Disclaimer: I have some experience with WP filters and hooks but I'm far from being a PHP expert.

Thanks in advance.

Edit: To be a bit more specific: the value for "data-big" is already available (the large/full-size image) so basically I'd like to add the new attribute to the tag and pass the URL of the full-size image.

1

Depending on how your Galleria plugin is interacting with the attachment image filters, you should be able to inject your data attribute using the wp_get_attachment_image_attributes filter.

Obviously, the attribute would be added for anything using wp_get_attachment_image(), but it will do what you're asking.

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

Which outputs the following markup for gallery using the standard settings:

<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
    You could also directly access $attachment->guid in the filter callback, but it really isn't best-practice to use guids in this way. – DrewAPicture Sep 8 '14 at 0:27
  • Works like a charm and out of the box :) – eventcom Sep 12 '14 at 16:48
  • Perfect! Thanks for looking into it. Although this isn't an "adaptive" solution it avoids loading the big/original image on regular view but provides it in fullscreen view. Just if someone else is interested into this: Currently I'm using Marc Tönsing's "MarcTV Galleria" plugin. Probably he'll include this as an option for the plugin (if possible). Hopefully some Javascript wizard will take the time to make Picturefill a Galleria (Javascript-)plugin (if this is possible at all). That would make Galleria truly responsive. – eventcom Sep 12 '14 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.