Different image for thumbnail than product image

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

Really, really grateful.

Worked a treat, though I decided to remove all the mini thumbs in the end as it made no sense to have just one.


Brilliant, thanks.

Slight hitch...

As I have some variants, when one selects a different variant the image and thumbnails pop back to the default, ie first thumbnail visible and id="hikashop_small_image_div" showing all thumbs.

thanks

That didnt work for me, just displayed nothing for the variants.

But I did just repeat the code from the primary product you gave me into the variants area and that worked.

Thanks

I modified the product/show file of my hikashop website, but I have a display issue with the main image on product pages.
The main image on the products page is not showing up. Could you please explain where I made an error.


I have made the following edits:

<div id="hikashop_main_image_div" class="hikashop_main_image_div">
<?php
if(!empty($this->element->images)){
reset($this->element->images);
$image = next($this);
if(!$this->config->get('images')){
echo '<img 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{
$height = $this->config->get('images_y');
$style='';
if(count($this->element->images)>1){
if(!empty($height)){
$style=' style="height:'.($height+5).'px;"';
}
} ?>
<div class="hikashop_product_main_image_thumb" id="hikashop_main_image_thumb_div">
<?php echo $this->image->display($image->file_path,true,$image->file_name,'id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"'); ?>
</div>
<?php }
?>
</div><div id="hikashop_small_image_div" class="hikashop_small_image_div"><?php
if(count($this->element->images)>2){
$thumbs = $this->element->images;
array_shift($thumbs);
foreach($thumbs as $image){
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"','rel="SqueezeBox"');
}

Made the edits, but the thumbnail shows up a different size on load that actual. And when hover over gallery images the main image on the products page reverts to the original size. Could this be a CSS size error?

I attempted to resolve the issue by making all images the assigned size. This resolves the different image size on load of page, but I need the images to be a larger size.

Thank you! Problem is fixed!

Hello,

Since I have variants, my code looked different than the example code above.

It started with this:

<?php
$image = reset($variant->images);
$height = $this->config->get('product_image_y',$this->config->get('thumbnail_y'));
$width = $this->config->get('product_image_x',$this->config->get('thumbnail_x'));
if (!$this->config->get('thumbnail')) {
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image_' . $variant_name . '" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
} else {
$style = '';
if (count($variant->images) > 1) {
if (!empty ($height)) {
$style = ' style="height:' . ($height +5) . 'px;"';
}
}
?>

And I've changed it to this:
<?php
$image = reset($variant->images);
$image = next($variant->images);
$height = $this->config->get('product_image_y',$this->config->get('thumbnail_y'));
$width = $this->config->get('product_image_x',$this->config->get('thumbnail_x'));
if (!$this->config->get('thumbnail')) {
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image_' . $variant_name . '" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
} else {
$style = '';
if (count($variant->images) > 2) {
$variant = $this->element->images;
array_shift($variant->images);
foreach($this->element->variants as $variant);}{
if (!empty ($height)) {
$style = ' style="height:' . ($height +5) . 'px;"';
}
}
?>

Unfortunately, the preview image is still showing up in the product page.

Thanks,

Dawn

Hello,

I've made the changes as you've noted and I still see the default thumbnail on the product page. The URL: king.artisanwebandprint.com/photography-...102-ancient-fig-tree

Here's the updated code:

<?php
$image = reset($variant->images);
$image = next($variant->images);
$height = $this->config->get('product_image_y',$this->config->get('thumbnail_y'));
$width = $this->config->get('product_image_x',$this->config->get('thumbnail_x'));
if (!$this->config->get('thumbnail')) {
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image_' . $variant_name . '" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
} else {
$style = '';
if (count($variant->images) > 2) {
$variant = $this->element->images;
foreach($this->element->variants as $variant);{
array_shift($variant->images);}
if (!empty ($height)) {
$style = ' style="height:' . ($height +5) . 'px;"';
}
}
?>

Hi,

I've sent the private login to determine why the code isn't working to removing the default thumbnail from the product page. To answer your question, yes I did modify the php for the appropriate template.

Dawn

Yes,

I ensured that I made the modifications to the right template. I sent a PM to Nicolas with the login information on May 20th, any luck?

king.artisanwebandprint.com

Thanks,

Dawn

Thanks Nicolas!

I appreciate your assistance greatly. I haven't learned PHP so it's a bit confusing to know how to edit it when there are a number of different approaches (variable or not).

All the best,

Dawn