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

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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.

share|improve this answer
    
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. –  Magnakai Jan 15 '13 at 17:15
add comment

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);
share|improve this answer
add comment

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.