Page 1 of 1

[vQmod] Main Product Image in Thumbnail List

Posted: Wed Nov 30, 2011 11:38 pm
by Ampeter
I was trying to do just what the title says when I found that TheMasterBrewer did it a month ago.


I made that quick mod into a vQmod in case anyone wants to try it. It's very useful if for example you want to write a javascript to make the additional images replace the main product image when you click them (you'd also have to edit the "rel" attribute if you want to use fancybox gallery functionality and not repeat the main image twice).

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<modification>
	<id>Include main product image in thumbnail list</id>
	<version>1.0.0</version>
	<vqmver>2.1.5</vqmver>
	<author>Ampeter</author>
	
	<!--Modification by TheMasterBrewer: http://forum.opencart.com/viewtopic.php?f=21&t=44275-->
	<file name="catalog/controller/product/product.php">
		<operation>
			<search position="before"><![CDATA[
				$this->data['images'] = array();
				]]></search>
			<add><![CDATA[
			if ($product_info['image']) {
			   $this->data['mainthumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'));
			} else {
			   $this->data['mainthumb'] = '';
			}			
			]]></add>
		</operation>
	</file>
	<!--Change "default" in the path for your template folder name if you are using a custom template-->
	<file name="catalog/view/theme/default/template/product/product.tpl">
		<operation>
			<search position="after" offset="3"><![CDATA[
				<div class="image-additional">
				]]></search>
			<add><![CDATA[
	  <a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $mainthumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>		
			]]></add>
		</operation>
	</file>
	
</modification>

PS: tested in 1.5.1.3

Re: [vQmod] Main Product Image in Thumbnail List

Posted: Fri Dec 09, 2011 12:29 am
by TheMasterBrewer
Great job! :)

Re: [vQmod] Main Product Image in Thumbnail List

Posted: Sun Jan 08, 2012 1:42 am
by EyeWear Lashes Co.
Thank you! =)

Re: [vQmod] Main Product Image in Thumbnail List

Posted: Sun Feb 05, 2012 10:02 am
by Ampeter
I've been asked by PM how to do the replace product image with additional image thingy... well, the easiest way is downloading this javascript by Qphoria and following the readme inside. It's really simple, and it works! :D

Re: [vQmod] Main Product Image in Thumbnail List

Posted: Thu Sep 04, 2014 7:27 pm
by elenichee
Hello -

I know this has been a while ago, but does anyone have any idea how to make this work on OC 1.5.6? I tried it and it doesn't seem to work. :(

Re: [vQmod] Main Product Image in Thumbnail List

Posted: Mon Sep 29, 2014 8:18 pm
by bigFeet
Anyone know is this works still? I really want to have the main product image to show up as a thumbnail, otherwise you can never return to look at it (if you click an alternative product image).

Re: [vQmod] Main Product Image in Thumbnail List

Posted: Wed Oct 01, 2014 8:24 pm
by bigFeet
IMPORTANT

Don't download the one he has linked to - it's missing the last few lines of code. Instead, copy and paste the code in post #1 in to your own XML file :)

Re: [vQmod] Main Product Image in Thumbnail List

Posted: Tue Nov 03, 2015 5:05 am
by mkp007
This mod works for me.
However, if you are using colorbox, then the code should be as given below. One problem with this is 1.5.6 already has the main product image available to colorbox but for some reason there was no thumbnail. Now that we add the main product image using this mod, there is now one thumb nail but two main product photos in the colorbox cycle.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<modification>
   <id>Include main product image in thumbnail list</id>
   <version>1.0.0</version>
   <vqmver>2.1.5</vqmver>
   <author>Ampeter</author>
   <file name="catalog/controller/product/product.php">
      <operation>
         <search position="before"><![CDATA[
            $this->data['images'] = array();
            ]]></search>
         <add><![CDATA[
         if ($product_info['image']) {
            $this->data['mainthumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_additional_width'), $this->config->get('config_image_additional_height'));
         } else {
            $this->data['mainthumb'] = '';
         }         
         ]]></add>
      </operation>
   </file>
   <!--Change "default" in the path for your template folder name if you are using a custom template-->
   <file name="catalog/view/theme/default/template/product/product.tpl">
      <operation>
         <search position="after" offset="3"><![CDATA[
            <div class="image-additional">
            ]]></search>
         <add><![CDATA[
     <a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox cboxElement"><img src="<?php echo $mainthumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>      
         ]]></add>
      </operation>
   </file>
   
</modification>