How to have separate landscape and portrait product images`

Hello! On our website, we are looking to have two separate pages that display portrait products and landscape products. Our problem comes with adding the landscape products, as once we change the aspect ratio, all products including the ones in our portrait page are changed to this aspect ratio. 

Would there be any code to correct this?

 

The attached image is supposed to be landscape however once changed to the 3:2 aspect ratio, it changes the portrait page to the same

13 minutes ago, Carvases said:

The attached image is supposed to be landscape however once changed to the 3:2 aspect ratio, it changes the portrait page to the same

Can you share your website URL?

https://carvases.com/portraits

15 minutes ago, Carvases said:

https://carvases.com/portraits

Did you add product of those? products and landscape

Apologies for the late reply, I have attempted to add the landscape products however once changing the format of the image to 3:2 aspect ratio, it changes all of the portrait images to the same aspect ratio, so I have removed it. As we're still getting visits to our website, we're looking to keep it presentable whilst working on this issue.

2 hours ago, Carvases said:

Apologies for the late reply, I have attempted to add the landscape products however once changing the format of the image to 3:2 aspect ratio, it changes all of the portrait images to the same aspect ratio, so I have removed it. As we're still getting visits to our website, we're looking to keep it presentable whilst working on this issue.

You didn't add a product on Landscapes. If you add a product then I'll give you code for change the image ration for that.

Sure, let me add it now and you can check 🙂 Thank you so much

Hi! Have you been able to see the landscapes page with the product? Thanks!

Just now, Carvases said:

Hi! Have you been able to see the landscapes page with the product? Thanks!

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

#collection-64f5d32803e6186358dbec2b .products.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 66.666% !important;
}

29 minutes ago, Web_Solutions said:

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

#collection-64f5d32803e6186358dbec2b .products.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 66.666% !important;
}

 

Thank you so much, that is perfect! Is there anyway to also show the image as landscape when you click on the product? 🙂

That's perfect, thank you so much! This has really helped us and we're extremely thankful for your work.