Stripping Inline Width Style for wp_caption on Images

I was able to override the width settings with this CSS, but I would like to avoid WP doing this in the first place. I run a group blog and I need to be sure that guest bloggers and others don’t get freaked out by strange behavior in the visual editor.

figure.wp-caption.alignnone,
	img.alignnone {
	width: 100% !important;
	margin: auto;
}

Oh NO!!! Not the 10 px thing again! ??

This has been endlessly debated in Trac, I haven’t been following it lately. It appears the 10px addition will remain in perpetuity for backwards compatibility reasons.

The ability for individual site owners to alter this “feature” as been formalized with the ‘img_caption_shortcode_width’ filter. You cannot remove the width style from the caption, nor can you set it to 100%. What you can do is set it to any pixel width you like. Besides the width with 10 pixels added being passed to your filter callback, it is passed the shortcode $atts and the post $content with which your code can decide what to do.

Most people simply want the 10px taken back out, which can be done with this:

add_filter('img_caption_shortcode_width', 'fix_caption_width_hack', 10, 3);
function fix_caption_width_hack( $caption_width, $atts, $content ) {
   return $caption_width - 10;
}

Untested, but I’m reasonably sure I got it right.

Oh NO!!! Not the 10 px thing again! ??

I don’t think this is the same problem. More like what you say later:

You cannot remove the width style from the caption, nor can you set it to 100%.

I think I might be able to fix my problems with the ‘img_caption_shortcode_width’ filter, but I’m not sure how. Where does this go? In function.php? In the CSS?

Another possibility might be to simply create a new CSS class that functions as an image caption but isn’t actually stored inside the caption shortcode…

OK. I figured out what is happening.

Basically, while simply inserting an image doesn’t require specifying a width, inserting a caption forces the image to have a width. Moreover, if you are not using an image from the media library, but an external image via a URL then you have no ability to adjust the width of that image – it defaults to the max image width.

So this seemed like the old bug, but was actually something different. Sorry about the confusion. I still don’t know how to fix it though…

No worries, the filter is new, so my initial post might help someone.

I’m not sure I’m fully understanding your problem. My understanding is you are manually typing in the caption shortcode, along with the img tag with the src linking to some large external image. If that is not correct, exactly what are you doing so I can replicate the problem you are seeing?

The caption shortcode always requires a width be specified, whether you add it manually or the media library sets it for you. Thus the image contained would take on the width of the caption container if it is bigger. If you do not want to specify a width, you essentially cannot use the caption shortcode. When a width is specified, it all should work out as expected, except for that 10px thing.

I was able to work around problems with manual entry by making my own quicktag that specifies a width equivalent to the width of my content area; however, my post above was about a different issue. When using the ‘Add Media’ button in the visual editor one is normally presented with an option for setting the width of the image. This is not the case when entering an image via URL. This means that a large image will be rescaled in the visual editor to be quite huge. I thought this was the same as an old error (linked to above) that created huge image widths as well; however, this turned out not to be the case. The bug I was referring to is different from the 10px bug, but it doesn’t seem to be at issue here.