Changing photos in shop to display landscape as well as portrait images

Hi - I'm a printmaker and I edition prints in different sizes (both landscape and portrait).  I'm trying to display these on my website.  The shop page crops these to a given aspect (e.g. 3:2) and I can live with that (sort of - at a push), but I can't find a way to display a full image of a print on an individual product page in say 'widescreen' without all pages then becoming widescreen.  Is anyone aware of a way around this.  I'm have very, very limited experience in coding.

Hi,

Can you share link to individual product? We can check easier

I too have this question. I am exploring creating a store web site for an artist friend of mine. He has paintings in both landscape and portrait orientations and on the "product page", I need to present quality images in the proper orientation.

I am exploring Squarespace for the very first time - to see if it provides this capability. So far, I am having no luck - but that may be because I have not located proper "help" or "guide" yet.

Since I cannot find help, I am suspicious that the product does not provide such a capability. Am I incorrect? If so, where is the guidance as to "how to"?

Thanks !!!

Site URL: https://www.aussiecoastaldreaming.com.au

Hi all,

I'm starting my website construction and am trying to work out if it's possible to display products as portrait or landscape depending on the product. I'm beginning a photography business and have both landscape and portrait images, so it would be nice to be able to show them as full size to avoid customers thinking all images are in the same orientation.

If anyone has any ideas or has encountered this before please let me know!

Thanks,

Michael

On 4/20/2022 at 6:28 PM, aussiecoastaldreaming said:

Site URL: https://www.aussiecoastaldreaming.com.au

Hi all,

I'm starting my website construction and am trying to work out if it's possible to display products as portrait or landscape depending on the product. I'm beginning a photography business and have both landscape and portrait images, so it would be nice to be able to show them as full size to avoid customers thinking all images are in the same orientation.

If anyone has any ideas or has encountered this before please let me know!

 

Thanks,

Michael

Add to Design > Custom CSS

/* list page */
.products.collection-content-wrapper .grid-item .grid-image-cover {
    object-fit: contain !important;
}
/* detail page */
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    height: auto !important;
}

This solution will work - but if you only want the art piece to be displayed, a unique aspect ration will need to be defined for each piece with different measurements.

Since my friend will have relatively low numbers of art to present, this is the way he will go when he starts up his commercial site.

Custom tags and custom code need to be defined for each different aspect ratio. A TAG of SQUARE can cover all square pieces - but besides a square piece. the two pieces I tested with were 714 by 906 pixels (requiring a 78.8% custom code) and 495 by 875 pixels (requiring a 55.57% custom code)....

So it appears to work great but will take some effort to customize the image containers using the special CSS code shown in this article:

https://sf.digital/squarespace-solutions/how-to-show-product-images-in-their-original-aspect-ratio-on-squarespace-71

On 4/25/2022 at 4:27 AM, borntobewild said:

This solution will work - but if you only want the art piece to be displayed, a unique aspect ration will need to be defined for each piece with different measurements.

Since my friend will have relatively low numbers of art to present, this is the way he will go when he starts up his commercial site.

Custom tags and custom code need to be defined for each different aspect ratio. A TAG of SQUARE can cover all square pieces - but besides a square piece. the two pieces I tested with were 714 by 906 pixels (requiring a 78.8% custom code) and 495 by 875 pixels (requiring a 55.57% custom code)....

So it appears to work great but will take some effort to customize the image containers using the special CSS code shown in this article:

https://sf.digital/squarespace-solutions/how-to-show-product-images-in-their-original-aspect-ratio-on-squarespace-71

Hi, show different ratio on Individual Page, or both list + Individual pages?