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.

This question is an offshoot from the this discussion on removing dimension attributes from images. The solution code provided on that thread works very well except that it has the unfortunate side effect that any [caption] shortcodes are striped from the image.

After several hours of digging through the core code, I found the cause of this. The wpeditimage TinyMCE plugin that's responsible for adding the [caption] shortcode checks for width attributes in the shortcode and the img tag. If it doesn't find them, it simply remove the caption. Since, this is done 'on the fly' with javascript in the TinyMCE editor, I can't think of any type of WordPress filter that would address this issue. I would be very happy to be proven wrong however. :)

As a final note, my temporary solution has been to use the following jQuery to strip all of the offending tags client side. This, in conjunction with a filter on img_caption_shortcode to prevent a width style from being used there, seems to do the job. It's not pretty, but it's a band-aid for now. Anyone have a better idea?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');
share|improve this question
    
Hmmm... is being able to use the visual editor a requirement? If you only use the HTML editor, a filter on img_caption_shortcode works fine... –  goldenapples Nov 6 '11 at 14:10
    
@goldenapples, yeah, I don't want to loose the visual editor as I am going to be having non-technical people edit the site. Thanks for the suggestion though. Any other ideas? –  Dominic P Nov 8 '11 at 0:36
    
Dominic, can you provide the code for "a filter on img_caption_shortcode to prevent a width style from being used there"? This is exactly what I need, but I don't know how to write that filter. –  user11197 Dec 16 '11 at 15:15
    
@Wendy, hmm, I can't paste the whole thing in a comment. If you want to ask another question and give me a link to it, I'll post it as answer. –  Dominic P Dec 18 '11 at 22:51
    
In case you didn't want to go through all of that, I basically just modified the Codex example. –  Dominic P Dec 18 '11 at 22:58
add comment

1 Answer

up vote 9 down vote accepted

it might not be the exact answer you're after but i think i just found a pretty good workaround.

Iv'e taken the following code from the twenty-eleven theme CSS (who's neatly responsive imho):

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}

This was enuff to make all the images responsive (at least those embedded in the content...) Now i have responsive images, but when caption is used i still have the same problem, that occurs because the tinyMCE adds a style attribute to the caption container with the image's width. To fix that all i had to do is add this to my CSS:

            .wp-caption { max-width: 100%; }

Done! works fine for me, although it might not work for featured images.

I hope this helps someone :-)

share|improve this answer
    
I haven't had the time to test this fully yet, but it's already proved quite useful in other areas. Thanks for the help. –  Dominic P Feb 21 '12 at 6:45
    
my pleasure :-) –  Talbatz Feb 22 '12 at 11:19
    
Tested it in IE9, doesnt seem to work as intended! –  Kuldeep Daftary Jun 24 '13 at 11:16
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.