Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Can you post the code in your theme that generates this markup? It might be caused by the theme itself, not WordPress. –  EAMann Sep 1 '10 at 17:38
    
@EAMann: I edited the post to indicate the post is presented in a standard Loop with the_content();. –  kevtrout Sep 1 '10 at 18:19
    
The reason I asked is because WordPress doesn't enclose image attachments inside <div> elements like this by default ... so either your theme or a plug-in is adding the element wrapper ... –  EAMann Sep 1 '10 at 18:47
    
I'd suggest switching to the default TwentyTen theme and disabling plug-ins just to compare the generated markup ... –  EAMann Sep 1 '10 at 18:48
    
@EAMann: Thanks to your comment, I discovered that a plugin: Image-Caption; is wrapping the image with the div. If you post your comment as an answer, I'll mark it. –  kevtrout Sep 1 '10 at 19:05
add comment

3 Answers

up vote 1 down vote accepted

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.

share|improve this answer
    
Thanks for the info. Knowing that WP doesn't do it indicates that it must be a plugin. The culprit is Image Caption:channel-ai.com/blog/plugins/image-caption. I opened up the plugin file and quickly found where the image was being wrapped with the div and modifed the code to stop applying inline styles. –  kevtrout Sep 1 '10 at 21:34
add comment

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>';
}
share|improve this answer
add comment

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.

share|improve this answer
1  
An answer should be more than just a link to an external site. Please add a solution. –  toscho Jun 23 '12 at 22:24
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.