Additional Images on Product Listing Page

[sundoggin]

I have searched the forums extensively and have tried numerous options and am at a total loss. Please let me know if this listing should be placed elsewhere - I thought this was the best place for this question.

I am building a clothing store for a client. Many of the items have an additional image such as an image of a back of a shirt for instance. I am trying to figure out how to show the additional image to the right of the product main image on the product listing page. I have tried modifying code on tpl_modules_product_listing.php, tpl_modules_main_product_image.php, additional_images.php, tpl_modules_additional_images.php, and product_listing.php and I am having no luck on locating the code where I can make this happen.

Can anyone tell me how to accomplish this? It seems like it should be a simple copy of code if I can only just find where to paste it.

[tony_sar]

you can look at tpl_product_info_display.php .. there you can move the code block that calls tpl_modules_additional_images.php to any location you want.

[sundoggin]

you can look at tpl_product_info_display.php .. there you can move the code block that calls tpl_modules_additional_images.php to any location you want.

Tony, I have tried placing the following code from tpl_product_info_display.php ...

require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?> 

...in several places within the tpl_modules_product_listing.php page to no avail. Where would I put this code to get the available additional image to display to the right of the main image on the product listing page?

[tony_sar]

you might want to move it , under Product Price ?? . however, once there , you need to use CSS to position additional images if they are not already aligned correctly . this is easier then using CSS to position where you want those images from default location.

once you moved the code , supply us with link to your site , so we might be able to help out with CSS .

[tony_sar]

Tony, I have tried placing the following code from tpl_product_info_display.php ...

require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?> 

...in several places within the tpl_modules_product_listing.php page to no avail. Where would I put this code to get the available additional image to display to the right of the main image on the product listing page?

you have to modify tpl_product_info_display.php and NOT tpl_product_listing.php ..

[sundoggin]

you have to modify tpl_product_info_display.php and NOT tpl_product_listing.php ..

I have modified tpl_product_info_display.php. This only affects the main product page layout. I need the additional image to show up next to the main image on the category/product listing page (index.php?main_page=index&cPath=#_#)

[tony_sar]

ok , i misunderstood. if you can get additional images showing in product listing , then you need to use CSS to position them correctly .

[2000pesos]

Hey, i know this isn't exactly the solution to your problem, but I spent most of the day trying to get the product listing image to popup the additional images, as it does on the product info page.
It's not the exact solution your looking for but the code might help you figure it out. I'm also working on a clothing store, so maybe if you just want to adopt this it's fine.

In tpl_modules_products_all_listing.php

if (PRODUCT_ALL_LIST_IMAGE != '0') {
        if ($products_all->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) {
          $display_products_image = str_repeat('<br clear="all" />', substr(PRODUCT_ALL_LIST_IMAGE, 3, 1));
        } else {
          $display_products_image = '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $products_all->fields['products_id']) . '" target="_blank">' . '<div style="height:179px;width:170px;background-image:url(/zentemplates/images/bg2.png) ;background-position:center center;">' . '<div style="height:150px;width:150px;padding-top:19px;">' . zen_image(DIR_WS_IMAGES . $products_all->fields['products_image'], $products_all->fields['products_name'], IMAGE_PRODUCT_ALL_LISTING_WIDTH, IMAGE_PRODUCT_ALL_LISTING_HEIGHT) . '</div>' . '</div>'. '</a>' .  str_repeat('<br clear="all" />', substr(PRODUCT_ALL_LIST_IMAGE, 3, 1));
        }
      } else {
        $display_products_image = '';
      } 

and if you want it to work with a lightbox

if (PRODUCT_ALL_LIST_IMAGE != '0') {
        if ($products_all->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) {
          $display_products_image = str_repeat('<br clear="all" />', substr(PRODUCT_ALL_LIST_IMAGE, 3, 1));
        } else {
        $display_products_image = '<a href="' . zen_lightbox(DIR_WS_IMAGES . $products_all->fields['products_image'], $products_all->fields['products_name'] , LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '">' . '<div style="height:179px;width:170px;background-image:url(/zentemplates/images/bg2.png) ;background-position:center center;">' . '<div style="height:150px;width:150px;padding-top:19px;">' . zen_image(DIR_WS_IMAGES . $products_all->fields['products_image'], $products_all->fields['products_name'], IMAGE_PRODUCT_ALL_LISTING_WIDTH, IMAGE_PRODUCT_ALL_LISTING_HEIGHT) . '</div>' . '</div>'. '</a>' .  str_repeat('<br clear="all" />', substr(PRODUCT_ALL_LIST_IMAGE, 3, 1));
        }
      } else {
        $display_products_image = '';
      }