meownderthal Posted November 3, 2021 Share Posted November 3, 2021 Hi! I have another wrinkle to add to this question. I really appreciate the excellent suggestions from @tuanphan and all. I would like my product list pages in desktop to display portrait and vertical images not only in their original aspect ratio, but as the same size. (Actually - personally, since my art comes in slightly odd sizes, I would still like to crop the images but display ones tagged "portrait" in portrait orientation. But I can live with using the original aspect ratio and upload cropped thumbnails.) And then ideally I would like the rows of images to line up on the image centerline. Does this make sense? My page in progress is here: meownderthal.shop/shop Thanks! Link to comment
tuanphan Posted November 6, 2021 Share Posted November 6, 2021 On 11/4/2021 at 2:00 AM, meownderthal said: Hi! I have another wrinkle to add to this question. I really appreciate the excellent suggestions from @tuanphan and all. I would like my product list pages in desktop to display portrait and vertical images not only in their original aspect ratio, but as the same size. (Actually - personally, since my art comes in slightly odd sizes, I would still like to crop the images but display ones tagged "portrait" in portrait orientation. But I can live with using the original aspect ratio and upload cropped thumbnails.) And then ideally I would like the rows of images to line up on the image centerline. Does this make sense? My page in progress is here: meownderthal.shop/shop Thanks! Try this figure.grid-image img { object-fit: contain !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DDowsett Posted November 28, 2022 Share Posted November 28, 2022 Many thanks to @tuanphan for all your excellent help! I have been able to address a number of the same issues on my site using your solutions. Building on this discussion, one problem remains for - my product images still show as cropped in the individual product view pages (after I click on an individual image under a category). For each product (paintings), I have the design set to "Full" for the format as shown below. Would you have a solution for this problem? Thanks! Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 On 11/29/2022 at 2:17 AM, DDowsett said: Many thanks to @tuanphan for all your excellent help! I have been able to address a number of the same issues on my site using your solutions. Building on this discussion, one problem remains for - my product images still show as cropped in the individual product view pages (after I click on an individual image under a category). For each product (paintings), I have the design set to "Full" for the format as shown below. Would you have a solution for this problem? Thanks! Hi, Can you share link to a product? We can check this easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HMagorRoberts Posted December 20, 2022 Share Posted December 20, 2022 Hi @tuanphan, I read this thread and the code doesn't seem to work for me. I like the portrait images on my desktop PDP page but on mobile i would like to keep the portrait ratio instead of it going to landscape. are you able to help? I added the below code which helped but it broke my desktop images: /* product images */ img.ProductItem-gallery-slides-item-image { object-fit: initial !important; } .tweak-product-basic-item-gallery-aspect-ratio-32-standard .ProductItem-gallery-slides:before { padding-bottom: 100% !important; } Thanks! Link to comment
tuanphan Posted December 22, 2022 Share Posted December 22, 2022 On 12/21/2022 at 4:24 AM, HMagorRoberts said: Hi @tuanphan, I read this thread and the code doesn't seem to work for me. I like the portrait images on my desktop PDP page but on mobile i would like to keep the portrait ratio instead of it going to landscape. are you able to help? I added the below code which helped but it broke my desktop images: /* product images */ img.ProductItem-gallery-slides-item-image { object-fit: initial !important; } .tweak-product-basic-item-gallery-aspect-ratio-32-standard .ProductItem-gallery-slides:before { padding-bottom: 100% !important; } Thanks! Use this @media screen and (max-width:767px) { /* product images */ img.ProductItem-gallery-slides-item-image { object-fit: initial !important; } .tweak-product-basic-item-gallery-aspect-ratio-32-standard .ProductItem-gallery-slides:before { padding-bottom: 100% !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HMagorRoberts Posted December 22, 2022 Share Posted December 22, 2022 (edited) That worked perfectly for the ratio but its now stretched the images? What it should look like... What has happened: Edited December 22, 2022 by HMagorRoberts Link to comment
tuanphan Posted December 24, 2022 Share Posted December 24, 2022 On 12/22/2022 at 7:42 PM, HMagorRoberts said: That worked perfectly for the ratio but its now stretched the images? What it should look like... What has happened: Can you share link to this page? We can check & adjust code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HMagorRoberts Posted December 31, 2022 Share Posted December 31, 2022 @tuanphan the link is here: https://nahinc.squarespace.com/earrings/p/beaded-daffodil-earrings-xndz5-ynk3w-fry6r-hd2a9-wxkcl Thank you! Link to comment
tuanphan Posted January 2, 2023 Share Posted January 2, 2023 On 12/31/2022 at 7:59 PM, HMagorRoberts said: @tuanphan the link is here: https://nahinc.squarespace.com/earrings/p/beaded-daffodil-earrings-xndz5-ynk3w-fry6r-hd2a9-wxkcl Thank you! It looks like you used another code & fixed problem? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HMagorRoberts Posted January 2, 2023 Share Posted January 2, 2023 (edited) @tuanphan no i took the code off as it was breaking the images, do you need me to add it back in? Edited January 3, 2023 by HMagorRoberts Link to comment
tuanphan Posted January 4, 2023 Share Posted January 4, 2023 On 1/2/2023 at 6:30 PM, HMagorRoberts said: @tuanphan no i took the code off as it was breaking the images, do you need me to add it back in? Hi, It looks fine Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
HMagorRoberts Posted January 4, 2023 Share Posted January 4, 2023 (edited) @tuanphan yes it looks fine on desktop but on mobile i want the image to be the same ratio but it converts to landscape and crops the image. The code you gave me squashes it on mobile, i attached screenshots on the thread. Edited January 4, 2023 by HMagorRoberts Link to comment
DSImagery Posted January 15, 2023 Share Posted January 15, 2023 Hi @tuanphan, The code for the individual product pages worked perfectly and they now look great in my shop. The issue i now have is that on the main shop page where you can see multiple products before you select a product, some of those images are cropped off, is there a version of your CSS that would fix this? Cheers Dan Link to comment
tuanphan Posted January 18, 2023 Share Posted January 18, 2023 On 1/15/2023 at 11:10 PM, DSImagery said: Hi @tuanphan, The code for the individual product pages worked perfectly and they now look great in my shop. The issue i now have is that on the main shop page where you can see multiple products before you select a product, some of those images are cropped off, is there a version of your CSS that would fix this? Cheers Dan What is shop page url? On 1/4/2023 at 4:59 PM, HMagorRoberts said: @tuanphan yes it looks fine on desktop but on mobile i want the image to be the same ratio but it converts to landscape and crops the image. The code you gave me squashes it on mobile, i attached screenshots on the thread. Missing your notification. Do you still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
George_M Posted April 28, 2023 Share Posted April 28, 2023 Hi @tuanphan, Thanks so much for your help here, I really appreciate it. Some of the suggested CSS have worked perfectly (the original aspect ratios on the product list page for example look great - https://www.brunswickartgallery.co.uk/art) but the images on my product page are still all defaulting to the same size despite them being different aspect ratios (e.g. https://www.brunswickartgallery.co.uk/art/p/clay-sinclair-i-am-ur) This is all the custom CSS I have added since reading this article. Quote /* product detail images */ img.ProductItem-gallery-slides-item-image { object-fit: contain !important; } /* product images */ img.ProductItem-gallery-slides-item-image { object-fit: initial !important; } .tweak-product-basic-item-gallery-aspect-ratio-32-standard .ProductItem-gallery-slides:before { padding-bottom: 100% !important; } .products.collection-content-wrapper .grid-item .grid-image-cover { object-fit: contain !important; } Any help getting the images to appear with their original aspect ratios on the product page woulud be much appreciated. Many thanks, George Link to comment
tuanphan Posted April 29, 2023 Share Posted April 29, 2023 19 hours ago, George_M said: Hi @tuanphan, Thanks so much for your help here, I really appreciate it. Some of the suggested CSS have worked perfectly (the original aspect ratios on the product list page for example look great - https://www.brunswickartgallery.co.uk/art) but the images on my product page are still all defaulting to the same size despite them being different aspect ratios (e.g. https://www.brunswickartgallery.co.uk/art/p/clay-sinclair-i-am-ur) This is all the custom CSS I have added since reading this article. Any help getting the images to appear with their original aspect ratios on the product page woulud be much appreciated. Many thanks, George Use this code on individual products img.pdp-gallery-slides-image { object-fit: contain !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
George_M Posted May 2, 2023 Share Posted May 2, 2023 Awesome, thanks @tuanphan 🙏 That's a massive improvement and so nearly there but is leaving the previous image in the background when you scroll to the next product image in the slideshow (as shown in the attached image). And as the absolute novice I am, I couldn't figure out how to add this code to individual product pages so added it to Custom CSS on the Design page instead which had the aforementioned effect. Perhaps this is where I'm going wrong? Link to comment
tuanphan Posted May 4, 2023 Share Posted May 4, 2023 On 5/2/2023 at 6:52 PM, George_M said: Awesome, thanks @tuanphan 🙏 That's a massive improvement and so nearly there but is leaving the previous image in the background when you scroll to the next product image in the slideshow (as shown in the attached image). And as the absolute novice I am, I couldn't figure out how to add this code to individual product pages so added it to Custom CSS on the Design page instead which had the aforementioned effect. Perhaps this is where I'm going wrong? Yes. Add that code to Custom CSS. Can you share link to this test product? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
George_M Posted May 5, 2023 Share Posted May 5, 2023 Cool, thanks. Test product link: https://vibraphone-parakeet-bpky.squarespace.com/config/pages/5f4fbb2537deea5c73538829/categories/644bac772bff9f546ddbb409 Link to comment
tuanphan Posted May 8, 2023 Share Posted May 8, 2023 On 5/5/2023 at 11:53 PM, George_M said: Cool, thanks. Test product link: https://vibraphone-parakeet-bpky.squarespace.com/config/pages/5f4fbb2537deea5c73538829/categories/644bac772bff9f546ddbb409 /config is url for site owner you can access product in edit mode > then click arrow on top left or top right of screen > it will appear real url in browser address bar Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
George_M Posted May 9, 2023 Share Posted May 9, 2023 Ahh of course. Did wonder that actually. Try this: https://vibraphone-parakeet-bpky.squarespace.com/art-okd4h/p/test-product Link to comment
tuanphan Posted May 10, 2023 Share Posted May 10, 2023 17 hours ago, George_M said: Ahh of course. Did wonder that actually. Try this: https://vibraphone-parakeet-bpky.squarespace.com/art-okd4h/p/test-product Use this new code .pdp-layout-full-bleed .pdp-gallery-slides[aria-hidden="true"] img { opacity: 0; } img.pdp-gallery-slides-image { object-fit: contain !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
George_M Posted May 10, 2023 Share Posted May 10, 2023 Ahh amazing, that works perfectly. Thanks so much for your help and patience @tuanphan, really appreciate it 🙏 Link to comment
xmoreno33 Posted July 19, 2023 Share Posted July 19, 2023 Hi, I would like to know how to have smaller product icons. right now that re very large. Please advise. https://www.jacksonrosecandleco.com/ this is link to my page to see what I mean. The product images are too large. thank you Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment