[Skip to main content](#vessel-content) # Different image for thumbnail than product image ## - **[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")** - [![artisanwebandprint's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") - [ Offline](/forum/user/6555-artisanwebandprint) Less More - Posts: 158 - Thank you received: 6 - - 12 years 10 months ago [\#138461](#138461) by [artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") Replied by *[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")* on topic *[Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#138461 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Bonjour Nicolas, I would like to use a cropped image for the menu item "product listing" and then use the full image on the actual product page. We did this before on another site, but now I am working on [ test.artrageus1.com](http://test.artrageus1.com) I reviewed this ticket and found that you edited the code yourself. I'm building this site in Joomla 3.2.1 so I went into show.php for the product and could not find the same php code in this thread. Would you please post an update on which code to change for Joomla! 3.2? Merci Beaucoup, Dawn Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86555 - Thank you received: 14304 - - 12 years 10 months ago [\#138649](#138649) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#138649 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Hi, The product page layout has changed quite a bit since then in HikaShop. Now, you would need to edit the file "show_block_img" and do the modification there. The change there is stil the same as before. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")** - [![artisanwebandprint's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") - [ Offline](/forum/user/6555-artisanwebandprint) Less More - Posts: 158 - Thank you received: 6 - - 12 years 10 months ago [\#138850](#138850) by [artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") Replied by *[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")* on topic *[Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#138850 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Hello Nicolas, I found the show_block_image view and the first part of the code you recommend to change and I changed it; however, I could not find the second line of code. Here is your description from the other thread. In order to remove the first thumbnail in the product page, you have to edit the view via the menu Display->View. The view is: product/show Change: Code: $image = reset($this->element->images); To: Code: reset($this->element->images); $image = next($this->element->images); In order to select the second image as current thumbnail. After that you have to modify the foreach which list all thumbnails Code: if(count($this->element->images)>1){ foreach($this->element->images as $image){ With: Code: if(count($this->element->images)>2){ $thumbs = $this->element->images; array_shift($thumbs); foreach($thumbs as $image){ And I think it will solve your problem. Thanks, Dawn Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86555 - Thank you received: 14304 - - 12 years 10 months ago [\#138864](#138864) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#138864 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* The second piece is still there but the first line is now changed. Instead of Code: if(count($this->element->images)>1){ you now have Code: if (!empty ($this->element->images) && count($this->element->images) > 1) { simply change that line to Code: if (!empty ($this->element->images) && count($this->element->images) > 2) { and the rest is the same. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")** - [![artisanwebandprint's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") - [ Offline](/forum/user/6555-artisanwebandprint) Less More - Posts: 158 - Thank you received: 6 - - 10 years 4 months ago - 10 years 4 months ago [\#245417](#245417) by [artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") Replied by *[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")* on topic *[Re: Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#245417 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* My apologies I had not seen that last comment. Ignore this post that I edited. Last edit: 10 years 4 months ago by [artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")** - [![artisanwebandprint's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") - [ Offline](/forum/user/6555-artisanwebandprint) Less More - Posts: 158 - Thank you received: 6 - - 10 years 3 months ago [\#245577](#245577) by [artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") Replied by *[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")* on topic *[Re: Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#245577 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* I have changed the php code in the product / show_block_image.php file as described in this thread. I have achieved the goal of hiding the thumbnail image on the product page. However the lightbox is not working on products that have only two images total (thumbnail image and main product image). Here is a video that steps you through the issue: [ screencast.com/t/0yHzYdmwzWs](http://screencast.com/t/0yHzYdmwzWs) Here is the final edit to the product / show_block_image.php... Code: <?php /** * @package HikaShop for Joomla! * @version 2.6.3 * @author hikashop.com * @copyright (C) 2010-2016 HIKARI SOFTWARE. All rights reserved. * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html */ defined('_JEXEC') or die('Restricted access'); ?><?php $variant_name = ''; $variant_main = '_main'; $display_mode = ''; if(!empty($this->variant_name)) { $variant_name = $this->variant_name; if(substr($variant_name, 0, 1) != '_') $variant_name = '_' . $variant_name; $variant_main = $variant_name; $display_mode = 'display:none;'; } ?><div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>"> <div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div"> <?php if(!empty ($this->element->images)){ reset($this->element->images); $image = next($this->element->images); } $height = (int)$this->config->get('product_image_y'); $width = (int)$this->config->get('product_image_x'); if(empty($height)) $height = (int)$this->config->get('thumbnail_y'); if(empty($width)) $width = (int)$this->config->get('thumbnail_x'); $divWidth = $width; $divHeight = $height; $this->image->checkSize($divWidth,$divHeight,$image); if (!$this->config->get('thumbnail')) { if(!empty ($this->element->images)){ echo '<img itemprop="image" src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />'; } } else { $style = ''; if (!empty ($this->element->images) && count($this->element->images) > 1) { if (!empty($height)) { $style = ' style="height:' . ($height + 20) . 'px;"'; } } $variant_name=''; if(isset($this->variant_name)){ $variant_name=$this->variant_name; } ?> <div class="hikashop_product_main_image_thumb" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> > <div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image"> <div style="position:relative;text-align:center;clear:both;<?php if(!empty($divWidth)){ echo 'width:'.$divWidth.'px;'; } ?>margin: auto;" class="hikashop_product_main_image_subdiv"> <?php if($this->image->override) { echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" itemprop="image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width, $height); } else { if(empty($this->popup)) $this->popup = hikashop_get('helper.popup'); $image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside')); $img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options); if(@$img->success) { $attr = 'title="'.$this->escape(@$image->file_description).'"'; if (!empty ($this->element->images) && count($this->element->images) > 1) { $attr .= ' onclick="return window.localPage.openImage(\'hikashop_main_image'.$variant_name.'\', \''.$variant_name.'\', event);"'; } $html = '<img id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>'; if(!empty($this->element->badges)) $html .= $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0',false); echo $this->popup->image($html, $img->origin_url, null, $attr); } } ?> </div> </div> </div> <?php if(empty($this->variant_name) && !empty($img->origin_url)) { ?> <meta itemprop="image" content="<?php echo $img->origin_url; ?>"/> <?php } } ?> </div> <div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div"> <?php if (!empty ($this->element->images) && count($this->element->images) > 2) { $firstThunb = true; $thumbs = $this->element->images; array_shift($thumbs); foreach($thumbs as $image){ if($this->image->override) { echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width, $height); } else { if(empty($this->popup)) $this->popup = hikashop_get('helper.popup'); $img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options); if(@$img->success) { $id = null; $classname='hikashop_child_image'; if($firstThunb) { $id = 'hikashop_first_thumbnail'.$variant_name; $firstThunb = false; $classname.=' hikashop_child_image_active'; } $attr = 'title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.str_replace("'","\'",@$image->file_description).'\', \''.str_replace("'","\'",@$image->file_name).'\');"'; $html = '<img class="'.$classname.'" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>'; if(empty($variant_name)) { echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image')); } else { echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image_VARIANT_NAME')); } } } } } ?> </div> </div> <?php if(empty($variant_name)) { ?> <script type="text/javascript"> if(!window.localPage) window.localPage = {}; if(!window.localPage.images) window.localPage.images = {}; window.localPage.changeImage = function(el, id, url, width, height, title, alt) { var d = document, target = d.getElementById(id), w = window, o = window.Oby; if(!target) return false; target.src = url; target.width = width; target.height = height; target.title = title; target.alt = alt; var thumb_img = null, thumbs_div = d.getElementById('hikashop_small_image_div'); if(thumbs_div) { thumbs_img = thumbs_div.getElementsByTagName('img'); if(thumbs_img) { for(var i = thumbs_img.length - 1; i >= 0; i--) { o.removeClass(thumbs_img[i], 'hikashop_child_image_active'); } } } thumb_img = el.getElementsByTagName('img'); if(thumb_img) { for(var i = thumbs_img.length - 1; i >= 0; i--) { o.addClass(thumbs_img[i], 'hikashop_child_image_active'); } } window.localPage.images[id] = el; return false; }; window.localPage.openImage = function(id, variant_name, e) { if(!variant_name) variant_name = ''; if(!window.localPage.images[id]) window.localPage.images[id] = document.getElementById('hikashop_first_thumbnail' + variant_name); e = e || window.event; e.stopPropagation(); e.cancelBubble = true; window.Oby.cancelEvent(e); window.localPage.images[id].click(); return false; }; </script> <?php } Am I missing something in the code? Thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86555 - Thank you received: 14304 - - 10 years 3 months ago [\#245592](#245592) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#245592 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Hi, Could you provide a link to the page with the products listing so that we could analyse the situation ? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")** - [![artisanwebandprint's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") - [ Offline](/forum/user/6555-artisanwebandprint) Less More - Posts: 158 - Thank you received: 6 - - 10 years 3 months ago [\#245665](#245665) by [artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") Replied by *[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")* on topic *[Re: Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#245665 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Sure, I've PM you with the login as we're in development. Best, Dawn Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26400 - Thank you received: 4079 - - [](http://obsi.dev) - 10 years 3 months ago [\#245721](#245721) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Re: Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#245721 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Hi, Your lightbox can't work because you do not have any thumbnail in the page. So the javascript which is looking for the corresponding thumbnail to launch the gallery (lightbox) cannot find any image to click on. You can take a look at the JS function "window.localPage.openImage" and also the function "window.localPage.changeImage" to see on what content the current system is working. If you remove the first thumbnail in your page ; you will also need to rewrite how the main image is added (to not use "openImage" and let the classical image popup) Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")** - [![artisanwebandprint's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") - [ Offline](/forum/user/6555-artisanwebandprint) Less More - Posts: 158 - Thank you received: 6 - - 10 years 3 months ago [\#245935](#245935) by [artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile") Replied by *[artisanwebandprint](/forum/user/6555-artisanwebandprint "View artisanwebandprint's Profile")* on topic *[Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#245935 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Hello, The idea is to show square images in the product listing. So we make a square image of the main product and then we upload also the regular photograph of the entire product. I am only trying to now show the first or default image in the product view which is working. What you are saying doesn't make sense because I am not trying to turn off the thumbnails, just pass over the first image which is redundant. Why is there not a thumbnail for the second image which is now showing up as the only image? In any case, please provide me with the code and steps for getting the lightbox to work with the current setup. As a side note, it would be a nice feature to be able to auto crop images to square in the product listing view without having to do all of these workarounds. Warm Regards, Dawn Dawn Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86555 - Thank you received: 14304 - - 10 years 3 months ago [\#245964](#245964) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Different image for thumbnail than product image](/forum/4-how-to/15893-different-image-for-thumbnail-than-product-image?start=20#245964 "I really need to be able to have a different image for the thumbnail of a product when viewing the product listing, to the image you see when you go into product detail. Ill explain. On the product listing I want to use a cropped in version of the image for design reasons, but once you are in the product I want to show the full, uncropped image. Now I can almost achieve this by uploading 2 images for each product, ensuring I upload the cropped thumbnail first, then this is used by default as the listing image, but really, once in the product itself I only want to show the larger uncropped image. I could use some jquery to remove the first thumbail in the mini previews, but the main shot would still be on the cropped thumbnail. Any ideas ? Thanks")* Hi, If it's only to get square images (cropped images) on listings then all that is not necessary. I didn't understand that it was what you were trying to do. HikaShop already has an auto crop feature for thumbnails. Go in the HikaShop configuration, under the images section, and activate the "force image size" setting and set the "Image scale mode" to "crop" and it will crop the images automatically to fit the dimensions that you specify. And if you don't want to crop the images on the product page, just edit the file "show_block_img" via the menu Display>Views and change the line: $image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside')); to: $image_options = array('default' => true,'forcesize'=>false,'scale'=>$this->config->get('image_scale_mode','inside')); That way, it will greatly simplify the managing of your product images, and you won't have to rewrite the whole javascript which handles the image display on the product page. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzE1ODkzLWRpZmZlcmVudC1pbWFnZS1mb3ItdGh1bWJuYWlsLXRoYW4tcHJvZHVjdC1pbWFnZT9zdGFydD0yMCZ0bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.079 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)