0

I use a custom gallery function to alter the normal Wordpress markup. Usually it's fine but I can't quite figure out how to add the image caption as a TITLE attribute on the thumbnail link. (The lightbox I'm using turns the title attribute into a caption.)

Here's the relevant code from the filter:

foreach ( $attachments as $id => $attachment ) {
        $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
        $link = str_replace('><img','title="test caption" ><img',$link); 
        $output .= "<{$itemtag} class='item'>";
        $output .= "            
                $link
            ";
        if ( $captiontag && trim($attachment->post_content) ) {
            $output .= "
                <{$captiontag}>
                " . wptexturize($attachment->post_content) . "
                </{$captiontag}>";
        }
        $output .= "</{$itemtag}>";
        if ( $columns > 0 && ++$i % $columns == 0 )
            $output .= '';
    }
    $output .= "
            <br>\n";
    return $output;
}

That second $link line with str_replace is as far I've gotten. I thought maybe I could get wp_get_attachment_link to output a title attribute, and when I couldn't find a solution I used str_replace but I don't know how to get the image caption where the words "test caption" currently are.

1
  • FYI, though I'm still looking for a solution that works via the above filter, in the meantime I'm doing this via jquery, taking the image alt tag (which is the WP caption) and using it for a title attribute on the surrounding link. $j('figure a img').each(function(idx, element) { $j(element).parent().attr('title',$j(element).attr('alt')); });
    – Josh M
    Commented Feb 22, 2014 at 19:53

1 Answer 1

1

I found a working solution on the WordPress Forums. Here's the code:

function add_img_title_to_anchor($content) {

    /* Find internal links */

    //Check the page for linked images
    $search = '/<a ([^>]*?)><img ([^>]*?)\/><\/a>/i';
    preg_match_all( $search, $content, $matches, PREG_SET_ORDER);

    //Check which attachment is referenced
    foreach ($matches as $val) {
        // Only if the Link doesn't already have a Title attribute, we work
        if (!preg_match("#title=#", $val[1])) {

            // Find all Link attributes and sanitize the Href att
            $anchor_temp = preg_match_all("#([a-z-]+?)=(['\"]{1})([^'\"]*)(['\"]{1})#", $val[1], $matches_anchor);
            foreach ($matches_anchor[1] as $key => $value) {
                $anchor_atts[$value] = $matches_anchor[3][$key];
            }

            // Find all Image attributes
            $img_temp = preg_match_all("#([a-z-]+?)=([\"]{1})([^\"]*)([\"]{1})#", $val[2], $matches_img);
            foreach ($matches_img[1] as $key => $value) {
                $img_atts[$value] = $matches_img[3][$key];
            }

            // Get the Image Title attribute and copy it to the Link attributes
            //  Case 1. If Image Title exists we use it
            if (isset($img_atts["title"]) && $img_atts["title"] != "") {
                $anchor_atts["title"] = $img_atts["title"];
            }
            //  Case 2. If no we use the Alt attribute
            else {
                $anchor_atts["title"] = $img_atts["alt"];
            }

            // Rebuilt the HTML tags
            $anchor_attributes = array();
            foreach ($anchor_atts as $key => $value) {
                $anchor_attributes[] = $key . '="' . $value . '"';
            }

            $img_attributes = array();
            foreach ($img_atts as $key => $value) {
                $img_attributes[] = $key . '="' . $value . '"';
            }

            // Replace the previous tags by the new
            $replacement = '<a ' . implode(" ", $anchor_attributes) . '><img ' . implode(" ", $img_attributes) . ' /></a>';

            $content = str_replace($val[0], $replacement, $content);
        }
    }

    return $content;

The original post is here: https://wordpress.org/support/topic/add-the-title-of-an-image-to-the-image-link-in-gallery

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