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'd like to change only one output of native WP Gallery (in media.php)

On Smashing Magazine (link) author advises to change whole gallery_shortcode function. But I wondered if is possible to change only specific output ($captiontag)

I wrote:

add_filter( 'captiontag', 'my_captiontag' );

function my_captiontag( $captiontag ) {
 $output .= "
  <{$captiontag} class='wp-caption-text gallery-caption'><p>
  " . wptexturize($attachment->post_excerpt) . "
  </p></{$captiontag}>";
}

but it doesn't work :(

share|improve this question

2 Answers 2

up vote 1 down vote accepted

There are no filter hook called captiontag. You can change the value of the caption html tag by specifying the captiontag option when inserting the [gallery] shortcode.

From the gallery shortcode codex page:

captiontag

the name of the XHTML tag used to enclose each caption. The default is "dd". For example, to change the gallery markup to use div, span and p tags:

[gallery itemtag="div" icontag="span" captiontag="p"]

Update:

The following code will overwrite the default [gallery] output. It is basically a copy of the gallery_shotcode() function with one modification to display the image title wrapped in <h3> tag before the image:

add_filter('post_gallery', 'my_gallery_shortcode', 10, 2);

function my_gallery_shortcode($output, $attr) {
    global $post;

    static $instance = 0;
    $instance++;

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

        $output .= "<{$itemtag} class='gallery-item'>";
        // Here we add the image title
        $output .= "
            <{$icontag} class='gallery-icon'>
                <h3>$attachment->post_title</h3>
                $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;
}
share|improve this answer
    
Thank You for reply. So You're telling me I have to copy whole gallery function like they telling in Smahing Magazine, to have between <dd class="wp-caption-text gallery-caption"></dd> additional <p></p> tag? –  cachaito Dec 1 '12 at 18:23
    
I am afraid this is true, the only way to change the html markup of the [gallery] shortcode is to hook to gallery_shortcode filter which is fired at an early point of the gallery_shortcode function, meaning that it will overwrite the entire $output of that function. Alternatively you can create your own gallery shortcode (eg. [my_gallery]) by copying and customizing the default gallery_shortcode function and using add_shortcode('my_gallery', 'my_gallery_shortcode') function. –  Ahmad M Dec 1 '12 at 22:56
    
Ok :-/ If I have to copy whole code, do You know how to display title of image in each thumb from native gallery (like caption is displayed) –  cachaito Dec 1 '12 at 23:35
    
@cachaito lets give it a try. Please see my update. –  Ahmad M Dec 2 '12 at 8:46
    
It works! Do I see correctly that You added <h3>$attachment->post_title</h3> for displayng thumb title? –  cachaito Dec 2 '12 at 16:38

There is no need to copy the gallery shortcode. Just set your filter function between the native handler’s output and the final output.

To do that, hijack the shortcode handler, then run a preg_replace_callback() over the output.

add_action( 'after_setup_theme', 'wpse_74515_replace_gallery_shortcode' );

/**
 * Replace the default shortcode handlers.
 *
 * @wp-hook after_setup_theme
 * @return  void
 */
function wpse_74515_replace_gallery_shortcode()
{
    // overwrite the native shortcode handler
    add_shortcode( 'gallery', 'wpse_74515_gallery_shortcode' );
}
/**
 * Create a filtered gallery output.
 *
 * @wp-hook gallery
 * @param   array $attr
 * @return  string
 */
function wpse_74515_gallery_shortcode( $attr )
{
    // Default value in WordPress.
    $captiontag = 'dd';

    // User value.
    isset ( $attr['captiontag'] ) && $captiontag = $attr['captiontag'];

    // Let WordPress create the regular gallery …
    $gallery = gallery_shortcode( $attr );

    // change the content of the caption
    $gallery = preg_replace_callback(
        '~(<' . $captiontag . '.*>)(.*)(</' . $captiontag . '>)~mUus',
        'wpse_74515_gallery_callback',
        $gallery
    );

    return $gallery;
}
/**
 * Change the result of the regex match from wpse_74515_gallery_shortcode.
 *
 * @param  array $m matches
 * @return string
 */
function wpse_74515_gallery_callback( $m )
{
    return $m[1] . wptexturize( $m[2] ) . $m[3];
}

Similar posts

share|improve this answer

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.