By cachaito


2012-11-30 20:04:00 8 Comments

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 :(

2 comments

@fuxia 2012-12-02 21:19:21

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

@Ahmad M 2012-11-30 22:49:35

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;
}

@cachaito 2012-12-01 18:23:56

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?

@Ahmad M 2012-12-01 22:56:24

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.

@cachaito 2012-12-01 23:35:47

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)

@Ahmad M 2012-12-02 08:46:26

@cachaito lets give it a try. Please see my update.

@cachaito 2012-12-02 16:38:09

It works! Do I see correctly that You added <h3>$attachment->post_title</h3> for displayng thumb title?

@Ahmad M 2012-12-02 20:41:40

@cachaito: You are correct. Besides I removed the apply_filter('post_gallery','', $attr) so we do not get into infinite loop. One more edit: we need to explicitly pass the $attr argument so our code wont break.

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] Apply filters with multiple filters

  • 2019-06-13 21:21:34
  • Zimbu
  • 28 View
  • 0 Score
  • 1 Answer
  • Tags:   filters

1 Answered Questions

[SOLVED] Wordpress show Gallery Title and Captions

  • 2015-01-07 07:39:43
  • KC Chai
  • 1699 View
  • 1 Score
  • 1 Answer
  • Tags:   gallery

1 Answered Questions

[SOLVED] Native gallery custom html output

2 Answered Questions

[SOLVED] Turn off image captions in gallery view?

1 Answered Questions

[SOLVED] WP Gallery showing captions twice

0 Answered Questions

Custom Attachment Caption Fields

1 Answered Questions

[SOLVED] Get image captions for images on gallery post format metabox

4 Answered Questions

2 Answered Questions

[SOLVED] Changing Gallery images size?

  • 2013-12-08 21:12:33
  • Wordpressor
  • 783 View
  • 0 Score
  • 2 Answer
  • Tags:   gallery

1 Answered Questions

[SOLVED] Changing layout of defaul gallery output to masonry

  • 2013-06-03 12:24:12
  • Luigi
  • 461 View
  • 0 Score
  • 1 Answer
  • Tags:   shortcode gallery

Sponsored Content