XHTML Pros...

[bikeriderx]

Hey web developers...I need a hand...I bought a website template and I'm trying to get the thumbnails in the gallery to re-size/scale right...What I mean is that my original pics are obviously too big, but whenever I try to re-size them to fit the size of the thumbnail template the quality goes "south" I have Adobe Photoshop Elements 6.0 and that didn't do any better job than Microsoft Photo Editor...Any suggestions? :mrgreen:

 

[aka_locojoe]

Not for sure I follow but...
Once you resize a photo and you say the quality "goes south" are you viewing the resized photo in the program that you resized it in and it looks bad or is it only when viewing it in your template via your browser that it looks bad?

 

[bikeriderx]

Not for sure I follow but...
Once you resize a photo and you say the quality "goes south" are you viewing the resized photo in the program that you resized it in and it looks bad or is it only when viewing it in your template via your browser that it looks bad?

Yes. When viewing the image in the program that I'm using to re-size the photo, it looks "squished". Because the full size image size is 1600 X 1200 PX. And I have to re-size it to like, 308 X 289 PX. Which is the thumbnail parameters in the website template. What I can't figure is if I need to re-size the image before I copy it to website template, or if there is a line of code (that I haven't found yet..) that'll re-size the image for the thumbnails by itself...Because, if I leave the image in the folder (in the website template) for the thumbnail in it's full size, all I see is just one corner of the large image. But when I click on the thumbnail (in the website template) it displays the full size image fine. I couldn't find the code for the image to re-size to fit in the thumbnail frame, so I re-sized it to the dimensions of what the other thumbnail images in the template folder were (one folder for thumbnail size images and inside that, a sub-folder for "full size images")...Now the image fits in the thumbnail frame but of course, looks "squished".

 

[aka_locojoe]

It sounds like the aspect ratio of the thumbnail is different than the aspect ratio of the original picture therefore it's distorted when you force it to resize at the thumbnail dimensions. What if in your graphics editing program you check "lock aspect ratio" (or something similar) when resizing and only enter either the width of the thumbnail size and let your graphic editor choose the height to keep the aspect ratio correct. I would probably edit the template and change height="289" to height="" in the <img...> code.
This will force the thumbnails to what ever the width is but not force a height and that way they will display in their proper aspect ratio.
Make a backup of your template first.

If you're just dealing with a template then it won't be automatically creating the thumbnails for you. That requires a script of some kind and software on the server (for lack of better explanation).

 

[aka_locojoe]

Oh and I should state that I'm no "pro".

 

[bikeriderx]

Oh and I should state that I'm no "pro".

Thanks Randy! I hadn't thought to pay that close of attention to the aspect ratio. I'll try that! Thanks again! Oh, and it was your website and blog that inspired me to try it for myself. So thanks again, again! :mrgreen:

 

[bikeriderx]

It sounds like the aspect ratio of the thumbnail is different than the aspect ratio of the original picture therefore it's distorted when you force it to resize at the thumbnail dimensions. What if in your graphics editing program you check "lock aspect ratio" (or something similar) when resizing and only enter either the width of the thumbnail size and let your graphic editor choose the height to keep the aspect ratio correct. I would probably edit the template and change height="289" to height="" in the <img...> code.
This will force the thumbnails to what ever the width is but not force a height and that way they will display in their proper aspect ratio.
Make a backup of your template first.

If you're just dealing with a template then it won't be automatically creating the thumbnails for you. That requires a script of some kind and software on the server (for lack of better explanation).

Well I figured it out...I played around with Photoshop Elements 6 and if you open an image, there is a feature called "save for web"...When you click on it, it opens another window that has the original image on one side and then you can choose the format-JPEG, GIF, PNG, whichever you like and just edit the height and width and click apply and BAM! There it is on the other side and it works PERFECT! :mrgreen: And the image looks reeeeal nice! Thanks again Randy for the direction! One step closer to bikeriderx.com going online!!