[Support request] Make all product images square

[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

[Ivan Cazorla]

Another image explanation just in case here:

Thanks,
Ivan

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts