Posted 2 years ago #
Hi, after upgrading to version 2.8 I noticed that some images in my posts are now stretched vertically. They look awful!
Is there something I can edit, maybe in the style.css, to fix it, maybe by adjusting the aspect ratio or something?
I do not want to fix each image manually. I have to wonder what changed in the latest wordpress version to cause this problem...
Thanks in advance
Site url?
Posted 2 years ago #
Here's one of the posts showing the elongated images:
http://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.
Posted 2 years ago #
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.
Posted 2 years ago #
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.
Posted 2 years ago #
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.
Posted 2 years ago #
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.
Posted 2 years ago #
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.
Posted 2 years ago #
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.
Posted 2 years ago #
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?
Posted 2 years ago #
The only consistent way I've found around this is to remove the width and height attributes from the img tag. That allows proper scaling in IE and FF.
Posted 2 years ago #
Yeah mellow I found that too, that if you take the width/height out of the img tags it does work for all browsers. Now my next issue haha, I can't choose the thumb / med/ large options as they are grayed out... oh well back to digging in the forums....
Posted 2 years ago #
Hey all, I just installed WordPress 2.9.2 and am loving it. Posting from my iPhone using the WordPress app works like a charm without the CSS fix.
Anyone know then how to not make the Add an image function not insert the width and height automatically when uploading using my desktop browser? Just trying to avoid editing the properties for every image upload.
Thanks.
This topic has been closed to new replies.
