Featured In





Tagged: caption, header, php, post_gallery, swipebox
First of all, thanks for the great plugin, and especially the SwipeBox support – this is just the kind of minimal lightbox functionality I’ve been looking for.
For some reason, though, a couple of days ago, RL stopped showing the image info in the top bar in SwipeBox’s overlay mode. This worked just fine earlier. I’ve entered text into all the image info fields in case something’s changed there – I have the image name, caption, alt text and description, but nothing’s showing up in the top bar anymore.
I’ve also tried deactivating, deleting and reinstalling the RL plugin, no help. It’s not a css problem, rather the text actually is missing from between the div tags where it has earlier been.
The site’s in production with a lot happening in the same time, so unfortunately I’m unable to pinpoint the exact action that caused this. It’s in non-public alpha, but I can send the url and login info via private message, if you would be so kind to take a look.
Samuli, please post a link to your production site using Set as private reply option at the bottom – your reply will become non visible to other users except us.
None of the images in image links is using title attribute. Those images seem to be default WordPress gallery, so maybe something in your theme is modifying the gallery shortcode output (to not return title attribute for gallery images).
Hi! Thanks for the tip, I’ll look into the title attribute more closely. That something would have to be a very recent change, since the top bar worked just fine on this same site just a couple days earlier.
I think I’ve managed to tap into the core of this problem. It indeed seems an update issue, occurring in WordPress versions 3.5 and higher. Actually, WP deliberately dropped the title tag from img once and for all, for reasons discussed here: http://core.trac.wordpress.org/ticket/18984
I started working on this site with a fresh WP installed with Cpanel, and it was somewhat older than 3.5. During a routine update round I installed the newest WP version, which then also changed this particular behavior.
As a workaround, I found this plugin – I’ll be testing it shortly and see if it fixes the problem: http://wordpress.org/plugins/restore-image-title/
As for a neater solution, I wonder if SwipeBox authors would be willing to make a WP version using for example alt text instead of title tag in the header box…
…sadly, the plugin didn’t do the trick. The title tag does appear in images inserted to a page individually, but for some reason gets lost when the overlay version opens. And it doesn’t affect images grouped as standard WP galleries anyways (and that’s what I’m using on the site). In other words, the plugin doesn’t seem very thoroughly written.
All in all, the problem still persists.
Ok, I found a solution that’s good enough for me. I added a hook to my functions.php that modifies the gallery shortcode output so that it takes the alt text from the image and enters it as the title text in the image link. This way I can use alt texts as the WP team suggests, and still get Swipebox to work. I’m not a professional programmer though, so I’m not sure if the solution works for any other site than mine. But that’s all I need for know anyway.
There is a post_gallery filter that would allow you to do so (and probably that is the one you are using), but some coding knowlege is require to make such modification. Did you succeed?
Yeah, it works fine now. I took a snippet of code from one example and another snippet from another example, glued them together and what do you know, it started working. You can view an example from the latest private answer I sent.
Congrats :)
What hook was the eventual solution to rerouting the alt attribute from a gallery image up to the title attribute of the surrounding link?
It was the post_gallery filter Bartosz mentioned… I can post the source as soon as I get to my dev comp. Just remember it’s ‘as is’, since I’m not a programmer per se; I have no guarantee it works on any other site than mine…
That would be very helpful. I could rework the PHP from there. Thank you.
I just dumped this stuff into the functions.php of my child theme:
/**
* Modify gallery shortcode to add alt texts as titles to a tags.
*/
function get_alt_text_string($link_string, $beginningchars, $endingchars){
$link_string = " ".$link_string;
$alt_text_pos = strpos($link_string, $beginningchars);
if ($alt_text_pos == 0) return "Here you enter the title text in case there's no alt text present";
$alt_text_pos += strlen($beginningchars);
$alt_text_len = strpos($link_string,'"',$alt_text_pos) - $alt_text_pos;
return substr($link_string,$alt_text_pos,$alt_text_len);
}
function gallery_with_titles_from_alt_texts($output, $attr) {
global $post;
static $instance = 0;
$instance++;
/**
* will remove this since we don't want an endless loop going on here
*/
// Allow plugins/themes to override the default gallery template.
//$output = apply_filters('post_gallery', '', $attr);
// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( !$attr['orderby'] )
unset( $attr['orderby'] );
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ( 'RAND' == $order )
$orderby = 'none';
if ( !empty($include) ) {
$include = preg_replace( '/[^0-9,]+/', '', $include );
$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif ( !empty($exclude) ) {
$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}
if ( empty($attachments) )
return '';
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}
$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';
$selector = "gallery-{$instance}";
$gallery_style = $gallery_div = '';
if ( apply_filters( 'use_default_gallery_style', true ) )
$gallery_style = "
<style type='text/css'>
#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 10px;
text-align: center;
width: {$itemwidth}%;
}
#{$selector} img {
border: 2px solid #cfcfcf;
}
#{$selector} .gallery-caption {
margin-left: 0;
}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->";
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
$i = 0;
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);
$alt_text_string = get_alt_text_string($link, 'alt="','"'); // Find img alt text if any
$link = str_replace('<a href', '<a title="'. $alt_text_string .'" href', $link); // Add alt text to image link
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon'>
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
$output .= "
<br style='clear: both;' />
</div>\n";
return $output;
}
add_filter("post_gallery", "gallery_with_titles_from_alt_texts",10,2);