Twenty Ten: minor image style edits

[iandstewart]

The attached patch adds width:auto to content images to prevent "stretching" in IE8 and a "single-attachment" class to the container on attachment templates to keep everything (navigation, titles, etc.) full-width like the centered image attachments.

[automattor]

(In [15421]) Twenty Ten minor image style edits. props iandstewart, fixes #14303 for trunk.

[nacin]

[15421] for 3.0.

[nacin]

Looks like width/height: auto had some side effects:
​http://wordpress.org/support/topic/twenty-ten-11-ignoring-image-width-resizing?replies=2

[lancewillett]

Patch to improve image size handling

[lancewillett]

iandstewart and I worked together today on improving image dimensions when the image is larger than the main column width, including making sure things work better in IE8.

Patch details (​14303-revised.diff):

• Only apply max-width to images that are uploaded to the media gallery
• Revert r14272 (specificity isn't needed)
• Apply max-width to wp-caption to avoid breakage with over-wide images
• Add custom-menu tag
• Cleanup and formatting fixes for editor-style stylesheet

These fixes need further testing, especially in IE7 and IE8 -- any help would be appreciated. :)

[iandstewart]

Patch to improve image size handling (sans width: auto)

[iandstewart]

I've attached a revised version of lancewillet's patch that removes width: auto. The auto width that corrects image stretching causes image-edits made in the Visual Editor to be ignored.

[Otto42]

This doesn't fix the underlying issue, I think, which is that the TinyMCE image editor plugin only sets width and height attributes the image tag. That's not enough to accomplish a resize in all themes, nor should it be. I think the editimage.js file needs to be modified to make it insert an inline style with the width and height parameters as well.

[lancewillett]

Replying to Otto42:

This doesn't fix the underlying issue, I think, which is that the TinyMCE image editor plugin only sets width and height attributes the image tag.

These CSS rules apply to any image uploaded and inserted via Media tools, as is not limited to images edited with TinyMCE—that should probably be a different ticket.

[wpweaver]

The width: auto breaks any image that a user enters the img tag + width by hand in all current browsers. Don't know about relationship to TinyMCE, or if @iandstweart's post means the width: auto got put back in, but it really is causing lots of problems for lots of people. Just wanted you all to be aware of how serious this issue is to people with images in their Twenty Ten (or child theme) sites. Many have had to take all their images, resize them in a photo editor, then re-upload them. For whatever reason, the width:auto makes all the browsers simply ignore the width specification in an img tag. Sorry if this post is out of place. but I've been getting a very large number if people with this issue using my Twenty Ten child theme.

[iandstewart]

@wpweaver The latest patch removes width:auto.

[nacin]

Marked #14775 as a duplicate.

[nacin]

(In [15609]) Fix image size handling in Twenty Ten. props lancewillett, iandstewart, see #14303 for trunk.

[nacin]

Suggesting we commit to the 3.0 branch, fix on wpcom if we haven't already, and release Twenty Ten 1.4. Is this ready for that visibility/exposure?

[hakre]

+1 for getting this fixed for trunk.

[nacin]

(In [15786]) Fix image size handling in Twenty Ten. props lancewillett, iandstewart, fixes #14303 for 3.0.