Re-arange Additional Images

[clint6998]

I have moved some things around in tpl_product_info_display.php to make things look a little unigue. What I would like to do is have the additional images float left under the main product image.

Here is what I have now (added a border for easy viewing):


I would like the images stacked on top of each other with the text wrapping around the images. (ie. jsut like it did before I modified it how it wrapped around the main product image.)

When I look at the source code, it gives each td tag a width of 33%. How to I change this so that it only has 1 td tag and has no defined width without effecting other images like that (home page new products, featured products, etc).

Any help would be great.

Thanks,

Clint

[clint6998]

Resolved

Its funny how I can never figure something out until AFTER I have posted on a forum...

How to:

Admin Panel>configuration>images>Product Info - Number of Additional Images per Row = change to 1

Copy from template_default/templates these two files into YOUR_THEME/templates:
tpl_modules_main_product_image.php
tpl_product_info_display.php

open all three in your text editor

In tpl_product_info_display.php

find - around line 157:

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

copy it and then comment it out like so:

<!--bof Additional Product Images ******** moved to templates/YOUR_TEMPLATE/template/tpl_modules_main_product_image.php *******-->
<?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 -->

Go to the tpl_modules_main_product_image.php that you opened:

at the end of the page you will find this:

</noscript>
</div>

paste the copied code in between those two lines so it will look like this:

</noscript>
<!--bof Additional Product Images -->
<br class="clearBoth" />
<?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 -->  
</div>

add this style to your style sheet:

#productMainImage {
	float:left;
}

If you dont want your text floating around the image, just dont put the style there.

You should be all done. Make sure to test these files on your own template and do not overwrite the default template.

Clint

[guido49]

A HUGE 'thank you' to you, clint6998 !!

I've been attempting to do this for about 2 weeks now.

Thanks for the detailed instructions...worked perfectly!