PHP Photo Album (Aspect Ratio)

[kenboldt]

PHP Photo Album
PHP Photo Album Script

Maybe there is a very simple answer to this and I am just dumb, but I was wondering if there is a way to have the thumbnail of each picture have the aspect ratio of the file it originates from. For example, in the css my image dimensions are fixed, but this is for an aspect ratio of a regular picture with the height being .75 of the width, however, many pictures are taken with the camera being turned sideways so that the width is .75 of the height. As a result, all these vertically long pictures end up looking squished in my gallery. Once you click the links and it opens the original file, it of course looks fine, but it would be nice to have the thumbnail have the correct aspect ratio for each picture as well.

[jscheuer1]

You are referring to this selector, I assume (from step 2):

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
}

It uses a fixed width and height for all images in the album, which is fine if all of your 'album' images are the same width and height (generally a good idea). However, if they are not, it is then best to take advantage of the script's ability to show separate thumbnails and full sized versions of the images (from step 3, comments green):

//By default, each image hyperlinks to itself.
//However, if you wish them to link to larger versions of themselves
//Specify the directory in which the larger images are located
//The file names of these large images should mirror those of the original
//Enter a blank string ("") to disable this option
var targetlinkdir="http://www.mysite.com/largegallery/"

If you do that, then your thumbnails can all be small enough to fit within a box of whatever dimensions that you would set with this selector (step 2 again, additions red):

.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
width:250px;
height:250px;
}

Then leaving the dimensions of this selector out:

.slideshow img{ /*CSS for each image tag*/
border: 0;
}

will allow each thumbnail to display in its native dimensions.

Notes: I imagine the large and small versions of each image will need to have the same filenames, just be in different directories. Also, it would be a good idea to use this method anyway, even if there is no difference among the images dimensions as, smaller thumbnails will load more quickly.

[DrDCA]

I'm very new to this PHP stuff, so my question is probably very simple! :-)

I've a real grab bag of images, some scanned, some from digital sources (some of very poor quality, too!). I've used Easy Thumbnails (http://www.fookes.com/ezthumbs/index.php?3.0) to generate thumbnails for these images, defining the size as 125 X 125 Best Fit.

My problem is that some (many) of the thumbnails are displaying very distorted. The full images are fine.

I'm using the 2 directory approach, and the mess can be seen at

http://www.vancouverconcertband.ca/images.htm

Suggestions for improvement apart from my problem are appreciated!

Cheers, Dallas

[allahverdi]

DrDCA, your problem is simple. Your thumbnails is not in that size. For example your image's (photo 4) real size is: 125x83. But you made size of photo 106x106 in your photo album. If you want better result you can:
1. Don't give fixed size of image in album
or
2. Change their size of real picture.

I wish it will help you.

[DrDCA]

DrDCA, your problem is simple. Your thumbnails is not in that size. For example your image's (photo 4) real size is: 125x83. But you made size of photo 106x106 in your photo album. If you want better result you can:
1. Don't give fixed size of image in album
or
2. Change their size of real picture.

Ah, well that makes sense - thanks!! Question, however -- I tried the example above to let the thumbnail size automatically, but it just created a horrible jumble. There must be something obvious I missed -- could you please show me how to let the image size be not fixed? (changing the picture sizes would be a pain).

I did change the size to 130 X 130, but the thumbs are still distorted?

Thanks!

Cheers, Dallas

[allahverdi]

DrDCA,

just delete red from your page:

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 130px;
height: 130px;
}

Hope it will help...

[DrDCA]

<duh> smacking forehead!

Many thanks!!!!!

Cheers, Dallas

Ain't the web a great place? :-)