Home › Forums › WoodMart support forum › what are the optimal settings for product images of varying sizes.

what are the optimal settings for product images of varying sizes.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 11, 2018 at 6:43 pm #57178

    klaveren1977
    Participant

    Hi,

    I have a product feed in my shop and a lot of images vary in sizes.
    So some of the images are very “blown” up and this does not look very professional.

    Can you please let me know what the optimal settings are for product images of varying sizes?

    I have attached a link to a product page to show you what I mean.

    Thanks.

    May 11, 2018 at 7:53 pm #57185

    Elise Noromit
    Member

    Hello,

    You can set the size for all your images globally going to Appearance > Customize > WooCommerce > Product images.

    Best Regards

    May 12, 2018 at 12:36 pm #57249

    klaveren1977
    Participant

    HI,

    Yes, I understand that I can set the size for the images in the Appearance section.
    But I have tried several ways to adjust the settings, but stil …some Images are shown very large and some images are shown in the correct way.

    Can you please advice how to adjust this, so all images are shown in the same image size? ( the imported images are of different sizes_

    Thanks

    May 12, 2018 at 1:14 pm #57254

    Artem Temos
    Keymaster

    Try to regenerate all thumbnails using this plugin to be sure that your images size settings are applied https://wordpress.org/plugins/regenerate-thumbnails/

    May 16, 2018 at 7:02 am #57793

    klaveren1977
    Participant

    Hi,

    I have regenerized all thumnails and used the plugin for that. I still have the same problem. Some image a “blown” up and some are shown correctly.

    Please advize…

    May 16, 2018 at 7:47 am #57805

    Artem Temos
    Keymaster

    Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

    div.product-grid-item .hover-img img, 
div.product-grid-item .product-image-link img {
    width: auto;
}
    May 16, 2018 at 11:29 am #57840

    klaveren1977
    Participant

    Hi,

    We have tried the above solution but it does not fix the problem.
    We discovered that the product grid width is now set to: 100%, if we disable that…than it fixes the problem and all the images are shown correctly.

    But In CSS we can’t disable this 100% width. Can you please advize how we should do that?

    Attachments:
    You must be logged in to view attached files.
    May 16, 2018 at 12:13 pm #57849

    Artem Temos
    Keymaster

    Hi,

    Yes, this code should override this 100% width

    div.product-grid-item .hover-img img, 
div.product-grid-item .product-image-link img {
    width: auto!important;
}
    May 16, 2018 at 4:30 pm #57893

    klaveren1977
    Participant

    Hi,

    We have tried the above code, but still….the images show in different sizes.
    Do you another solution for this problem?

    May 16, 2018 at 5:49 pm #57913

    Artem Temos
    Keymaster

    Some images are blurred because they are low quality originally. For example this image was uploaded with low quality http://dev.houseofcats.nl/wp-content/uploads/2018/05/Adori-Krabplank-Karton-1.jpg

    May 18, 2018 at 10:10 am #58229

    klaveren1977
    Participant

    Hi,

    The Images we are talking about are not “blurry” but shown in different sizes. And we think that is not related to the fact of low quality images. My webhosting support department discovered that if you disabled the 100% Grid width, the problem is solved and all the images ( even those with the poor quality) are shown correctly (all in the same size). But unfortunately, the code you have sent us does not fix this issue.

    Also we have another issue with this theme, it’s very very slow. We have tested a few other themes and they are remarkably faster then our WOodmart theme. Please know, we are in Love with the Woodmart theme! It’s beautifull and has all the features that we need but if it’s stays running this slow….it’s going to be a huge issue for us.

    Can you please advice how to proceed?

    Thanks!

    May 18, 2018 at 11:22 am #58242

    Artem Temos
    Keymaster

    Hi,

    Could you please provide us some screenshots for the images issue? You said that the problem caused by 100% width property in CSS. But the code we gave you already removed this width and it looks correct now.

    As for the speed, could you please explain this issue in more details as well? Provide us some comparison screenshots and describe how exactly do you measure the speed for your website?

    Thank you

    May 18, 2018 at 3:13 pm #58302

    klaveren1977
    Participant

    Hi,

    Thank you for getting back to me! For the Images issue, yes we think that the problem is caused by the 100%width. The guys from my support department told me that when they disabled it, all the images looks ok. I don’t know why the code you provided did not work for us.

    I have made serveral screen shots to show you how the products look like.

    If you have any other solutions for this issue…please let us know.

    Concerning the slow working theme/website issue…I will come back later with more info on that.

    THanks for looking into it!!

    Attachments:
    You must be logged in to view attached files.
    May 18, 2018 at 9:17 pm #58367

    Artem Temos
    Keymaster

    Hi,

    The code is applied and works correctly https://gyazo.com/309b5dcb67e1005fff6ee08f5ed08e4d
    The problem is in your original images. They all have different sizes. You can switch to any other theme and they will look the same.

    Kind Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)