Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Resize Thumbnail Size Of Gallery Images On Single Product Pages Rate Topic   - - - - -

 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 20 June 2016 - 12:30 PM #1

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?

 

Attached Files



 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4641 posts

Posted 20 June 2016 - 12:45 PM #2

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

Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 20 June 2016 - 03:22 PM #3

 

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

Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 20 June 2016 - 03:41 PM #4

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


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4641 posts

Posted 20 June 2016 - 03:42 PM #5

Thanks Fotis


Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 20 June 2016 - 03:51 PM #6

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}
                            <div class="ty-product-bigpicture__img {if $product.image_pairs|@count < 1} ty-product-bigpicture__no-thumbs{/if} cm-reload-{$product.product_id} {if $settings.Appearance.thumbnails_gallery == "Y"}ty-product-bigpicture__as-gallery{else}ty-product-bigpicture__as-thumbs{/if}" id="product_images_{$product.product_id}_update">
                                {include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y" thumbnails_size=55 }
                            <!--product_images_{$product.product_id}_update--></div>
                        {/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}
                        <div class="ty-product-block__img cm-reload-{$product.product_id}" id="product_images_{$product.product_id}_update">


                            {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}
                        <!--product_images_{$product.product_id}_update--></div>
                    {/if}

 

Fotis

 

PS

 

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


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 21 June 2016 - 05:14 AM #7

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.



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 21 June 2016 - 05:48 AM #8

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}
                        <div class="ty-product-block__img cm-reload-{$product.product_id}" id="product_images_{$product.product_id}_update">


                            {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}
                        <!--product_images_{$product.product_id}_update--></div>
                    {/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


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 21 June 2016 - 06:37 AM #9

Sorry Fortis. Your previous answer is working perfectly.

 

I'm just a beginner on CS Cart.

 

How you realize that I wan to edit / add image_wrap.override.tpl file? Is this a template hook? How I can override design/themes/responsive/templates/views/products/components/product_images.tpl using my_changes / hooks / products / image_wrap.override.tpl.



 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 21 June 2016 - 06:53 AM #10

Hi to all,

 

One more question!

 

Now if I set thumbnails_size as 85, the image width and height become 85px. Is it possible to get separate height and width like 100px height and 140px height?

 

Thanks in advance.



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 21 June 2016 - 07:06 AM #11

Sorry Fortis. Your previous answer is working perfectly.

 

I'm just a beginner on CS Cart.

 

How you realize that I wan to edit / add image_wrap.override.tpl file? Is this a template hook? How I can override design/themes/responsive/templates/views/products/components/product_images.tpl using my_changes / hooks / products / image_wrap.override.tpl.

Yuo dont need to override the product_images.tpl. You just override the hook inside the product template called image_wrap with what I show you.


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 21 June 2016 - 07:08 AM #12

Hi to all,

 

One more question!

 

Now if I set thumbnails_size as 85, the image width and height become 85px. Is it possible to get separate height and width like 100px height and 140px height?

 

Thanks in advance.

For this to happen you need to override the product_images.tpl as you need to add a line and make many changes in the file

 

Create this file my_changes/views/products/components/product_images.override.tpl

design/themes/responsive/templates/addons/my_changes/overrides/views/products/components/product_images.tpl

 

and add those lines inside

{assign var="th_size" value=$thumbnails_size|default:85}
{assign var="thh_size" value=$thumbnails_sizeh|default:140}

{if $product.main_pair.icon || $product.main_pair.detailed}
    {assign var="image_pair_var" value=$product.main_pair}
{elseif $product.option_image_pairs}
    {assign var="image_pair_var" value=$product.option_image_pairs|reset}
{/if}

{if $image_pair_var.image_id}
    {assign var="image_id" value=$image_pair_var.image_id}
{else}
    {assign var="image_id" value=$image_pair_var.detailed_id}
{/if}

{if !$preview_id}
    {assign var="preview_id" value=$product.product_id|uniqid}
{/if}

<div class="ty-product-img cm-preview-wrapper">
{include file="common/image.tpl" obj_id="`$preview_id`_`$image_id`" images=$image_pair_var link_class="cm-image-previewer" image_width=$image_width image_height=$image_height image_id="preview[product_images_`$preview_id`]"}

{foreach from=$product.image_pairs item="image_pair"}
    {if $image_pair}
        {if $image_pair.image_id}
            {assign var="img_id" value=$image_pair.image_id}
        {else}
            {assign var="img_id" value=$image_pair.detailed_id}
        {/if}
        {include file="common/image.tpl" images=$image_pair link_class="cm-image-previewer hidden" obj_id="`$preview_id`_`$img_id`" image_width=$image_width image_height=$image_height image_id="preview[product_images_`$preview_id`]"}
    {/if}
{/foreach}
</div>

{if $product.image_pairs}
    {if $settings.Appearance.thumbnails_gallery == "Y"}
        <input type="hidden" name="no_cache" value="1" />
        {strip}
        <div class="ty-center ty-product-bigpicture-thumbnails_gallery">
            <div class="cm-image-gallery-wrapper ty-thumbnails_gallery ty-inline-block">
                {strip}
                <div class="ty-product-thumbnails owl-carousel cm-image-gallery" id="images_preview_{$preview_id}">
                    {if $image_pair_var}
                        <div class="cm-item-gallery ty-float-left">
                            <a data-ca-gallery-large-id="det_img_link_{$preview_id}_{$image_id}" class="cm-gallery-item cm-thumbnails-mini active ty-product-thumbnails__item" style="width: {$th_size}px, height: {$thh_size}px">
                           {include file="common/image.tpl" images=$image_pair_var image_width=$th_size image_height=$thh_size show_detailed_link=false obj_id="`$preview_id`_`$image_id`_mini"}
                            </a>
                        </div>
                    {/if}
                    {if $product.image_pairs}
                        {foreach from=$product.image_pairs item="image_pair"}
                            {if $image_pair}
                                <div class="cm-item-gallery ty-float-left">
                                    {if $image_pair.image_id}
                                        {assign var="img_id" value=$image_pair.image_id}
                                    {else}
                                        {assign var="img_id" value=$image_pair.detailed_id}
                                    {/if}
                                    <a data-ca-gallery-large-id="det_img_link_{$preview_id}_{$img_id}" class="cm-gallery-item cm-thumbnails-mini ty-product-thumbnails__item">
                                    {include file="common/image.tpl" images=$image_pair image_width=$th_size image_height=$thh_size show_detailed_link=false obj_id="`$preview_id`_`$img_id`_mini"}
                                    </a>
                                </div>
                            {/if}
                        {/foreach}
                    {/if}
                </div>
                {/strip}
            </div>
        </div>
        {/strip}
    {else}
        <div class="ty-product-thumbnails ty-center cm-image-gallery" id="images_preview_{$preview_id}" style="width: {$image_width}px;">
            {strip}
                {if $image_pair_var}
                <a data-ca-gallery-large-id="det_img_link_{$preview_id}_{$image_id}" class="cm-thumbnails-mini active ty-product-thumbnails__item">
                    {include file="common/image.tpl" images=$image_pair_var image_width=$th_size image_height=$thh_size show_detailed_link=false obj_id="`$preview_id`_`$image_id`_mini"}
                </a>
                {/if}

                {if $product.image_pairs}
                    {foreach from=$product.image_pairs item="image_pair"}
                        {if $image_pair}
                                {if $image_pair.image_id == 0}
                                    {assign var="img_id" value=$image_pair.detailed_id}
                                {else}
                                    {assign var="img_id" value=$image_pair.image_id}
                                {/if}
                                <a data-ca-gallery-large-id="det_img_link_{$preview_id}_{$img_id}" class="cm-thumbnails-mini ty-product-thumbnails__item">
                                {include file="common/image.tpl" images=$image_pair image_width=$th_size image_height=$thh_size show_detailed_link=false obj_id="`$preview_id`_`$img_id`_mini"}
                                </a>
                        {/if}
                    {/foreach}
                {/if}
            {/strip}
        </div>
    {/if}
{/if}


{include file="common/previewer.tpl"}
{script src="js/tygh/product_image_gallery.js"}

{hook name="products:product_images"}{/hook}

Fotis


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 21 June 2016 - 09:22 AM #13

Thanks to @Fortis

 

You have spend your valuable time for newbies like us. Thats is great.

 

When I use your code in /design/themes/responsive/templates/views/products/components/product_images.tpl, it works perfectly.

 

But I can't override the default template using my_changes addon!

 

I have already enabled my_changes addon. Then created new file product_images.override.tpl in design/themes/responsive/templates/addons/my_changes/views/products/components/​. But the template was not override.

 

Can you please confirm that my file path is correct.

design/themes/responsive/templates/addons/my_changes/views/products/components/product_images.override.tpl


 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 21 June 2016 - 09:29 AM #14

No problem, me as other colleagues are trying to spread the word on CS-Cart, the platfrom we love!

 

Do you use the default template for product or the big picture?

Try this path

design/themes/responsive/templates/addons/my_changes/overrides/views/products/components

abd the file should be named product_images.tpl

 

Fotis


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 22 June 2016 - 05:41 AM #15

Thanks Fortis..

design/themes/responsive/templates/addons/my_changes/overrides/views/products/components/product_images.tpl

Your answer works perfectly... So now I can avoid core editing.



 
  • harjanto
  • Newbie
  • Authorized Reseller
  • Join Date: 11-Jul 13
  • 7 posts

Posted 22 April 2017 - 02:56 AM #16

Hi Fotis,

 

is it works on 4.5.1 ? i tried but doesnt works.

 

Thanks



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1448 posts

Posted 23 April 2017 - 04:36 PM #17

Hi Fotis,

 

is it works on 4.5.1 ? i tried but doesnt works.

 

Thanks

Hi harjanto

 

THis works also fine in 451. (http://ez-cart.com/c...-one/x-box-one/)

 

You need to check if you have the My Changes Addon enabled, as this is by default disabled.

 

Also clean your cache and you will be ok.

 

Fotis


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4641 posts

Posted 11 August 2017 - 09:38 AM #18

Can anyone tell me ho to make the gallery wider to view more thumbnails. Ideally on 2 rows too :)

 

http://prntscr.com/g75qay

 

4.52


Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19693 posts

Posted 11 August 2017 - 02:15 PM #19

Can anyone tell me ho to make the gallery wider to view more thumbnails. Ideally on 2 rows too :)

 

http://prntscr.com/g75qay

 

4.52

 

Try to change the following line of code in the js/tygh/product_image_gallery.js file

var ITEMS_COUNT_DEFAULT = 3;

Then clear cache and check

 

(!) Not tested


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • pepo1
  • Advanced Member
  • Members
  • Join Date: 23-Jun 17
  • 85 posts

Posted 26 October 2017 - 12:37 AM #20

Hi Fotis,

 

Thank you for giving your time to help newbies. I used your solution for default template and it resizes the thumbnail beautifully. However, now I don't have no nice gutter between my main image and the product detail section. Please see attachment.

 

UPDATE: No worries, I fixed it. There were some other classes from the original that needed to be included in the override file. :grin:

Attached Files