Troy Chaplin

Design & Development

Posted in the Blog

Fix Automatically Generated Inline Style on WordPress Image Captions

A couple of years ago I wrote a post that provides a function that will fix an automatically generated inline style on images with captions in WordPress. After recently building a new project with the 3.4 beta, and upgrading along the way, I noticed that this function no longer fixes the problem. I needed to get this problem fixed as the inline style caused issue with some areas of the overall layout, so with the aid of a colleague we discovered there was a small change in the core and we rewrote the function.

I’m still not quite sure why this exists in WordPress, but if you are running a site on 3.4 or above and need to fix this problem simply insert the following code into your functions.php file and you’ll be good to go!


add_shortcode('wp_caption', 'fixed_img_caption_shortcode');
add_shortcode('caption', 'fixed_img_caption_shortcode');
function fixed_img_caption_shortcode($attr, $content = null) {
	if ( ! isset( $attr['caption'] ) ) {
		if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
			$content = $matches[1];
			$attr['caption'] = trim( $matches[2] );
		}
	}
	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
	if ( $output != '' )
		return $output;
	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: ' . $width . 'px">'
	. do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

8 Comments

  1. Posted July 5, 2012 at 6:48 pm | Permalink

    Thanks for the 3.4 update – very useful little function.

  2. Posted July 8, 2012 at 11:57 pm | Permalink

    Thanks a million for posting this fix, just updated to 3.4 and the site broke now is fixed.

  3. Asdrubal Velasquez
    Posted August 5, 2012 at 11:39 am | Permalink

    Thank you very much. Now my sites is working ok.

  4. Doug
    Posted August 15, 2012 at 2:27 pm | Permalink

    Thanks for this update. Works great!

  5. Posted September 16, 2012 at 1:46 pm | Permalink

    Thank you so much for this fix. It’s a real pity that when the WordPress team updated this code they didn’t just remove the needless hard coded padding in the first place.

  6. Andrea Barghigiani
    Posted February 10, 2013 at 7:30 am | Permalink

    Hi Troy,

    thanks to share with us your solution, I am running on WordPress 3.5.1 and I am testing a new layout. Since I want to make it responsive, I have added your snippet into my functions.php and sadly is not working…

    I have done some, little, tests and I have discovered that if I use the $content vriable, set at line 6, I am able to get the responsive image but the caption is lost. I run a var_dump() on $content and $attr and both have some value in them, but if I ran this function on $output this variable is empty.

    I have checked the Filter Reference but I couldn’t find the img_caption_shortcode filter…

    Am I missing somethig? Something has changed from 3.5?

    Thanks for the advice!

  7. Posted May 7, 2013 at 11:10 am | Permalink

    doesn’t seem to work on 3.5.1 – any tweaks needed?

    • Troy Chaplin
      Posted May 13, 2013 at 3:54 pm | Permalink

      Hey Neil,

      I’ve tested and used this function in 3.5.1 without problems

2 Trackbacks

  1. [...] Note: this function will work for WordPress 3.2 and before (maybe 3.3, but I have not tested it). If you are having this issue with 3.4 and above, there has been a change to how this is done in the core, but you can get a revised function for 3.4 here. [...]

  2. [...] Source: http://wp-snippets.com and http://troychaplin.ca/2012/06/updated-function-fix-inline-style-that-added-image-caption-wordpress-3… Rate this:Share this:ShareFacebookTumblrTwitterPinterestLike this:LikeBe the first to like this. [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>