resizing images

secretsquirrel · Dec 17, 2003

hi guys,

i have a mysql database from which i'm retrieving paths to image files to display in my page (eg. 'images/myPhoto.jpg'). i'm having a bit of trouble resizing the images because some of them are portrait and some are landscape.

i've put together a bit of javascript which compares the width and height of the image and then resizes it accordingly...

if (image.width > image.height)
{
image.width = "200";
} else {
image.height = "200";
}

...like this.

the problem is that when the page loads, the images are displayed and *then* resized, so the page loading looks awful as the images appear at full size and then shrink to the size i want.

i've tried setting the images' display property to 'none', resizing them then setting the display to 'block', but with the display set to 'none' the browser thinks the images are 0 pixels by 0 pixels and as such, doesn't display them correctly.

can anyone suggest a way of obtaining the image dimensions *before* they're put into the page?

thanks in advance,

ss...

simonchristieis · Dec 17, 2003

I hope your using asp.

http://www.learnasp.com/learn/graphicdetect.asp

Vragabond · Dec 17, 2003

Like simonchristieis said, you could use one of the server side scripting languages (asp, php, perl, coldfusion). When using a client-side scripting, like javascript, you will always experience this kind of problem.

However, I have a rather silly solution. You could have all your images the same height while the width would vary according to the picture orientation. Portrait picture will look a bit smaller, but their ration will be perserved. To do this, just define only one parameter:

<img src="pic.jpg" alt="" height="200" />

You could also specify only the width. In both cases, image will be resized proportionally.

secretsquirrel · Dec 17, 2003

thanks for the incredibly quick response, simon!

sadly i'm not using asp and i have very limited knowledge in this area.

i'm actually using php. do you know if there's a php equivalent of this?

ss...

BillyRayPreachersSon · Dec 17, 2003

SS,

This works in IE and Opera, but sadly not in Netscape:

Code:

<HTML>
<HEAD>

<SCRIPT LANGUAGE=&quot;Javascript&quot;>
<!--

	function printImageSize(imageSrc)
	{
		var imgObject = new Image();
		imgObject.src = imageSrc;
		var imgWidth = imgObject.width;
		var imgHeight = imgObject.height;
		alert('Image Information\n\nImage name: ' + imageSrc + '\nImage Width: ' + imgWidth + ' pixels\nImage Height: ' + imgHeight + ' pixels');
	}

//-->
</SCRIPT>

</HEAD>
<BODY>

<SCRIPT>printImageSize('pic01.jpg');</SCRIPT>

</BODY>
</HTML>

Hope this helps!

Dan

BabyJeffy · Dec 17, 2003

How about setting a style on the images that shows

Code:

visibility:hidden

initially. Then add an onLoad to the image that calls a javascript function to resize as appropriate... the last thing you would do in the javascript function is set

Code:

visibility:visible

for the image.

I think that should work. The onLoad in the image will only be called once the image has fully loaded... and it will load whether it's style is visible or hidden.

That's the theory anyway... hope you get some milage from it.

Jeff

simonchristieis · Dec 17, 2003

Vragabond

I think your siollution will only work with images that dont mind being altered ie jpg's.

Using this with gif's will distort them.

The other solution would be to preload the images and then markup the page depending on the properties of the preloaded images.

Simon

BillyRayPreachersSon · Dec 17, 2003

Simon,

Both GIF and JPG images will both suffer from distortion if resizes dynamically by the browser. It really depends on the content of the image as to how much distortion shows up.

Dan

secretsquirrel · Dec 17, 2003

thanks for all the responses.

vragabond, i've tried only setting one dimension, but i found that, while it preserves the proportions, some of the images appeared really small.

billyray, i'll give this a go and try and come up with an alternative solution for netscape.

simon, how would i go about preloading the images? as i think this may be my best option.

thanks,

ss...

simonchristieis · Dec 17, 2003

//preload the image
myImage = new Image()
myImage.src = "whatever.jpg"
tempWidth = myImage.width
tempHeight = myImage.height

// decide where to put it
tImage = document.blah.blah.blah

// mark it up
tImage.src = myImage.src
tImage.setAttribute("width",tempWidth);
tImage.setAttribute("height",tempHeight);

Vragabond · Dec 17, 2003

Well, using native html code or javascript code to set the image width and height on the fly is practically the same. If image is not the same size as specified it will become distorted. Also many thumbnail galleries I have seen throughout the pages force one setting (either height or width) and leave the other to be adjusted. With height being forced that generates pictures that are equally high and differently wide. If you have a normal selection of pictures this will do.

Actually, all I have written I usually use in a batch image program (I take a bunch of pictures and resize using one attribute). Since it is much better practice to use small images for thumbnails than using big pictures which have been forced to look smaller.

ChrisHunt · Dec 17, 2003

You should really try and find a server-side solution for this (such as PHP) that actually re-sizes the images rather than just fiddling with the HTML attributes. Just changing the height & width attributes will still download the full-size image file to your browser - see

http://www.fixingyourwebsite.com/cheaptools.html#1

.

You either need to call something like imagemagick to create a thumbnail on the fly, or create them yourself using a graphics package (free tool

http://www.fookes.com/ezthumbs

looks good for this).

Preloading is a bad idea - visitors will have to wait for all your images to preload in the background before they see anything on your page.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

simonchristieis · Dec 17, 2003

I didn't realise the post was about generating thumbnails / reducing download but about finding out image properties before page loads.

Code:

myI = new Image()
myI.src = &quot;whatever.jpg&quot;

tVal = (myI.height>myI.width)?myI.height:myI.width;
tProp = (myI.height>myI.width)?&quot;height&quot;:&quot;width&quot;;

tMU = &quot;<img src='&quot;+myImage.src+&quot;' &quot;+tProp+&quot;='&quot;tVal&quot;'>&quot;
document.write tMu

This will make the image scale to whichever is the bigger - height or width.

Hope this helps

Simon

MrBelfry · Dec 17, 2003

the php function getimagesize can get image dimensions and can even produce the height and width tags for you.

This is how you use it:

$imageinfo = getimagesize("myimage.jpg&quot

;

$imageinfo then is an array of info about the file. THe php statement

echo $imageinfo[3];

will return the height and width as a string.

MrBelfry

MichiganRon · Dec 17, 2003

So you're using PHP, huh? Have PHP resize your images "on the fly" so that you're only sending the BIG file when they request it.

As with most PHP scripts, there are MANY freely available scripts & tutorials for resizing images to thumbnails.

Here's one that I've found to be particularly useful:

http://codewalkers.com/tutorials/42/1.html

You can find many more scripts like this one at

http://www.hotscripts.com/PHP/index.html.

Good luck,
-Ron

-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.

secretsquirrel · Dec 17, 2003

thanks everybody!

you've all been more than helpful, but unfortunately i can't try any of this out until i get home tonight

i'll let you know how it all goes!

thanks again,

ss...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

resizing images

secretsquirrel

Programmer

simonchristieis

Programmer

Vragabond

Programmer

secretsquirrel

Programmer

BillyRayPreachersSon

Programmer

BabyJeffy

Programmer

simonchristieis

Programmer

BillyRayPreachersSon

Programmer

secretsquirrel

Programmer

simonchristieis

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

simonchristieis

Programmer

MrBelfry

IS-IT--Management

MichiganRon

MIS

secretsquirrel

Programmer

Similar threads

Part and Inventory Search

Sponsor