Add data attribute to a gallery link?

by

I’m using the WordPress gallery to display a thumbnail group of images. I want to be able to use jQuery in order to add data-fancybox="whatever" immediately after the <a> tag like this:

<a data-fancybox="whatever" href="https://google.com"</a>

The existing way the links are set up are like this:

 <dt class="gallery-icon landscape">
    <a href="http://" class="attachment-thumbnail size-thumbnail" ></a>
 </dt>

….

What I would like to do, is add the data-fancybox="group" to the <a> tag that lives on the wp_attachment links for gallery, like this:

<dt class="gallery-icon landscape">
    <a data-fancybox="group" href="http://" class="attachment-thumbnail size-thumbnail" ></a>
</dt>

Does anyone know how I can do that? I would greatly appreciate any help – if I can clarify, please let me know.

Thanks
Mike

1 Answer
1

This solution will add the data-fancybox="group" to gallery links produced by the default shortcode. This has been tested and works regardless of whether themes have HTML5 theme support enabled for galleries or not.

The solution works by using the post_gallery filter to gain access to the gallery shortcode’s output. From there, the HTML is parsed and manipulated using PHP’s DOMDocument() and DOMXpath().

add_filter( 'post_gallery', 'wpse_gallery_shortcode', 10, 3 );
/**
 * Filters the default gallery shortcode output.
 *
 * @see gallery_shortcode()
 *
 * @param string $output   The gallery output. Default empty.
 * @param array  $attr     Attributes of the gallery shortcode.
 * @param int    $instance Unique numeric ID of this gallery shortcode instance.
 */
function wpse_gallery_shortcode( $output, $attr, $instance ) {
    // Temporarily remove our filter to prevent infinite loop.
    remove_filter( 'post_gallery', 'wpse_gallery_shortcode', 10, 3 );

    // Use WordPress' native function for generating gallery output.
    $gallery_html = gallery_shortcode( $attr );

    // Create an instance of DOMDocument.
    $dom = new \DOMDocument();

    // Supress errors due to malformed HTML.
    // See http://stackoverflow.com/a/17559716/3059883
    $libxml_previous_state = libxml_use_internal_errors( true );

    // Populate $dom with $gallery_html, making sure to handle UTF-8, otherwise
    // problems will occur with UTF-8 characters.
    // Also, make sure that the doctype and HTML tags are not added to our HTML fragment. http://stackoverflow.com/a/22490902/3059883
    $dom->loadHTML( mb_convert_encoding( $gallery_html, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

    // Restore previous state of libxml_use_internal_errors() now that we're done.
    // Again, see http://stackoverflow.com/a/17559716/3059883
    libxml_use_internal_errors( $libxml_previous_state );

    // Create an instance of DOMXpath.
    $xpath = new \DOMXpath( $dom );

    // Match elements with the class gallery-icon (these can be <div> or <dt> depending on whether the theme has support for HTML5.
    // See http://stackoverflow.com/a/26126336/3059883
    $gallery_icons = $xpath->query( "//*[contains(concat(' ', normalize-space(@class), ' '), ' gallery-icon ')]" );

    // Iterate over the the gallery icons.
    foreach ( $gallery_icons as $gallery_icon ) {
        // Find the <a> tags and add our custom attribute and value.
        $gallery_icon_child_node_link = $xpath->query( "//a", $gallery_icon );
        foreach ( $gallery_icon_child_node_link as $node_link ) {
            $gallery_icon_data_fancy_box = $dom->createAttribute( 'data-fancybox' );
            $gallery_icon_data_fancy_box->value="group";

            $node_link->appendChild( $gallery_icon_data_fancy_box );                
        }
    }

    // Save the updated HTML.
    $gallery_html = $dom->saveHTML();   

    // Add our filter back so that it will run the next time that the gallery shortcode is used.
    add_filter( 'post_gallery', 'wpse_gallery_shortcode', 10, 3 );

    // Return the modified HTML.
    return $gallery_html;
}

This code is a bit verbose, mostly because it addresses a bunch of gothcas with DOMDocument().

You might also consider adapting the answers to these similar questions:

  • Change the output for shortcode

  • add_filter and changing output captions of image gallery

Leave a Comment