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="https://wordpress.stackexchange.com/img/large1.jpg"><img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description"></a>
<a href="http://wordpress.stackexchange.com/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.
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="https://...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="https://...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="https://...image3-150x150.png"></a>
</div>
</figure>
</div>