How to move additional images to the right of main product image

I'm trying to show two additional images (small) to the right of my main product image (large) on the product info page.

I've spent hours messing around with the tpl_product_info_display file because I'm convinced this is the way to do it but so far without succes. Somehow the additional images keep showing up on 'the next line' even though the code for the additional images is right below the main image code now.

I can't find a break in the code that makes my additional images showing below the main image. There must be something in the require-statement behavior that I'm not aware of since I'm not very familiar with PHP.

Thried searching the forum but have not come up with anything usefull. Anyone out there who can tell me what I'm missing or knows about a earlier thread I can have a look at?

I have not done what you are seeking but can only offer this:

Looking at the calls for additional images in the file you ref'ed; there begins a trail with:
require($template->get_template_dir('/tpl_modules_additional_images.php'
require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE

and looking there the references are:
require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

and so the journey begins; there is probably a br or clear both that is forcing the next line issue somewhere.

In the following file :

tpl_product_info_display.php

You need to move

... coding bla bla...

to underneath the box <!--eof Main Product Image-->

And then upload these amended files into your ../custom/templates

Thanks for the reactions.

Already have moved the 'Additional Product Images code' to the 'Main Product Image' code but the additional images keep showing 'on the next line' directly underneath the main image.

Looks like lines of code which there own <?php and ?> tags are wrapped (LF) by default. I've joined both requires within a single <?php and ?> tag but still working on a way to show the main image aligned left and two additional (smaller) images on the right underneath each other.

look for and remove a clear both that is between the areas that you are adjusting

The box #productAdditionalImages seem to have embbed "style width"

In module additional_images.php, look for the line
'style="width:' . $col_width . '%;"' and then empty it to '' (remove "style=width...")

In the stylesheet, make sure you set #productMainImage to float left. So that #productAdditionalImages can go right. Don't forget to set "clear:both" for each additional image boxes.

This work for me.

I get the feeling that this is exactly what I'm looking for. But where does this "clear:both" for each additional image boxes go?

I think this should fix your problem.
#productAdditionalImages .additionalImages {clear:both;}

I'm using ZC1.3.0.2 and can't find a '#productAdditionalImages .additionalImages' defined in the CSS stylesheets. There is a .additionalImages in the stylesheet_new.css but it's grouped with a number of other styles.

Do I create a new entry for #productAdditionalImages .additionalImages and remove .additionalImages from the group within the stylesheet_new or am I looking in the wrong place?

I think .additionalImages inside the group does nothing apart from alining text to 'center', you shouldn't worry about it. just create new style for it.

Here is my style :

#productMainImage {margin:5px 0; padding:0; width:70%;float:left;}
#productAdditionalImages {margin:0; padding:5px 0; width:120px; }
#productAdditionalImages .additionalImages {clear:both;}
#productAdditionalImages a {text-decoration:none;}

Almost there. But the clearBoth tag also makes the first additional image wrap to the next line (under the main image again).

When the clearBoth is removed three images (main mage and two additional images) show on the same line. That's great but now the I still have to force the second additional image to wrap underneath the first additional image.

This is what is defined in the CSS right now:

#productMainImage {float:left;}

#productAdditionalImages .additionalImages {clear:both;}

There is more than one way to approach this issue and you began this thread by referencing php files.... and in the tpl_product_info_display.php file there is this code:

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

and it is placed after many things that display before it. Moving it up after the main image entry was what I was leading to. and there are a few clear both statements in this file that call for a new line. You will have to insure that the additional images have space to be presented. Do this through sizing of your site and images no matter if you do this by code file or through css.

As you seem close now you might continue with what you are doing or you might also look at the file??

OK, finally figured out how to make it work. As always the solution seems pretty straight forward in retrospect but it made me spin for a while.

Just in case someone else is looking for a way to do this I'll leave some pointers. Pointers that are actually a combination of pointers given to me in this thread.
Thanks for this guys and for your patience.

• First of all the Additional Product Images code within modules/tpl_productinfo_display right underneath the Main Product Image code.

• Remove the clear both between them.

In my case the images were still wrapping and this is where I got confused.

For this 'wrapping' to disappear I had to do the following. Depending on the sizes defined for your images in the Admin there are two things left to be changed.

• Get your main image to align left by adding

#productMainImage {float:left;}

to your css-file.

• Secondly, edit your 'style="width:' within the modules/additional_images.php. I did that by not actually remove the 'style="width:' code but by substracting a small amount from the column width; in my case

'$col_width = floor(100/IMAGES_AUTO_ADDED - 3);'

did the trick.

So size your images as desired and play around with your 'style="width:' until you get what you want.

I'm obviously not much of a coder so maybe it isn't a very subtile way of doing this. I also haven't tested it in other browsers then Firefox. So be aware.