Single Product Image Problem

  • Resolved tamerkilinc

    (@tamerkilinc)


    6 years, 11 months ago

    Hi everybody!

    I am occuring a problem when I want to resize the single product gallery.

    This is the Code that I am using to increase the product gallery div and the image that is displayed in the gallery:

    .single-product div.product .summary {
	width:44%;
}

.single-product div.product .woocommerce-product-gallery {
	width:50%;
}

.single-product div.product .woocommerce-product-gallery img {
	width:100%;
}

    The problem I occur is that the product image looks blurry. Allthough there are a lot of fixes online, they are all outdated, because the newest version of Storefront disables the Woocommerce image settings and only allows to change the product list images / catalog images.

    Am I doing something wrong? I went through the source code and did not understand why the image does not resize automatically when I resize the width of the product image gallery.

    Thank you for your time!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • You should increase the size of the actual image first so that it doesn’t stretch it out larger than it should be:

    Here’s a good explanation on how to change the default image sizes:
    https://github.com/woocommerce/woocommerce/wiki/Customizing-image-sizes-in-3.3

    Since Storefront doesn’t set a gallery thumbnail size by default, you can go to Settings > Media and adjust the Thumbnail size to do that.

    Thread Starter tamerkilinc

    (@tamerkilinc)

    Hi Mikey,

    Thank you for your help. I have read through this article and tried this:

    in functions.php:

    add_filter( 'woocommerce_get_image_size_gallery_image', function( $size ) {
    return array(
        'width'  => 1200,
        'height' => 1200,
        'crop'   => 0,
    );
} );

    and this here in my custom css:

    .single-product div.product .summary {
	width:34%;
}

.single-product div.product .woocommerce-product-gallery {
	width:60%;
}

.single-product div.product .woocommerce-product-gallery img {
	width:100%;
}

    But it still doesn’t work for me, allthough I have regenerated all thumbnails.
    Has anyone another solution or can tell me what is wrong with my code?

    Hi @tamerkilinc,

    What part didn’t work? Do you have a link so I can see the page that should be different now?

    add_filter( 'woocommerce_get_image_size_single', function( $size ) {
    return array(
        'width'  => 1200,
        'height' => 1200,
        'crop'   => 0,
    );
} );

    If you need change gallery image.

    • This reply was modified 6 years, 9 months ago by unsik.

    add_filter( ‘woocommerce_get_image_size_single’, function( $size ) {
    return array(
    ‘width’ => 1200,
    ‘height’ => 1200,
    ‘crop’ => 0,
    );
    } );

    Hi !!

    This was a solution for me, for horizontal photos, but for vertical photos, no.

    Can it be modified to put a conditional, if the width is greater than the height that is ignored and if not put the dimensions automatically?

    regards

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Single Product Image Problem’ is closed to new replies.