Different size Product (images)

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!

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

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!

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

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!

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

That worked perfectly for the ratio but its now stretched the images? 

What it should look like...

What has happened:

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

@tuanphan the link is here: https://nahinc.squarespace.com/earrings/p/beaded-daffodil-earrings-xndz5-ynk3w-fry6r-hd2a9-wxkcl

Thank you!

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?

@tuanphan no i took the code off as it was breaking the images, do you need me to add it back in?

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

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

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

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?

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

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

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?

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?

Cool, thanks. Test product link: https://vibraphone-parakeet-bpky.squarespace.com/config/pages/5f4fbb2537deea5c73538829/categories/644bac772bff9f546ddbb409

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

Ahh of course. Did wonder that actually. Try this: https://vibraphone-parakeet-bpky.squarespace.com/art-okd4h/p/test-product

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

Ahh amazing, that works perfectly. Thanks so much for your help and patience @tuanphan, really appreciate it 🙏

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