Support » Theme: Sinatra » Category Thumbnails

  • Resolved ettermanenterprises

    (@ettermanenterprises)


    Is there a way to put some kind of CSS code or something to make all the images uniform width and height set at 300×300?

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Branko

    (@brankoconjic)

    You can change the aspect ratio of WooCommerce product images in Appearance » Customize » WooCommerce » Product Images » “Thumbnail cropping”.

    Select 1:1.

    As far as I can tell from looking at your website, your images are already 1:1, (300x300px), but your site container is not not wide enough and allows only 238x238px dimension.

    Thread Starter ettermanenterprises

    (@ettermanenterprises)

    Yeah that is because I had to go and resize every image to 300×300 which is a pain. I was just wondering if there is CSS code that I can put in so I wouldn’t have to change anymore images. As I do have a lot more in Cutting Tools Category and if there is a CSS code I could put in instead that would save me some time?

    Branko

    (@brankoconjic)

    This should do exactly that:

    You can change the aspect ratio of WooCommerce product images in Appearance » Customize » WooCommerce » Product Images » “Thumbnail cropping”.

    Select 1:1.

    Thread Starter ettermanenterprises

    (@ettermanenterprises)

    I do have it set to that. Take a look at screenshot.
    screenshot

    But if you go to page:
    Drill Bits
    The images are over enlarged and do not line up in the rows.

    Thread Starter ettermanenterprises

    (@ettermanenterprises)

    Same goes for the related products under single products

    Branko

    (@brankoconjic)

    The original image is 200px x 600px, so it’s not possible to create a square 300x300px image from that one.

    Try to either set 200x200px in the Customizer or to upload the image in bigger resolution.

    Let me know if that helped.

    Thread Starter ettermanenterprises

    (@ettermanenterprises)

    That worked for alignment, but images still overfill and do not shrink down to thumbnail. Not sure if an overflow css like object-fit: cover; would work?

    Branko

    (@brankoconjic)

    Yeah, that could work. Give it a try.

    In that case I would set Appearance » Customize » WooCommerce » Product Images » Thumbnail cropping to Uncropped.

    and then try with this CSS:

    .woocommerce ul.products li.product a img {
        width: 300px;
        height: 300px; /* Adjust the height */
        object-fit: contain;
    }

    You can add the CSS code into the Additional CSS field.

    Thread Starter ettermanenterprises

    (@ettermanenterprises)

    Your suggestion worked perfectly! Exactly what I was looking for! You save me a ton of time this week! Thank you!

    Branko

    (@brankoconjic)

    Awesome!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Category Thumbnails’ is closed to new replies.