0

I've done a lot of searching and have found out how to customize the img_caption_shortcode oputput. What I can't seem to figure out how to do:

Add a specific class to the caption's output if a certain custom thumbnail size was chosen in the media uploader.

So, to elaborate a bit:

I created a new image size:

add_image_size( 'profile-image', 300, 300 );

I added that to the media uploader image size options:

/**
 * Add Custom Image sizes to Media Uploader
 */
add_filter( 'image_size_names_choose', 'my_custom_image_sizes' );

function my_custom_image_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'profile-image' => __('Profile Image with Caption'),
    ) );
}

I found this code to hook into the img_caption_shortcode function:

function my_custom_img_caption_shortcode($a, $attr, $content = null) {

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

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

    if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}
//Add the filter to override the standard shortcode
add_filter( 'img_caption_shortcode', 'my_custom_img_caption_shortcode', 10, 3 );

Now I would like to be able to change the caption output if the profile-image thumbnail size is chosen. I thought I would just try to output the thumbnail size (size-profile-image) class that WP provides to the caption's div wrapper, but I can't figure out how to do that.

1
  • I can do it with jQuery pretty easily, but that feels like a cop out: $('img.size-profile-image').closest('div.wp-caption').addClass('profile-image'); – Gabriel Luethje Sep 13 '13 at 22:27
1

You need only a regex to catch the class from content, check if the class for you size is one of the assigned class and if so add to output, something like:

function my_custom_img_caption_shortcode($a, $attr, $content = null) { 

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

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

  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

  // set the initial class output
  $class = 'wp-caption';
  // use a preg match to catch the img class attribute
  preg_match('/<img.*class[ \t]*=[ \t]*["\']([^"\']*)["\'][^>]+>/', $content, $matches);
  $class_attr = isset($matches[1]) && $matches[1] ? $matches[1] : false;
  // if the class attribute is not empty get an array of all classes
  if ( $class_attr ) {
    foreach ( explode(' ', $class_attr) as $aclass ) {
      if ( strpos($aclass, 'size-') === 0 ) $class .= ' ' . $aclass;
    }
  }

  $class .= ' ' . esc_attr($align);

  return sprintf (
    '<div %sclass="%s" style="width:%dpx">%s<p class="wp-caption-text">%s</p></div>',
    $id, $class, (10 + (int)$width), do_shortcode($content), $caption
  );

}
6
  • Thank you for posting. Unfortunately I could not get that to work. var_dump($class_attr); returns: 'bool(false)`, so maybe a problem with the regex? Regexes make my eyes bleed, so that's as much as I can tell. – Gabriel Luethje Sep 13 '13 at 22:24
  • @Gabriel was a regex error (it worked only if the class was the first attribute of img), now I've insert the fixed versions in answer. Try now. – gmazzap Sep 13 '13 at 23:33
  • Killer! It works. I would buy you a beer right now if I could (and if you like beer :). Thanks! – Gabriel Luethje Sep 13 '13 at 23:44
  • Now, for bonus beers: it would be really cool if it was less specific and could output whatever size-* class the image had on it. No worries if you don't want to try that, though. You've already helped a lot. Cheers. – Gabriel Luethje Sep 13 '13 at 23:49
  • I like beer, friend. See the edit ;) @Gabriel – gmazzap Sep 13 '13 at 23:59

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.