Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Multiple product image layout control

Multiple product image layout control

Views: 1,008

Results 1 to 8 of 8
15 Nov 2011, 2:50 AM
#1
michaelchu avatar

michaelchu

Zen Follower

Join Date:
Nov 2011
Posts:
121
Plugin Contributions:
0

Multiple product image layout control

Here is a link to my site:http://www.waterbabiesbikini.com/_cart/index.php?main_page=product_info&cPath=66&products_id=180

For the life of me I can't get the additional images to line up next to the primary product image, I figure it's in one of the CSS files but can't find it yet. Any help or suggestions would be greatly appreciated, TIA.

15 Nov 2011, 11:28 AM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Multiple product image layout control

I'm not seeing any images on that page.

15 Nov 2011, 12:11 PM
#3
fairestcape avatar

fairestcape

Totally Zenned

Join Date:
Mar 2008
Location:
Cape Town & London (depends on the season)
Posts:
2,957
Plugin Contributions:
0

Re: Multiple product image layout control

The ORDER in which the various elements appear on the product info screen are controlled by a combination of structures in tpl_product_info_display.php and your CSS. Also, there are settings in your admin console that goivern the number of additional images to display in a line.

The first thing to do is put an OVER-RIDE tpl_product_info_display.php file into your CUSTOM template folder.

Basically, this means you COPY the default file:

includes/templates/template_default/templates/tpl_product_info_display.php

to:

includes/templates/YOUR-CUSTOM-TEMPLATE/templates/tpl_product_info_display.php

Then, you make edits to the copied file. You never alter the CORE (default) file.

You should edit the copied file by sending it ftp to your hard drive, then opening it with a PLAIN TEXT EDITOR such as Crimson Editor.

In that file, you will see the various components neatly delimited by:

<!---BOF xxxxxx -->

(Some PHP here)

<!---EOF xxxxxx -->

Their POSITION, relative to each other, determines the ORDER in which they appear on the product info screen.

So you need to CUT and PASTE the section that relates to the additional images. You CUT it from where it is currently located in the code file, and you place it before or after another section.

15 Nov 2011, 2:12 PM
#4
michaelchu avatar

michaelchu

Zen Follower

Join Date:
Nov 2011
Posts:
121
Plugin Contributions:
0

Re: Multiple product image layout control

stevesh:

I'm not seeing any images on that page.

I apologize, I was setting up IH3 last night and forgot to reload the image. It is fixed and viewable.

fairestcape, I did move the code block as you suggested (the additional image was moved up from the bottom of the page to just below the main image). I'm just wondering if there is a way to move the image I have, next to the default image.

Thank you for responding.

15 Nov 2011, 2:38 PM
#5
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Multiple product image layout control

Try adding this to your stylesheet:

#productAdditionalImages {float: left;}

3 Dec 2011, 4:31 PM
#7
polik avatar

polik

New Zenner

Join Date:
Oct 2010
Location:
Meath, Ireland
Posts:
25
Plugin Contributions:
0

Re: Multiple product image layout control

Sorry forget to mention what I want.

I would like to have additional images below main one, not on right side.

Thanks

3 Dec 2011, 4:50 PM
#8
polik avatar

polik

New Zenner

Join Date:
Oct 2010
Location:
Meath, Ireland
Posts:
25
Plugin Contributions:
0

Re: Multiple product image layout control

Job done...

just added

#productAdditionalImages {clear: both;}

into stylesheet_main.css

thanks