Question regarding Graphical Layout: Images/Thumbnails in an E-Commerce site

[TwentyFourSeven]

I am building a storefront and have a couple questions?

How do I arrange multiple images on a page without using tables. I have used div tags for my header container and footer, but what do I use in the container to arrange my images?

How do I create thumbnails?

[BGarner]

An example site might help us to be a little more specific as to exactly what you want. There are various methods to position your images and an example would be helpful.

Thumbnails are just small versions of your larger image. Most standard imaging programs will allow you to resize an image to a certain percentage of the original size.

[Lchad]

I'm not sure if this is 100% correct but I've taken images and put them in a <p> tag, floated them all left (3 images). Add a right margin bottom margin to each photo with css and they space out nicely.
When you are ready to start a new line of photos, add another <p> tag.
I add margin-bottom to my <p> tags so that I have a bit more room between lines of photos.

Code: Select all

 <p align="center"><img src="fs_teaser1.jpg" alt="Fairy Stone Necklace Collection" border="0" class="imageleft" />
<img src="pendant_teaser1.jpg" alt="pendant necklace collection" border="0" class="imageleft" />
<img src="bgj_teaser1.jpg" alt="Beaded Gemstone Jewelry Collection" border="0" class="imageleft" /></p>

My css for each image looks like this:

Code: Select all

.imageleft {
	float: left;
	margin-right: 5px;
	margin-bottom: 10px;
	}

[TwentyFourSeven]

Originally Posted by BGarner

An example site might help us to be a little more specific as to exactly what you want. There are various methods to position your images and an example would be helpful.

Thumbnails are just small versions of your larger image. Most standard imaging programs will allow you to resize an image to a certain percentage of the original size.

I'm pretty sure I didn't word my question right; but I want a simple version of this... http://www.rocawear.com/shop/men.php

notice what happens when you click on the images...

[Lchad]

Clicking on the photos simply opens a brand new html page.

That site was done in tables so it's probably not a good example of how to do things.

[TwentyFourSeven]

Originally Posted by Lchad

Clicking on the photos simply opens a brand new html page.

That site was done in tables so it's probably not a good example of how to do things.

Yeah that site was weak. I didn't even bother to look at the code. I know what I am going to do, I will use your example and do something similiar to the site I posted by just having the pictures open a new page. I'm sorry for posting such an incoherent question. My brain is just on overload these days, between designing my site, my clothing and getting the business side of things in line..my brain is pretty fried right now... Thank you

[JustinStudios]

Ok, being one who has programmed tons of ecommerce sites I would like to reccommend a program to use for your image resizing. I used this program to resize our last client (who had 22,000 images) and they needed 22,000 thumbnails. Without this tool I would have been dead... and best of all its Completely FREE! It's called FastStone Photo Resizer. Just click the name to go to the download page. All you do is set it to resize the images , rename them, or do both! you can even convert them to a new extension all in this one free program. I edited all 22,000 images in a single day with this program, the guy before me it took him 8 months. My boss was very happy to say the least.

[TwentyFourSeven]

Originally Posted by NoobSmith

Ok, being one who has programmed tons of ecommerce sites I would like to reccommend a program to use for your image resizing. I used this program to resize our last client (who had 22,000 images) and they needed 22,000 thumbnails. Without this tool I would have been dead... and best of all its Completely FREE! It's called FastStone Photo Resizer. Just click the name to go to the download page. All you do is set it to resize the images , rename them, or do both! you can even convert them to a new extension all in this one free program. I edited all 22,000 images in a single day with this program, the guy before me it took him 8 months. My boss was very happy to say the least.

Thank you, I like free stuff as I am on a very limited budget. I will download that program and play with it as soon as I get home.