Some images now stretched vertically with 2.8

Site url?

Here’s one of the posts showing the elongated images:

https://newenergydirection.com/blog/2009/06/stirling-engine-generator/

By default, WordPress limits image widths in posts to 500px to stop the “full size” version from spilling out of the post content area. That particular image is 649px wide.

If you want to adjust this default, try adding:
$GLOBALS['content_width'] = 650;

to the top of your theme’s functions.php file immediately after the opening <?php.

I have the same preoblem, but only in ie8, I do have a script to resolve this but I can’t seem to get it to work, it basically should resize images in PHP;

<?php
function imageRestrict($image) {
$maxwidth = 530;
list($width,$height) = getimagesize($image);

if ($width > $maxwidth) {
$newheight = $maxwidth/$width * $height;
return ‘<img src=”‘.$image.'” width=”‘.$maxwidth.'” height=”‘.$newheight.'”>’;
}
else{
return ‘<img src=”‘.$image.'” width=”‘.$width.'” height=”‘.$height.'”>’;
}
}
?>

You need to put that in functions.php apparently and call it in the loop with

<?php if(function_exists(‘imageRestrict’)) imageRestrict($image); ?>

But I can’t seem to get it to function without crashing my site, maybe I’m putting it in the wrong places.?
Any suggestions would be grand.

esmi, that didn’t work. The images are still stretched. Thing is, before the upgrade, the images were not stretched, but there were times where they were “fuzzy” (out of focus), which was okay. You just had to click on them to get the full clear view.

BTW I checked the posts in Firefox and the images are still stretched.

Hmmm, I’m wondering if this is a Firefox/IE8 issue. I recently upgraded to IE8 so maybe that explains partly why the images don’t show properly

It’s definitely not a browser issue.

@franco_n: In your theme’s CSS file, you have this:

p img {
	padding: 0;
	max-width: 100%;
	}

That “max-width” limits the images to the width of the column, which is 450 px in your case. However, you don’t have anything to fix the height. If you add height: auto; to that same block, the height will be scaled properly as well.

Like this:

p img {
	padding: 0;
	max-width: 100%;
	height: auto;
	}

However, that may not work in IE, only in Firefox.

For that particular theme, you should have $GLOBALS['content_width'] = 450; in your theme’s functions.php, so as to limit the size of the images to the width of the column (which is 450px). This will only take effect on new image uploads, not ones you’ve already uploaded and inserted into posts previously. This fix WILL work in all browsers, since it’s server side.

Otto42, it worked, but only in Firefox. IE still displays the images as before. Hopefully with the next IE version this “bug” will be fixed.

Thanks!

@franco_n: If you set $GLOBALS[‘content_width’] to the correct value, then it will correct your issue in both IE and Firefox and every other browser, because that is a server side correction. WordPress uses that value to calculate scaling parameters correctly when inserting an uploaded image into a post.

Otto42, I didn’t try uploading new images to see if it would work. I just wanted to get images formerly posted to display correctly, and they did, but only with Firefox, not IE.

Of course, I’m assuming that for new image uploads they’ll display correctly in both Firefox and IE (as you stated).

With the new scaling parameter in place, if you go edit your old posts, remove and reinsert those images (without uploading them), then that should correct them.

Hey Otto, I posted a script (see above) in attempt to sort this issue, do you think it will work for all older posts without editing them all? I have the $GLOBALS[‘content_width’] in my functions and it seems to work for all browser bar IE8 which won’t resize any images proportionally if they are put in too large, it either squishes them or stretches them respectively. Do you know how to fix this at all?

I looked at that script above, and I honestly can’t figure out what you’re trying to do with it. So I’m going to have to say no, it won’t work.

$GLOBALS[‘content_width’] controls what WordPress does when it inserts the IMG tag into the post (using the image uploader/insert thingy). If the image is wider than $GLOBALS[‘content_width’], then WordPress inserts an image tag with a fixed width and height value, using $GLOBALS[‘content_width’] as the max width and the height scaled proportionally.

If you insert images through some other means (without uploading them into WP and using the insert function), then $GLOBALS[‘content_width’] won’t help you at all.

Oh ok I get ya, kool, any idea then why it don’t work for IE*? It’s when you insert the pic into the page the width and height are still at fullsize and therefore I think that’s why I* 8 is not scaling them properly, but the Large, Med, and Thumb are grayed out, so I can’t ever seen to use that functionality?