I want to customize the WordPress default gallery so that it would format as something like this for each item:
<dl class="gallery-item imgteaser">
<a rel="lightbox-cats" href="http://mydomain.com/link/to/image.jpg" title="Image caption (if any)" name="image.jpg (image file name)">
<img width="150" height="150" src="http://mydomain.com/link/to/image-150x150.jpg" class="attachment-thumbnail" alt="002" title="002">
</a>
</dl>
Basically I want the link (<a>
) to have:
rel
for activating lightbox script (defined as “lightbox-cats” by user manually in each gallery)href
that links to direct URL of the image (e.g.: http: // mydomain.com/link/to/image.jpg)title
that is for WordPress image captionname
which is the image file name (e.g.: image.jpg)
I’ve been trying to create the formatting through modifying snippets I got from [here] and [here], but it gets very messy because I don’t know how to remove unncessary stuff.
For example, I don’t need the <a>
to link to the attachment page (something like http :// mydomain.com/?attachment=20). I only need it to link directly to the image URL.
Using filter and adding it to functions.php
, here is what I have done so far (it’s very messy): http: // pastebin.com/Q51W1BVr
I put it into pastebin because it’s a bit too long (I’m sorry I can’t make it a link because I don’t have enough reputation point here :/ )
Though I believe the parts which modifies the output is only from here:
$i = 0; // Modified output from here
foreach ( $attachments as $id => $attachment ) {
$link = wp_get_attachment_link($id, $size, true, false);
if( ! empty($rel) ) { !!! // Add rel injection
$link = str_replace('<a href=', "<a rel='$rel' href=" .wp_get_attachment_url( $attachment->ID ). " alt=", $link);
} else {
$link = str_replace('<a href=', "<a rel='$rel' href=", $link);
}
$link = str_replace("title='", "title='" . wptexturize($attachment->post_excerpt) . "' name='", $link);
$output .= "<{$itemtag} class='gallery-item imgteaser'>
";
$output .= $link;
$output .= "</{$itemtag}>
";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
$output .= "
<br style='clear: both;' />
</div>n";
return $output;
}
Here is how messy the output result is:
<dl class="gallery-item imgteaser">
<a rel="lightbox-cats" href="http://localhost/test/wp-content/uploads/2012/09/002.jpg" alt="http://localhost/test/?attachment_id=36" title="" name="002">
<img width="150" height="150" src="http://localhost/test/wp-content/uploads/2012/09/002-150x150.jpg" class="attachment-thumbnail" alt="002" title="002"
</a>
</dl>
It works, but it has the unnecessary alt="http://localhost/test/?attachment_id=36"
because I don’t know to remove it. And I feel my code is really unefficient/unclean. :/
Like always is WordPress, there is a filter to do this, without the need of a regular expression, that might fail if anything changes.
Here is the code for the output:
It’s faster because saves up time because you already have the
$attachment
object, andwp_get_attachment_link
retrieves it again, even if it’s cached in memory it’s better not to do it.Replace the code, with the one above, and don’t forget to put the
add_filter
before the loop, so you do have a overhead of creating multiple times the same filter.