Caption in Page adding unwanted 10px to width

Question

I'm trying to create an image with a caption in a Page I'm working with. In the image options, I have it aligned right, with an image width of 220. Without the caption I have no problems, however with the addition of the caption it adds a div wrapper with an inline style width of 230px. The only way to fix this is by setting the width manually in the image options to 210px, which then makes the inline width 220px (it just adds 10px to the value).

How do I prevent this additional 10px from being added to the inline style width?

Answer 1

Here's what you can do. There's a filter at the beginning of the shortcode execution function for the front end that will let you hijack the captions. Returning a non-empty value will stop execution of the shortcode, so if you just process the shortcode the way you want it to be processed and return that result, you can get rid of the pesky 10px of inline padding. Putting something like this in your theme's functions.php file or in a plugin will work:

function wpse14305_img_caption( $empty_string, $attributes, $content ){
  extract(shortcode_atts(array(
    'id' => '',
    'align' => 'alignnone',
    'width' => '',
    'caption' => ''
  ), $attributes));
  if ( empty($caption) )
    return $content;
  if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
  return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

add_filter( 'img_caption_shortcode', 'wpse14305_img_caption', 10, 3 );

Answer 2

Since 3.7 there is a filter to change the width of the wrapping div directly. This will fix the extra 10px, and won't let the caption extend past the width of the image (unlike width: auto !important).

function wp456_img_caption_width( $width, $atts, $content){
    //by default 10 is added if image caption
    return $width - 10;
 }

add_filter( 'img_caption_shortcode_width', 'wp456_img_caption_width', 10, 3 );

Answer 3

I would tend to approach this differently to John - his solution involves duplicating the internals of the img_caption_shortcode() function, which has been changed in Wordpress updates since that solution was added. Instead you can hook into the shortcode parameters passed to the caption generation code and just subtract 10px from the width to counteract what Wordpress is doing:

add_filter('shortcode_atts_caption', 'fixExtraCaptionPadding');

function fixExtraCaptionPadding($attrs)
{
    if (!empty($attrs['width'])) {
        $attrs['width'] -= 10;
    }
    return $attrs;
}

Answer 4

There is also a straightforward CSS solution to override WordPress’s inline styling.

.wp-caption {
    display: table-cell;
    width: auto !important;
}

Setting the width to auto on a block element would result in its width expanding to fill the available space, which is probably not what is wanted, but setting display: table-cell causes the div to automatically resize according to the content.

As a table-cell element, the wp-caption div auto-sizes as if it were an inline-block, yet it behaves like a block element in that content that follows after it, even inline content with no container, renders below the div and not on the same line, as it would if it were an inline-block.

(The !important is needed as inline styling otherwise overrides the stylesheet.)

I've not managed to find a definitive description of how a css table-cell is supposed to behave, but I have tested this in Internet Explorer (including IE8 on WinXP), Firefox, Chrome and Opera, and found complete consistency.