Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Image Size

Posted by: Matthew Cox Jan 7 2012, 11:17 AM

I've set up a blog: www.madetobelieve.com

When you click through to a topic at the top of the page the images are stretched and distorted. I can't find out how to change this.

Please help
Matt

Posted by: Darin McGrew Jan 7 2012, 09:30 PM

Actually, that's just a frameset for http://hellothanksforvisiting.blogspot.com/

Which images are stretched and distorted? I didn't notice anything offhand.

Posted by: Christian J Jan 7 2012, 10:45 PM

I think the OP means an image like http://3.bp.blogspot.com/-QdfEhHfpuLA/Tu5k4V09rMI/AAAAAAAAAF8/dtMZqV_0tig/s320/idea+coverage.jpg, which is zoomed in http://hellothanksforvisiting.blogspot.com/search/label/Concepts but not http://hellothanksforvisiting.blogspot.com/2011/12/campaign-opinion-piece-internal.html.

Posted by: pandy Jan 7 2012, 10:58 PM

The size is correct in the HTML. The only thing I find is this.

CODE
.entry img{
float:left;
margin:0px 10px 10px 0px;
max-width:490px;
padding:5px;
background:#000;
}


But max-width shouldn't force that width and AFAIK it doesn't. The number is right though. The image is displayed at 490 pixels width. wacko.gif

Posted by: pandy Jan 7 2012, 11:09 PM

Ah! It's this.

CODE
<script type='text/javascript'>
var thumbnail_mode = "float-left";
summary_noimg = 375;
summary_img = 375;
img_thumb_width = 500;
</script>


I don't know what's done with that, but there it is. I tried changing it to a smaller value and the image shrank. Some other snip of JavaScript probably uses the above to set the width of all images in previews to 500px, then the max-width takes over and reduces it to 490px.

Posted by: pandy Jan 7 2012, 11:26 PM

It's used here, in a script block further down.

CODE
if(img.length>=1) {
imgtag = '<div class="postimg"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></div>';
...

Posted by: Matthew Cox Jan 8 2012, 04:23 PM

QUOTE(pandy @ Jan 7 2012, 11:26 PM) *

It's used here, in a script block further down.

CODE
if(img.length>=1) {
imgtag = '<div class="postimg"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></div>';
...



Darn I've tried changing it to something like:

<script type='text/javascript'>var thumbnail_mode = &quot;float-left&quot; ;
summary_noimg = 175;
summary_img = 175;
img_thumb_width = 200;
</script>

Although nothing changed....... Christian J was totally correct about the issue and it's the same across all blogging categories. Just trying to make the images appear in the size as they are uploaded.

Posted by: pandy Jan 8 2012, 10:12 PM

I viewed source of your page and saved it locally. Hooked it up to blogspot with BASE href, changed img_thumb_width to something smaller and the image shrunk according to the number I entered.

Posted by: Matthew Cox Jan 10 2012, 04:08 PM

QUOTE(pandy @ Jan 8 2012, 10:12 PM) *

I viewed source of your page and saved it locally. Hooked it up to blogspot with BASE href, changed img_thumb_width to something smaller and the image shrunk according to the number I entered.


Awesome - it has worked, thank you very much Pandy !!!!!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)