Styling Down those Oversized Images in WordPress

cc licensed ( BY NC ND ) flickr photo shared by Reema

This blog’s crusty old theme (I still like it, sue me) has a pretty narrow width content column, 500px fixed. I typically size my media to fit. Since I have been syndicating content into here from my other blogs– my Barking Dog photo site puts images in at 950px wide, and my ds106 tricks site is at least 800 wide, I end up with posts requiring manual editing.

Here is an example, the post originally at ds106 tricks has images 71- px wide, so when they are syndicated here, I get cruft like:

(click image to see it big-ola)

yeah, click the screen shot to see it larger

The images blow wide, at the top its not horrible, they are behind the sidebars… but it bothers my design sense.

I’ve noticed on themes like the stock WordPress Twenty-Eleven -Twelve, -Thirteen that it seems to magically size all images wider than the column width to fit.

I dug into the CSS and found the classes are setting a max-width for images in the content column to 97.5%. That is easy.

So I added this code to me blog’s CSS:

/* Images that do not blow up in width */
.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 */
}

.wp-caption img {
	display: block;
	margin: 0 auto;
	max-width: 98%;
}

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

/* Images that do not blow up in width */

.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 */

}

.wp-caption img {

display: block;

margin: 0 auto;

max-width: 98%;

}

.wp-caption {

max-width: 96%;

}

You have to put a maxsize on the caption class because that is the one that decides the space usage if a caption is added in the WordPress editor.

Now I was lucky because my theme names the div that contains the main column content is

<div class="entry-content">

1	<div class="entry-content">

same as the Twenty- themes. You might have to root around your single.php template or peek at the source code, because theme designers can name they divs all kinds of goofy names.

Anyhow, it seems to be working:

But I am sure it will gunk up somewhere else. And I still have challenges where the RSS feeds seem to not include the embedded video, but a thumbnail linked back to the post.

It’s always something… if it’s not one thing it’s another.