Okay
  Public Ticket #1142381
The size of the images in products carousel
Closed

Comments

  •  8
    Michal started the conversation

    Hi, I love the products carousel element you offer in your theme and I use it to great effect on my website. The problem is that it loads the original size images - 1000x1000 in my case which hugely increases the amount of data loaded. Is there any way to optimise it / make it load thumbnail size images?

  • [deleted] replied

    Hi Michal,

    That uses Catalog Image Size as you can see http://drops.laborator.co/dhy4 you can edit that size if you want.

    Will set this ticket as solved from here.

  •  8
    Michal replied

    Hi Ylli,

    Sorry but it took me some to figure out what was going on. The thing is that that one of the product carousels (there are two on the home page) - the one on the top is loading the images in Single product image size (1000x1000) instead of Catalog size - GTmetrix is flagging that and recommending serving scaled images (see the attachment please).

    I don't understand why this is happening - the second carousel works fine and is serving smaller images. I really have to fix this as this is increasing the load of the site by more that 1MB.

    Could you please have a look?
    Thank very much,

    Michal

  • [deleted] replied

    Hi Michal,

    Can you please share your Wordpress credentials here, because I need to login to your site and test this issue. Your information is safe here (private) in this thread.

    To include your credentials click Insert Credentials button in editor toolbar. (See how)

  •   Michal replied privately
  • [deleted] replied

    Hi Michal,

    Carousels take the image size that you have selected for the Single Image Size, you need to change the size there and the Products Carousel (Visual Composer element) will follow the same size too.


    (view on new page)

    Will set this ticket as solved from here.

  •  8
    Michal replied

    Hi Ylli,

    But you said previously that it uses the Gallery size (which would make much more sense), so I'm confused now. Even more so, as the second carousel on the page isn't causing GTmetix to warn about the scaled images. 

    I can't unfortunately make the Single images smaller as I need them in relatively high resolution so the clients can see the product's details.

  • [deleted] replied

    Hi Michal,

    Both of your carousels are using 1000x1000 images as you can see on this video http://drops.laborator.co/rvcta.

    You can go to Theme Options > Shop Settings > Catalog Page > and when you see Catalog thumbnail size option you can choose Medium.

    Or second solution:

    You can go to this path: wp-content/themes/kalium/inc/lib/vc/lab_products_carousel and replace init.phpfile with this modified one init.php.

    then you need to go to this path: wp-content/themes/kalium and open function.php file, then on the end of all codes add this code:

    function kalium_woocommerce_catalog_loop_thumb_carousel_only( $size ) {
        global $woocommerce_loop;
        
        if ( is_array( $woocommerce_loop ) && 'kalium-woocommerce-products-carousel' == get_array_key( $woocommerce_loop, 'name' ) ) {
            return 'shop_catalog';
        }
        
        return $size;
    }
    add_filter( 'kalium_woocommerce_catalog_loop_thumb', 'kalium_woocommerce_catalog_loop_thumb_carousel_only' );
    

    You must save this code because the update will overwrite this file, so you need to add it again when you update the theme.

    That's it.

    Will set this ticket as closed from here.

  •  8
    Michal replied

    Hi Ylli,

    I did the fist solution and it took the problem away! Thanks very much!

  • [deleted] replied

    Hi Michal,

    Glad to hear that.

    Will set this ticket as solved from here.