WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add the title of an image to the image link in gallery (9 posts)

  1. Tommy78
    Member
    Posted 5 months ago #

    Since the update to 3.7.x an image title is no longer added to the image link when displaying a gallery. In version 3.6.1 and earlier the HTML looked like this:
    <a href="http://title.to/image.jpg" title="Image Title">
    On my site, when a visitor clicks the link, the image opens in Fancybox and the title of the image is used as the caption.

    However, since 3.7.x the caption has disappeared and I noticed the HTML has changed into:
    <a href="http://title.to/image.jpg">

    My PHP-skills are very limited, but I assume I could add some code to functions.php in my theme to add the title to the image link.
    Anybody have any suggestions?

  2. JohanPirlouit
    Member
    Posted 5 months ago #

    Hi everyone,

    I also have the same problem: lots of lightbox-like only deal with the anchor title, not with the img title.

    By the way, adding a single image in a post already did the same in previous WP releases: no title is set for the link and we have to do it manually. The difference is that we can do it for a single image, it is impossible for a native WP Galley!

    So, I made a very dirty hook that I use in my theme's "functions.php":

    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;
    }
    
    /* Apply the Filter */
    add_filter('the_content', 'add_img_title_to_anchor', 200);

    I'm not a very good dev, so use it, fix it if needed, improve it, modify it or whatever you want.

    I'll keep track of this thread to see if someone has better ideas than me ;-) ..

    By the way, this lack of the title attribute in the tag associated to images is still a problem and I hope that someone will fix it. A way should be by an option in the admin panel to let us choose if we want automatic titles or not in the links for images...

    And WP native gallery shoud also have this kind of option, at least for manual titling... (And I apologize for my bad english)

    Regards,
    Johan

  3. Tommy78
    Member
    Posted 5 months ago #

    Hi Johan,

    I couldn't agree more, I also think there should be an option to set the image's title for use in the link used in the gallery.
    I hope this will be added/fixed in the nearby future.

    Thank you for sharing the code you are using to solve this. Although it doesn't exactly do what I want it to do yet, it's a good starting point.

    I will (try to) modify the code to make it act the way I want it to, and then post it here.

  4. Tommy78
    Member
    Posted 5 months ago #

    After spending an evening trying to find a solution, I came up with the following:

    function add_title_attachment_link($link, $id = null) {
    	$id = intval( $id );
    	$_post = get_post( $id );
    	$post_title = esc_attr( $_post->post_title );
    	return str_replace('<a href', '<a title="'. $post_title .'" href', $link);
    }
    add_filter('wp_get_attachment_link', 'add_title_attachment_link', 10, 2);

    The function adds the title of the image to it's anchor, thus making the title appear as a caption in Fancybox. This only works with images which are placed in a native WP Gallery.
    For single images it doesn't work, but there we still have the option to manually add a title for the link (which currently is fine for me).

    The function is based on the one I found here.

  5. Miguel Useche
    Member
    Posted 5 months ago #

    Nice, thanks it really help me a lot. It sucks that now this is not a feature in WordPress.

  6. EarlThorfinn
    Member
    Posted 5 months ago #

    Many thanks - the code above fixed the problem for me too. Strange that titles have been removed from gallery image links in v3.7.

  7. lynnema
    Member
    Posted 4 months ago #

    Thank you so much for this - it helped resolve an issue with Lightbox Plus ColorBox... really, really appreciated.

  8. manmar
    Member
    Posted 2 months ago #

    @JohanPirlouit thanks a lot, your code solved a problem I had. I just tweaked it to insert a rel="lightbox".

  9. curtis@curtissmeltzer.com
    Member
    Posted 1 month ago #

    @Tommy78

    Thanks!

Reply

You must log in to post.

About this Topic