[Solved] Hide Main Product Image on Product Info Page

[JasonF]

Hi,

I own a few sites selling t-shirts, I'm currently developing a theme for a new site and then will most likely port my old sites over to OpenCart in the future, if everything goes to plan.

I am having trouble replicating one of the functions of my existing cart script, namely that the main product image that I'm using as a thumbnail in the category pages/latest products modules is also the main product image shown on the product info pages, which I do not want.

Is it possible to alter the product.tpl page so that the image grid only shows images provided in the: "Catalog > Products > Image" section, and not the one in the "Catalog > Products > Data" section?

I was able to achieve it my removing the

Code: Select all

<?php if ($thumb) { ?>

section of the code, but it did not give the desired effect, since there was no longer a large product image there.

In case what I'm wanting to achieve isn't clear, here's some pictures of what I want:




And here's the current set up with OpenCart:



I'm using OpenCart v1.5.1.2 if that matters. Thanks in advance for any help.

Jason

[JasonF]

Anyone got an ideas?

I would like to make sure the basics of what I'm looking for are doable before I spend too long working on the design or purchase any extensions.

Thanks,

Jason

[uksitebuilder]

Took some thinking about but try the following:

edit: catalog/controller/product/product.php

find

Code: Select all

         $this->load->model('tool/image');

         if ($product_info['image']) {
            $this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
         } else {
            $this->data['popup'] = '';
         }
         
         if ($product_info['image']) {
            $this->data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
         } else {
            $this->data['thumb'] = '';
         }
         
         $this->data['images'] = array();
         
         $results = $this->model_catalog_product->getProductImages($this->request->get['product_id']);
         
         foreach ($results as $result) {
            $this->data['images'][] = array(
               'popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
               'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))
            );
         }   


change to

Code: Select all

         $this->load->model('tool/image');

         $results = $this->model_catalog_product->getProductImages($this->request->get['product_id']);

         if(count($results)==0){
            if ($product_info['image']) {
               $this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
            } else {
               $this->data['popup'] = '';
            }
            
            if ($product_info['image']) {
               $this->data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
            } else {
               $this->data['thumb'] = '';
            }
         }else{
            
            $this->data['images'] = array();
            $im = 0;
            foreach ($results as $result) {
               $im++;
               if($im>1){
                  $this->data['images'][] = array(
                     'popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
                     'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'))
                  );
               }else{
                  $this->data['popup'] = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
                  $this->data['thumb'] = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
               }
            }   
            
         }


[JasonF]

Thanks, that seems to have worked a treat

[uksitebuilder]

Good good, I added a fallback just in case you don't add any additional images, it should show the main image.

One thing I omitted was to put the main image back in to the additional images.

Let me know if you want that adding so it appears as a thumbnail on the product page

[JasonF]

No, that's not necessary, thank you anyway.

Thanks again fro your help with this.

[okmarket]

Hi Simon,

Regarding hide main product image on product info page, i had already change the code as per your instruction, however it's still show it, pls see att'd screenshot, and pls give me a hand for solve it.

thank you.

[uksitebuilder]

No screenshot attached

What OC version are you using ?

[dealstation]

I've also changed fitted see no difference
i use opencart 1.5.1.1

see screenshot pls

i want have like this.

https://skydrive.live.com/?cid=3491c8a4 ... 96CD%21114

https://skydrive.live.com/?cid=3491c8a4 ... 96CD%21115

thnx

[okmarket]

Hi Simon,

opencart v151

Sorry for late reply.

pls see att'd screenshot, and pls help it.

good day.

[DKeff]

Thanks uksitebuilder,

This helped alot!

- Dave

[remcofaasse]

Hi uksitebuilder,
I have replaced the code, but I receive the following error on the site:

Notice: Undefined variable: images
/shop/catalog/view/theme/default/template/product/product.tpl on line 15

Can you help me with this? Thanks.

[uksitebuilder]

Hi guys, sorry for the delay

The code I put above should work fine with OC 1.5.1.1 and 1.5.1.2

If it's not working, not sure what to say other than restore the default file and retry the edit again.

It definitely works.

[remcofaasse]

hi uksitebuilder,
Is it possible that v 1.5.1.3 gives above mentioned problem?
Thanks again for reply.

[uksitebuilder]

Just tested on 1.5.1.3 and it works

here is a vqmod if it helps

[remcofaasse]

Just tested on 1.5.1.3 and it works

here is a vqmod if it helps

Thanks uksitebuilder. For installation: I just drop the file in the vqmod/xml folder?
Just to make sure. And do I need to make sure that the same image files are in folders: /image and /data?

[uksitebuilder]

Hi,

Yes, drop it in the xml folder

It uses the main image from the product for the category picture

The main product page uses the images uploaded to the additional images tab in the edit product screen.

[remcofaasse]

Thanks uksitebuilder!
It works fantastic!

[jcmathis]

How does it choose the alternate image to be the new default image on the product page?
Alphabetically?

[uksitebuilder]

It uses OC's own code, so the image that would normally be the first thumb image is promoted to the main product image.