Better media width compatibility in WordPress

One thing that works against you when you want to try out new WordPress themes (and this applies for either self-hosted WP installs or for WP.com blogs) is the width of your media, like the images you upload for your blog posts. Many themes are narrower than the width you may have chosen for your images over time, and this means images will either overflow beyond the margin of the main column, crowding out the sidebar and generally making your site ugly, or be cut off, which looks a little better but still ruins the user experience.

For example, most of my posts have images posted at 640 px, 600 px or 550 px wide, and that eliminates a lot of themes for me, even though they may be very nice, because their post column is too narrow to display the images.

I have a solution to this problem.

You know how you can set the size of your photos and videos on the Media Settings page?

And did you know there’s also a media width “guideline” within each theme’s CSS settings page (at WP.com)?

That width is the maximum allowed for videos and images. My current theme, “Journalist” by Lucian Marin, allows media embeds at widths up to 720 px, which is a LOT wider than most other themes, which are still stuck at 500 px or even less, at 420 px.

All of these differences would be okay, provided the WordPress platform were to read the maximum column width of a theme and adjust the maximum image width on the fly.

In other words, instead of hard-coding the image width when they’re uploaded to a blog post, it could simply say “thumbnail”, “medium” or “large”, much like it does for the image align attributes (“left”, “center”, “none”), then figure out what the “large” size really means by looking at the theme’s width limit value.

This way, no matter what theme we may choose, images and videos will still display properly and we’d be happier. After all, they’re already doing this for video auto-embeds. As you’ll see if you look at the screenshot I’ve posted above, they say “if the width value is left blank, embeds will default to the max width of your theme.” What’s to stop them from doing the same with images?

I would also encourage Automattic, should they consider building this into a future version of WordPress, to make sure it’s backward compatible, so that no user should have to go back through all of his or her old posts and make sure all the images are set to the right width if they decide to switch themes. Perhaps they can do this with a wizard that goes through all the images and sets them to the correct width, or the new image embed code can auto-magically fix the image width for old posts.


4 thoughts on “Better media width compatibility in WordPress

  1. HI Roaul,
    Please i wamt to readuset the theme width of my blog,i am currently using Grezyed but i want to cchnage it to Monochrome,how do i go about readjusting the monochrome witdth.

    Looking forard to your response!

    Regards

    Like

Comments are closed.