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.

  • 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 Feb 22 '14 at 19:53
0

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

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.