Results 1 to 7 of 7

Thread: PHP Photo Album (Aspect Ratio)

  1. #1
    Join Date
    Feb 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default PHP Photo Album (Aspect Ratio)

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    .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):

    Code:
    //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):

    Code:
    .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:

    Code:
    .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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Location
    Vancouver, BC, Canada
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default PHP Photo thumbnail aspect ratio

    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

  4. #4
    Join Date
    Jul 2007
    Location
    Azerbaijan, Baku
    Posts
    144
    Thanks
    11
    Thanked 27 Times in 25 Posts

    Default

    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.

  5. #5
    Join Date
    Jun 2008
    Location
    Vancouver, BC, Canada
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by allahverdi View Post
    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

  6. #6
    Join Date
    Jul 2007
    Location
    Azerbaijan, Baku
    Posts
    144
    Thanks
    11
    Thanked 27 Times in 25 Posts

    Default

    DrDCA,

    just delete red from your page:
    Code:
    .slideshow img{ /*CSS for each image tag*/
    border: 0;
    width: 130px;
    height: 130px;
    }
    Hope it will help...

  7. The Following User Says Thank You to allahverdi For This Useful Post:

    DrDCA (06-24-2008)

  8. #7
    Join Date
    Jun 2008
    Location
    Vancouver, BC, Canada
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    <duh> smacking forehead!

    Many thanks!!!!!

    Cheers, Dallas

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •