Custom caption output for custom image size

Question

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.

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

}