Customize the Wordpress Default Gallery Output

Question

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 caption
• name 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. :/

Answer 1

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:

<?php
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment){
    unset($attr['alt']); // Just deleting the alt attr
    return $attr;
}, 10, 2);

$url = wp_get_attachment_url( $attachment->ID );
$name = esc_attr( $attachment->post_title );
$title = wptexturize($attachment->post_excerpt);

$text = wp_get_attachment_image( $id, $size, false );
if ( trim( $text ) == '' )
    $text = $attachment->post_title;


$link = "<a href='$url'" . (!empty($rel)? " rel='$rel'":"") . " title='$title' name='$name'>$text</a>";

It's faster because saves up time because you already have the $attachment object, and wp_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.

$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);