Best practise for creating a thumbnail on the fly?

Discussion in 'Programming' started by amaze, May 22, 2007.

0
  1. #1
    Hi,

    We have a e-com site and the dimensions of images are different depending on the product. This is OK on the product page, but on the list page its a problem at the widest an image can be is 90px without breaking the design. Of course we can't shrink to 90px on all as the aspect ratio will be out.

    Whats the best way of working out the aspect ratio on the fly so we can re-size the images correctly?

    Thanks
     
    amaze, May 22, 2007 IP
  2. IsRoss()

    IsRoss() Peon

    Messages:
    116
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can use ImageCFC or a something similar ...but I don't understand why you cannot resize? You are only constrained by one dimension, not two, so resizing should not be a problem... ?
     
    IsRoss(), May 22, 2007 IP
  3. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Yes I could resize, but I'm not sure what the algo would be to make sure its in the correct aspect ratio?
     
    amaze, May 22, 2007 IP
  4. IsRoss()

    IsRoss() Peon

    Messages:
    116
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    <img width="90"> ? If you leave out the height attribute, the image will resize keeping it's aspect ratio. Not a bandwidth friendly way of doing it, but it works.

    Of course, you could also use imagecfc to resize upon upload and create an actual thumbnail file...
     
    IsRoss(), May 22, 2007 IP
  5. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #5
    I didn't know HTML automatically re-sized the height if only width is declared - interesting! :)

    Yes as a "quick fix" it will work and then we have the fun of creating thumbnails for 2000+ products! ;)

    Thanks for your expert help.
     
    amaze, May 22, 2007 IP
  6. IsRoss()

    IsRoss() Peon

    Messages:
    116
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Glad I could be of help...even with my lowly 10 rep ;)
     
    IsRoss(), May 22, 2007 IP
    amaze likes this.
  7. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #7
    Rep coming your way ha :)
     
    amaze, May 22, 2007 IP
  8. IsRoss()

    IsRoss() Peon

    Messages:
    116
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    ty amaze :)
     
    IsRoss(), May 23, 2007 IP
  9. unitedlocalbands

    unitedlocalbands Well-Known Member

    Messages:
    246
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    128
    #9
    I'm dealing with this same issue and I too have resorted to just giving the width artibute a value in the <img> tag. Seems to work but its not the best way to do it. Especially when the height is much greater then the width in the original image.

    In my case I dont actually host the image file. I only allow the users to save the url address of their image/photo to my database. Then I use coldfusion to fill in the "src" artibute of the <img> tag. Looks like: 

    <img src="#logourl#"> or <img src=" http://www.exampleimage.img">
    Code (markup):
    once it hits the browser.



    So is there a better way to accomplish what "amaze" was asking, and is there anything i can do to better improve my situation without having to actually allow user to upload the image file to my server.

    You can check out the page at:

    http://www.unitedlocalbands.com/user_login/user_band_logo.cfm?orderby=groupname

    Thanks for your help.
     
    unitedlocalbands, Jul 25, 2007 IP
  10. mphuie

    mphuie Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You can use imagemagick. It's resize function fits the image into the dimensions you specify. (maintains aspect ratio/doesn't stretch).

    convert image.gif -resize 90x90

    You really should not use the <img> width and height to "resize" an image. It's a waste of bandwidth, and most importantly, it doesn't antialias so your image will look pretty ugly. You really dont want that on a site that is showing off products.
     
    mphuie, Aug 3, 2007 IP