WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Edit Gallery Shortcode (9 posts)

  1. foochuck
    Member
    Posted 2 years ago #

    Hello!

    Where can I edit the code that the default wordpress gallery shortcode outputs?

    [gallery link="file" columns="4"]

    I'm manually installing "fancyboxy" and I want to add the class & rel tags to the html output of the shortcode.

    Thanks!

    -foo

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the code is in /wp-includes/media.php (from line 747);

    in functions.php of your theme, add this:

    remove_shortcode('gallery', 'gallery_shortcode');
    add_shortcode('gallery', 'gallery_shortcode_fancybox');
    
    function gallery_shortcode_fancybox($attr) {
    	global $post, $wp_locale;
    
    	static $instance = 0;
    .....
    copy all the code from media.php until line 876
    .....
    			<br style='clear: both;' />
    		</div>\n";
    
    	return $output;
    }

    then make your edits there; this way you avoid hacking core files.

  3. foochuck
    Member
    Posted 2 years ago #

    alchymyth,

    Thanks, that helps, but I'm not sure where I add my html code class="fancy" rel="group1" - is it somewhere within the $link variable?

  4. foochuck
    Member
    Posted 2 years ago #

    I should probably clarify that I'm simply trying to inject the html code into the img src for each thumbnail that gets generated in my galleries.

    So it will look something like when I'm done:

    <img width="93" height="93" src="http://localhost/global/wp-content/uploads/2011/06/01-93x93.jpg" class="attachment-thumbnail fancy" rel="group1" alt="img-01" title="img-01">

    Thanks!

  5. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    is it somewhere within the $link variable

    yes - which makes it more complicated to acceess.

    in the newly added code, before these lines:

    $i = 0;
    	foreach ( $attachments as $id => $attachment ) {

    add:

    add_filter('wp_get_attachment_link', 'add_rel_to_gallery');

    then, after these lines:

    $output .= '<br style="clear: both" />';
    	}

    add:

    remove_filter('wp_get_attachment_link', 'add_rel_to_gallery');

    finally, add this to functions.php of your theme, before the code you added earlier:

    function add_rel_to_gallery($link) {
    $link = str_replace('" alt="', ' fancy" rel="group1" alt="', $link);
    return $link;
    }

    (untested)

    everything for functions.php in one bit: http://pastebin.com/yH724Myb

  6. foochuck
    Member
    Posted 2 years ago #

    alchymyth,

    That code works, however I just realized I need to place that styles on the a tag of the image, like so:

    <a href="http://localhost/global/wp-content/uploads/2011/06/brakingthecycle-01.jpg" title="brakingthecycle-01" class="fancy" rel="group1">

    How could I modify $link to do that?

  7. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    as before, use the filter; i.e. change:

    function add_rel_to_gallery($link) {
    $link = str_replace('" alt="', ' fancy" rel="group1" alt="', $link);
    return $link;
    }

    into:

    function add_rel_to_gallery($link) {
    $link = str_replace("'><img", "' class=\"fancy\" rel=\"group1\" ><img", $link);
    return $link;
    }
  8. foochuck
    Member
    Posted 2 years ago #

    Awesome. Thank you very much for your help alchymyth!

  9. schoolspeak
    Member
    Posted 2 years ago #

    I'm looking to do the same thing, but instead of wanting to add a class to "fancyboxy" I'm looking to add a class to "highslide".

    Can I just say:
    add_shortcode('gallery', 'gallery_shortcode_highslide');
    ?

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic