Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Support request] Make all product images square

Home Forums Support Make all product images square

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #828496
    Ivan Cazorla

    Hi there,

    As you can see in this product (https://www.deacampada.com/prod/carpa-reforzada-3x3m-blanca/), on the product images we have different aspect ratios for each photo. And that happens to the majority of our products.

    The things is that all images should be inside a square, regardless of their aspect ratio. See image attached to understand this.

    I’ve tried several gallery plugins but none of them seem to fix this issue.

    Please let me know.

    Thanks,
    Ivan

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #828500
    Ivan Cazorla

    Another image explanation just in case here:

    Thanks,
    Ivan

    #828539
    David
    Staff
    Customer Support

    Hi there,

    The image container height is defined by the image within it. Which makes doing this very tricky. Forcing the container to a set size would break the responsiveness. This would entail mean some complex and rather ‘expensive’ javascript to resize the container whenever the browser view is changed.

    The simplest method is to ensure the images are square, which may mean including white/transparent space in the original image.

    #829525
    Ivan Cazorla

    Hi again,

    The thing is that we cannot remake thousands of pictures on our entire site, I’ve seen a bunch of websites that automatically do this, that’s why I was wondering this must be possible to do in WordPress.

    #829550
    David
    Staff
    Customer Support

    I have had a play around with it, rather hackish and not sure if there will be repurcussions but try this:

    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        display: flex;
        align-items: center;
    }
    
    .woocommerce .flex-viewport {
        height: 100% !important;
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__image {
        overflow: visible !important;
    }
    #829640
    Ivan Cazorla

    Seems to be working. Thanks.

    Can the same effect be made with a rectangle, instead of a square with 100% of height?

    Thanks,
    Ivan

    #829665
    David
    Staff
    Customer Support

    Thats cool – wasn’t sure it would…

    Not sure i understand about making it rectangular. The way the above flex box works is to size the carousel image containers to the height of the tallest image. Which does mean if you have only landscape images on the product they won’t be square…… let me know.

    #829684
    Ivan Cazorla

    I want the height of the container to be like half of what it is now.

    Instead of 100% it could be 60% for example.

    Si that you can see the product image and the thumbnails in one page, without needing to scroll down to see the thumbnails.

    Thanks,
    Ivan

    #829706
    David
    Staff
    Customer Support

    I can’t think of how that could work, as your square images would need to be reduced in size and centred horizontally. Neither can i think of a workaround. The alternative is to move the thumbs to a vertical aside. Like here:

    https://generatepress.com/forums/topic/woo-single-product-thumbnail-gallery-with-carousel/#post-599314

    #830481
    Ivan Cazorla

    Thank you, I am trying that vertical thumbnails.

    On some products, images don’t show up as a square, they’re stll vertical, link in this one for example: https://www.deacampada.com/prod/suelo-de-rafia-3-x-4-mts/

    https://snag.gy/mUs8WF.jpg

    But on other products it works, like this one: https://www.deacampada.com/prod/saco-de-dormir-alfa/

    Let me know,
    Ivan

    #830683
    David
    Staff
    Customer Support

    The vertical images that are working , are actually square images, they have white space included. The problems one do not, and therefore they extend the container to fit.

    #830690
    Ivan Cazorla

    So this means I won’t be able to make vertical images into squares? We did managed to center them horizontally, can’t we do the same vertically?

    https://snag.gy/CVXtax.jpg

    Take this product for testing: https://www.deacampada.com/prod/suelo-de-rafia-3-x-4-mts/

    And using the Twst product slider now the square images won’t center horizontally in this case.

    Let me know,
    Ivan

    #830822
    David
    Staff
    Customer Support

    The Twist Slider is adding a bunch of different code, so the other CSS won’t work.
    The only feasible way of handing non square ( portrait and landscape ) images would be to fix the container to a set height. Which is never a good thing for responsive controls.

    Does the Twist Slider dev have any input on making their output a square size?

    #831907
    Ivan Cazorla

    No options on Twist Slider to make it a square size. I’ve disabled the plugin and just use your css, but as I was telling you, in this product for example (https://www.deacampada.com/prod/maglite-minimag-aaa-estano-caja-regalo/) the css isn’t working, it doesn’t resize the image into a square and center it horizontally. Why is that?

    But in this product (https://www.deacampada.com/prod/carpa-reforzada-3x3m-blanca/) if the landscape image is in the second place, it will center it horizontally and keeping it as a square…

    Can’t we set the width of the container to be always 100% and the height to be the same as the width?

    Let me know,
    Ivan

    #831934
    David
    Staff
    Customer Support

    The thing is with flex it needs a height property – you could try adding a min-height code to this part of the CSS:

    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        display: flex;
        align-items: center;
    }

    ie.

    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        display: flex;
        align-items: center;
        min-height: 580px; /* Rough height of the summary column */
    }

    Not sure if it will break the others but worth a shot.

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