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

[kobra]

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??

[davale]

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.