How to add a "data-" attribute to the image tag of native gallery output

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>

Related Posts: