How to Prevent WordPress from Automatically Applying Inline Styles to Post Images?

Question

I am wondering how to prevent WordPress from applying in-line styles to image enclosing div's in posts.

<div class="img size-medium wp-image-3267 alignright" style="width:190px;">

Edit: The post is generated in the theme file by using the_content().

That width declaration is causing my post to display a horizontal scrollbar under the content. The weird thing is, the horizontal scroll bar only appears if the image is set to align right. Aligning the image to the left doesn't cause the scroll bars to appear.

I am able to remove the scrollbar by setting the .post overflow from 'auto' to 'hidden'.

Does anyone know how WordPress applyies the inline style? Or how to override it? For now, I've set .post overflow to be hidden, but I'm worried that down the line, that might bite me.

Thanks

Answer 1

WordPress doesn't wrap <image /> tags with <div> elements by default ... so there's probably something in your theme or a plug-in on your site that's adding the element wrapper.

I suggest switching to the default TwentyTen theme and disabling plug-ins to compare the generated markup. Then re-enable plug-ins one at a time and switch back to your theme to see which set of code is adding the unwanted <div> blocks.

Answer 2

The link to my original blog post provided by Jeremy is good for WordPress site running 3.2 or before (not sure about 3.3, haven't tested it), but I recently noticed it doesn't work for 3.4. I haven't had a chance to update or write a new post about it, but here's a revised function that will take care of it:

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>';
}

Answer 3

Check the following function:
^{( Source: http://troychaplin.ca/2010/06/remove-automatically-generated-inline-style-on-images-with-caption-in-wordpress/ )}

add_shortcode( 'wp_caption', 'fixed_img_caption_shortcode' );
add_shortcode( 'caption', 'fixed_img_caption_shortcode' );

function fixed_img_caption_shortcode($attr, $content = null) 
{
    // Allow plugins/themes to override the default caption template.
    $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: ' . ((int) $width) . 'px">'
    . do_shortcode( $content ) . '<p>'
    . $caption . '</p></div>';
}

It has helped me to customize the default WP image shortcode.