[wp-hackers] Twenty Ten theme issue?

[Lance Willett]

> Well, my point is that if WP was doing the right thing here and using
> inline styles, then it wouldn't matter what the theme did. Inline
> styles always win.
>
> The main purpose of a theme's stylesheet is pretty much to "override"
> the HTML. Stylesheets control the presentation, after all. In this
> case, the height and width of "auto" is merely expressing the default
> settings, and normally it'd be the correct way to do it.

> Short term fix: remove those.
> Long term fix: Change WP to not use width and height attributes for
> resizing, but to use inline styles instead.

Glad this was brought up -- it's been on my mind a lot lately.

I agree that we should remove the CSS values and fix how WordPress
handles image sizes that are larger than the content_width value. As
we've seen with this Twenty Ten image CSS issue, it's impossible to
correctly style every possible case. Fixing one case will break
another.

I don't think inline styles aren't necessarily the answer, though. I'm
thinking more of a post_content filter.

We're not talking about all images, though, right? Only full-size
images? The CSS rules for Twenty Ten in question control any image
uploaded via the Media form and inserted into the post by targeting
only those CSS selectors (size-full, size-large, etc). But, we could
decide to only touch full-size images since they are usually the ones
that cause layout problems.

We deal with this quite a bit on WordPress.com because our customers
tend to switch themes a lot. They may have uploaded images with a
wider theme, and now have a narrower one. Or vice versa. Instead of
forcing the images to fit with CSS, they should fit just right in the
HTML source.

So, what about a post_content filter that does the resize before
output? This would take the burden off of theme CSS for making sure
images posted in the past will still fit in a new content area.

The filter would do two things:
1. Scale down the full-size images in the post if they are wider than
content_width.
2. Scale up image full-size images if they are smaller than the
content_width and if the image can could support it. That is, scale up
to the maximum size of the original image.

Here's how it could work:
1. Check for full-size images in post_content. If none, exit.
2. Get width of each image (from query string or width attribute) and
compare to content_width value.
3. If image width is smaller than content_width, check the original
size and scale it up if possible.
4. If bigger, change query string and attributes based on the
content_width value to scale the image down (use WP's built in
functions for this since they can calculate the new width and height
-- I think it's wp_constrain_dimensions).
5. Replace the values for the images that need to be changed, and
return the post content to continue to output.

This doesn't change any data, it just filters before output so that
the final HTML rendered to the page has images that are all either
exactly the right width, or smaller. With this in place, an over-sized
image would never occur as long as the theme defines content_width
correctly.

> Yes, yes, lots of people use it that way. Still wrong because CSS
> takes precedence over those attributes. We should fix WP to do the
> right thing here, I'd say. Should be simple enough to do, really.

I think most people doing the HTML attribute hack to resize images are
making them smaller -- not bigger, so they'd not be affected by this
unless they are doing it to full-size images.