1

I want to output an image caption in this kind of format:

<img class="alignleft size-medium wp-image-316" alt="Image Title" data-caption="Here lies the image caption" src="http://example.com/wp-content/uploads/image-400x266.jpg" width="400" height="266">

I got the basic caption code from WP Core and ran it through the add_filter( 'img_caption_shortcode', 'my_magic_caption'); filter, which seems to work fine.

My problem is that I can't seem to actually affect the ($content) IMG tag itself, only surround it with other html, which is fine but not what I'm looking for.

Any guidance would be appreciated.

3

Basically the img_caption_shortcode filter allows you to completely replace the default image caption. If you want to do that, you'll need to ask WP to pass all the argument of the filter to your callback function.

<?php
add_filter('img_caption_shortcode', 'wpse81532_caption', 10, 3 /* three args */);

Then your callback will need to take care of all of the rendering. You can copy WP's code, and alter it to suit your needs. WordPress already takes care of extracting the caption itself from the Image HTML so you don't need to worry about that.

<?php
function wpse81532_caption($na, $atts, $content)
{
    extract(shortcode_atts(array(
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $atts));

    if (1 > (int) $width || empty($caption)) {
        return $content;
    }

    // add the data attribute
    $res = str_replace('<img', '<img data-caption="' . esc_attr($caption) . '"', $content);

    // the next bit is more tricky: we need to append our align class to the 
    // already exists classes on the image.
    $class = 'class=';
    $cls_pos = stripos($res, $class);

    if ($cls_pos === false) {
        $res = str_replace('<img', '<img class="' . esc_attr($align) . '"', $res);
    } else {
        $res = substr_replace($res, esc_attr($align) . ' ', $cls_pos + strlen($class) + 1, 0);
    }

    return $res;
}

Here is the above as a plugin.

1
  • Wow, that's fantastic. Thank you so much! I've picked up a few new tricks from that too. I owe you a drink the next time you're in the UK. Jan 15 '13 at 17:15
1

You can use string replacement function to add the data-caption attribute.

function my_custom_img_caption_shortcode( $a , $attr, $content = null) {
    // New-style shortcode with the caption inside the shortcode with the link and image tags.
    if ( ! isset( $attr['caption'] ) ) {
        if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
            $content = $matches[1];
            $attr['caption'] = trim( $matches[2] );
        }
    }

    extract(shortcode_atts(array(
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $attr));

    if ( 1 > (int) $width || empty($caption) )
        return $content;

       $image = do_shortcode( $content );
       return str_replace('<img', '<img data-caption="'.$caption.'" style="width: ' . (10 + (int) $width) . 'px"', $image);
}
add_filter('img_caption_shortcode', 'my_custom_img_caption_shortcode',10,3);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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