- This topic has 15 replies, 3 voices, and was last updated 3 months, 1 week ago by
David.
-
AuthorPosts
-
June 4, 2020 at 12:07 pm #1314661
Raul
Hello,
I have a problem with the WooCommerce single product image size when using the vertical image gallery based on https://generatepress.com/forums/topic/woocommerce-product-gallery-vertical/
When images are horizontal, there is a fragment on the image that gets cut out on the right side.
By default vertical images are too tall for me, so I am using this code below to control the vertical size of the image. I wish there was a way of controlling the max-height for single product images in the theme Customize options.
/*Control image height*/ .woocommerce div.product div.images img { max-height: 700px; width: auto; margin: 0 auto; } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0 auto; }
Is this a good way of controlling the size of the image? I would prefer them to be aligned to the right, so the magnifier icon is displayed on top of the top right corner, but I can’t find a way of making it work.
Let me know, please.
Thank you!
June 5, 2020 at 2:44 am #1315223David
StaffCustomer SupportHi there,
It looks ok to me 🙂
To align the images to the side adjust your auto margins in this CSS:/*Control image height*/ .woocommerce div.product div.images img { max-height: 700px; width: auto; margin: 0 auto; }
For example:
margin: 0 0 0 auto;
would force the image to right hand side.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 5, 2020 at 6:33 pm #1316302Raul
Thanks David,
I tried that option before but the image is cut even more on the right. Please take a look (you can see the full image with the magnifier to compare).
To correct it, I added
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0 -60px; }
and works well when the image gallery exists, but if there is only one featured image and no extra gallery, the single featured image appears aligned all the way to the left.
I didn’t find a way of differentiating classes when the gallery exist and not.
Let me know if you find any solution, please.
June 6, 2020 at 9:47 am #1317066Tom
Lead DeveloperLead DeveloperHi there,
Can you link us to a product without a gallery? Might be possible to change the CSS a bit if they provide the necessary classes.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 8, 2020 at 5:31 pm #1319974Raul
Hi!
Sure, most products don’t have gallery, here is one example:
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/la-chaux-de-fonds/June 9, 2020 at 2:00 am #1320270David
StaffCustomer SupportProducts with a gallery have the
flex-viewport
so you can use this CSS selector to target them:.woocommerce div.product div.images .flex-viewport img
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 9, 2020 at 6:48 am #1320587Raul
Thanks David,
I was able to make it work, but I feel vertical images look better when they are aligned to the center of the available space. Is it possible to make that happen and move the magnifier icon as well so it has always the same margin from the top right o the image?
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/sin-titulo-249/
June 9, 2020 at 7:20 am #1320629David
StaffCustomer SupportUnless those products are in a specific category or have a specific tag – there is no way to identify a portrait/vertical image.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 9, 2020 at 7:37 am #1320647Raul
OK, I didn’t mean to have styles based on orientation, but to center all images and get the magnifier repositioned so it is always aligned to the top right.
Product feature images are now aligned to the center:
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/sin-titulo-249/
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/urbana-ano-1989/But the icon is always floating on the right.
Any suggestion?
June 9, 2020 at 3:45 pm #1321331Tom
Lead DeveloperLead DeveloperAs of right now, the images are always centered in the WooCommerce image container.
It’s not possible to tell the icon to position itself on the image itself, unfortunately.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 9, 2020 at 7:29 pm #1321459Raul
Oh, good to know. Thanks guys for your help and excellent support.
June 10, 2020 at 9:39 am #1322430Tom
Lead DeveloperLead DeveloperNo problem!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 12, 2020 at 1:10 pm #1485555Raul
Hello guys,
I am still having some issues with this topic. On single product, when using Chrome and Safari, I see the product featured image and part of the 1st pic in image gallery. If I resize the window it works fine, otherwise I always see part of a second image.
Do you mind taking a look to the URL below?
Thanks a lot!
October 13, 2020 at 6:41 am #1486648David
StaffCustomer SupportHmmm…. not sure how to get around that – I assume the issue goes away if you remove the CSS that is changing the layout of the Carousel/Lightbox?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 13, 2020 at 3:42 pm #1487573Raul
Hey David!
Yes, it works fine without my CSS. The gallery gets move to the default horizontal layout.
I will give it another try to see if I can find the problem. -
AuthorPosts
- You must be logged in to reply to this topic.