Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 18, 2021 at 5:34 pm #1289027
    profumopuntoit

    Hello,
    in our WooCommece settings I see that product Thumbnail width is set to 230px
    And that is fine for desktop view in 5 columns
    But in mobile view the product thumbnails are enlarged to 350px, and they look a bit blurred
    What can be done, keeping in mind that we would like to have a good score in Google PageSpeed, both on mobile and on desktop?
    Is it possible to use a different size for desktop and mobile?
    We had used in the past Simple Image Size plugin, and I see that we have
    add_image_size( ‘shop_catalog’, ‘230’, ‘230’, array( “1”, “”) );
    Please see screenshot
    Thank you
    Mauro

    March 21, 2021 at 3:52 pm #1289466
    Victoria

    Hey profumopuntoit,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
	#top .products .product-category img {
	    display: block;
	    margin: 0 auto;
	    max-width: 230px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 22, 2021 at 4:39 pm #1289664
    profumopuntoit

    Thank you Victoria,
    it is working, but it is a css that shrinks the existing image. This way is inefficient because you have to download a large image to present it smaller and this penalizes you in Google PageSpeed

    I was hoping to see a PHP snippet that give an image size for browser windows over a certain size and another size below that.
    Is it possible?

    Thank you
    Mauro

    March 27, 2021 at 8:01 pm #1290764
    Mike

    Hi,
    Sorry for the very late reply, as I understand your question you would like to have a conditional function to change the “shop_catalog” image based on screen size, you can try the solution on this thread

    add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
    if( ! is_singular('product') ) {
        return array(
            'width'  => 200,
            'height' => 300,
            'crop'   => 0,
        );
    }

    return $size;
} );

    and then you would need to regenerate the thumbnails and test with a new item. If this doesn’t help then you will need to set the image size in between the desktop and mobile sizes and then use css to scale to images up and down based on screen size, such as Victoria had suggested.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.