Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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. :/

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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);
share|improve this answer
    
Thanks! Do I put it directly in single.php, or other place? I tried to put in in single.php but it returns error.. –  deathlock Sep 23 '12 at 1:38
    
In you functions.php, but instead of editing the structure of the link with a regex use that. PS: I've edited the answer with some corrections to the code. –  Webord Sep 23 '12 at 1:49
    
Oh sorry! I mistook it since there's a <?php, my bad. Have tried it and now it works like a charm--indeed much faster too! Thanks a lot! :) –  deathlock Sep 23 '12 at 2:03
    
I'm pretty sure if( ! empty($rel) ) { !!! // Add rel injection won't work - it's like saying "NONONO" ;) –  kaiser Sep 23 '12 at 2:04
    
@kaiser: yeap, just realized it's there--it was a mistake on my part. :s The !!! should've been inside the comment. Oddly it works, though! :s –  deathlock Sep 23 '12 at 2:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.