Additional images - how to place / move them as wished?

I'm using Zencart version 1.3.9b

I did change the order on my product page using the FAQ but I have a few issues.

1. Additional images
   Here:
   http://www.petitplat.fr/zencart/index.php?main_page=product_info&cPath=70_83&products_id=214

The additional images show up as a column, and I'd like to have them in a grid way.

Which weirdly is the case here:
http://www.petitplat.fr/zencart/index.php?main_page=product_info&cPath=70_76&products_id=251

But if possible with less "space" between the pictures.
Ideal would be a grid of 6 pictures (3 columns, 2 rows)

2. Add to Cart button emplacement

When I have attributes, it looks good:
http://www.petitplat.fr/zencart/index.php?main_page=product_info&cPath=70_76&products_id=251

But when I don't, the add to cart button is beneath the "review" and "tell a friend". which is a little odd:
http://www.petitplat.fr/zencart/index.php?main_page=product_info&cPath=70_76&products_id=247

(if it's too complicated I can indeed add a text attribute which will solve the problem)

Thanks in advance!

One thing I notice is look at the size of the images...> The one you like: 650px × 606px (scaled to 215px × 200px)

One that is messed up.. 650px × 486px (scaled to 267px × 200px)

haredo:

One thing I notice is look at the size of the images...

So the reason would be that the image is too large? It would just work fine with a square image? (just making sure I understood you right. English is not my language)

I use Firefox with a add on called Firebug which allow me to dig into the html and view images and make changes to images, classes and Id's..

When i change your image to scaled to 215px × 200px), yes, now i get 2 additional images to the right of the picture, but the 4th and 5th image wraps under the main image... Not good...

Oh weird.

I always see 2 images on the right and the rest just under the main image.

Except here http://www.petitplat.fr/zencart/index.php?main_page=product_info&cPath=70_76&products_id=251
where the 3 images are on the right of the main image.

And I use firefox as well (latest version)

Use firebug and duplicate this on the left pane..

<div id="productMainImage" class="centeredContent back"><img role="presentation" class="twisty "><script type="text/javascript" language="javascript">

<img role="presentation" class="twisty "><a title="Monochrome - Post Earrings" rel="lightbox-g" href="images/bijoux_bo/BO_Donuts_St_RainbowMonochrome.jpg">
<img height="200" width="267" title=" Monochrome - Post Earrings " alt="Monochrome - Post Earrings" src="images/bijoux_bo/BO_Donuts_St_RainbowMonochrome.jpg">

<br>

<span class="imgLink">larger image</span>

</a>

change the 267 to 215, and you will see what i see..

Do you like this view...

Highlight this in your left pane after you inspect element:

1. right mouse click and select edit HTML
2. go to the end and hit enter..
3. add this to the bottom of it:
4. <br class="clearBoth">
5. Should look like this now.. and notice the page above.

I just installed firebug (and it's great, thanks!)
And I see 3 images next to the main image and the 2 others are just under.

So no I don't like it that way.

I need to go now but I'll try with different image sizes if it works better.

Ok so what I did was change the max width of the picture to 230.
And restraint myself to 3 pictures per item.
That way I have the main picture and the 3 additional pictures next to it.
Thanks haredo for helping me through this :)

BUT if someone knows how to put a 4th picture, or ideally 6 pictures next to the main picture, I'd be grateful :)

The width of the additional image container is set as a percentage of the center column width according to how many you have specified per row, or how many you have, whichever is less.
Since they are up next to the main image, there can never be enough room to display them all as intended (the % width does not allow for the main image taking some of it).

What you need to do is explicitly override that width using !important in your stylesheet. Add a rule like

.additionalImages {
	width: 20% !important;
	width: 120px !important;
}
```You can use either of these specification methods, adjusted as desired to fit the images. Set the number per row to what you want.

Wonderful!!

thank you SO much, it's perfect now :)

Since the last CSS change was so helpful, I was wondering if it's possible to have 2 rows.

Right now I have 1 row of 3 pictures and the rest goes under the main image.

I tried to google it, but I don't know how (and if it's possible) to have 2 rows of 3 additional pictures.

If your images are all the same height, so they won't catch on each other as they float left, you could either set the number per row to 6 (assuming 3 will always fit per row as your layout is now) and just let the last 3 slide under the first 3; or you could leave the setting as is and add a stylesheet rule like

#productAdditionalImages .clearBoth {display: none;}

gjh42:

you could either set the number per row to 6 (assuming 3 will always fit per row as your layout is now)

I searched additionalImages in the CSS sheet and didn't found anything about rows. I tried to google it, but then again, I didn't find anything suitable.
So I'd love to follow your advice but I have no clue how.

gjh42:

#productAdditionalImages .clearBoth {display: none;}

I tried but it doesn't change anything.

Thanks for the effort you put in trying to help stupid me :frusty:

admin panel/ configuration/ images/ **Product Info - Number of Additional Images per Row

This messes up the layout in firefox..
** Originally Posted by gjh42
#productAdditionalImages .clearBoth {display: none;}

Aaaah! And I was searching like crazy in the CSS sheet :)

Ok now it's changed and working perfectly.

Thank you all a lot for the time you took to help me, it saved me a lot of time!

Awe, Give the credit to Glenn who teaches me with every thread I read from him...

Boy that is one nice looking site...

Only one thing on the attributes values under Please Select:
Earring 1 A
B
C

I have to look all the way up to see the color...
Why not this..

Earring 1 A (Pink)
B (Green)

haredo:

Awe, Give the credit to Glenn who teaches me with every thread I read from him...

Boy that is one nice looking site...

Only one thing on the attributes values under Please Select:
Earring 1 A
B
C

I have to look all the way up to see the color...
Why not this..

Earring 1 A (Pink)
B (Green)

yes I probably should change that.
But that would need A LOT more attributes, the a, b, c... was just easier to set up.
When I get a little more time, I'll do it :)

Oo, so the a, b, c, etc. refer to different colors for different products? That may mean fewer option values to set up, but it sounds like a headache forever keeping track of which letter means which color for which product in the order confirmation e-mails...

gjh42:

Oo, so the a, b, c, etc. refer to different colors for different products? That may mean fewer option values to set up, but it sounds like a headache forever keeping track of which letter means which color for which product in the order confirmation e-mails...

Not really, since I don't have many custom items yet.
And I don't only use the a, b, c set up.
I usually just look at the picture on my computer to see how the item looks like, to make it again.

But I'll change it as soon as I moved :)