Moving extra product images

I want to move the extra product images from the bottom of the product info. page to just under the main product image. Is this possible, and if so could someone help me out?

Here is a link to a product info. page from my site:
http://www.lhalsportscards.com/index.php?main_page=product_info&cPath=65_66&products_id=180&zenid=9ometvo4ll65p4opqh2eu1ehu4

Any help is appreciated.

Regards,

Les McDonald

You'll want to edit your: includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php

I suggest putting the images in a div like this:

<div id="productImageGroup">
<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<!--eof Main Product Image-->

<!--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 -->
</div> <!-- eof productImageGroup div -->

you can look for this code around line 140

This should be compatible with your current template too.
Hope that helps,

Don't forget to add productImageGroup to your stylesheet.

I would also like to group my extra images directly under the main image, so I will by trying this solution. However, you also said "Don't forget to add productImageGroup to your stylesheet." How do I do dat? I am guessing you are talking about includes/templates/MyTemplate/css/stylesheet.css, but what and where should the code go?

Thanks,
Phil

Phil Soth:

I would also like to group my extra images directly under the main image, so I will by trying this solution. However, you also said "Don't forget to add productImageGroup to your stylesheet." How do I do dat? I am guessing you are talking about includes/templates/MyTemplate/css/stylesheet.css, but what and where should the code go?

Thanks,
Phil
yes in this file :
includes/templates/MyTemplate/css/stylesheet.css
try this:
#productImageGroup {
width: 50%;
}
Hope that helps :)

Yes! This will work!

That's the good news...the lesser good news is that now I need to know what to do to arrange the multiple images consistently. Please go to my site - https://www.heirloomstocherish.com - then go to Gift Sets, and select the first one. (You can also use this address to get there quicker - http://0003nu2.rcomhost.com/index.php?main_page=product_info&cPath=94&products_id=214) As you can see, the pictures are indeed above the description, right where I want them, but the rows are inconsistent.

Is there a way to fix it so there are 4 images per row?

Thanks for the help so far!
Phil

Just thought I would let you know that I am still interested in a .php solution to the above-mentioned image location problem, and while the solution suggested by Trinity14 goes part of the way, it doesn't completely do what I need. I have restored by old tpl_product_info_display.php code and have developed an html workaround (http://0003nu2.rcomhost.com/index.php?main_page=product_info&cPath=264&products_id=3580) to use in the meantime. My workaround is a bit more clunky than ZC-friendly code, but it gives me the visual result I was looking for (although the Large image isn't as seamless as the standard ZC code).

Like I say, I would still be interested in a more elegant solution.

Thanks for the help!
Phil

The php solution is to move the code in the php file building the page html like this:

then wrap them in containers of your choice:

then control the look with CSS however you'd like:

/*CSS stylesheet.css */
#mainProductImage_container {
your styles here
}

#additionalProductImage_container {
your styles here
}

Recap, PHP builds inline HTML structure, HTML displays content in top down order, CSS makes HTML pretty :)