Resize Thumbnail Size Of Gallery Images On Single Product Pages

I want to re-size the small thumbnail in product gallery images in single product pages. I'm using default responsive theme.

How I can re-size them? I have found other thumbnail settings in settings >> thumbnails. But I can't find settings for this small thumbnails.

I have attached the screen shot.

Can you help me?

product-single-page.png

in Designs>themes>them editor change your .css

.ty-pict {
min-width: 35px;
min-height: 35px;
}
to whatever size you need
You may need to re import the thumbs to get clear images

in Designs>themes>them editor change your .css

.ty-pict {
min-width: 35px;
min-height: 35px;
}
to whatever size you need
You may need to re import the thumbs to get clear images

This is not a bad start but you need to change one more thing in order to not reimport any unage at all and just clean your thumbnail cache

You need to change the top of the "product_images.tpl" file located in the "skins/[CUSTOMER_ACTIVE_SKIN]/customer/views/products/components" directory of your CS-Cart installation, where [CUSTOMER_ACTIVE_SKIN] is an active skin of your storefront.
{assign var="th_size" value="35"}
to whatever size you like, lets say 95
Then clean you thumbnail cache and thats it.
Fotis

ANd important

this will not work in the product template the big picture as it has a line difining this

{include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y" thumbnails_size=55 }

You need to go to responsive / templates / blocks / product_templates / bigpicture_template.tpl

line 19 and change that.

Again clean cache and thumbnail cache to see it happen.

Fotis

Thanks Fotis

And another solution if you dont want to mess your theme files (suggested method) is to activate your My changes addon and add in the addons folder of your theme the my_changes folder.

So you need to create this path and file

responsive / templates / addons / my_changes / hooks / products / image_wrap.override.tpl

and add this lines

{if !$no_images}
                            
{include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y" thumbnails_size=55 }
{/if}

THen jsut change the 55 to what ever you line in the thumbnails_size=55 before you save.

Again clean cache

This one works only for big picture template.

For the default template you need this one, as the classes are a bit different and it will break your page.i

                    {if !$no_images}
                        
                        {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
                        {$smarty.capture.$discount_label nofilter}


                         {include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y"  thumbnails_size=85 image_width=$settings.Thumbnails.product_details_thumbnail_width image_height=$settings.Thumbnails.product_details_thumbnail_height}
                    
{/if}

Fotis

PS

no need to change any css with those solutions as the thumbnail size will be set from the above code.

Thanks @dvsgr. Your help is awesome.

As per your suggestion, in CS Cart 4.3, I have to updated product_images.tpl in design/themes/responsive/templates/views/products/components/ directory. On the top of that file, I have to change the value.

{assign var="th_size" value=$thumbnails_size|default:35}

If I change 35 to other values, the thumbnail become re-sized. (Yes. I have to clear cache!)

How I can override / update this file using my_changes addon? If so, I can avoid core file editing.

Hi again

I mention this on the last post. 1st part is for big picture templtate and second part for default

For the default template you need to activate your My changes addon and create in the addons folder of your theme this path and file

responsive / templates / addons / my_changes / hooks / products / image_wrap.override.tpl

The image_wrap.override.tpl should have these lines

 {if !$no_images}
                        
                        {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
                        {$smarty.capture.$discount_label nofilter}


                         {include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y"  thumbnails_size=85 image_width=$settings.Thumbnails.product_details_thumbnail_width image_height=$settings.Thumbnails.product_details_thumbnail_height}
                    
{/if}

You need to change the thumbnails_size=85 to whatever you like (its in the third line from the bottom somewhere in the middle)

Fotis