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?

Hi, I am currently trying to create a store page where the images ar 3x4 not 3x2 like all the other galleries. I have read many responses and found css to try, although nothing works.

My version is 7.0 and the template is one of the York family, Jasper Jin.

Any help would be appreciated. andrewbuckley.com.au/celestial-reverie

On 7/5/2024 at 2:32 PM, AJB said:

Hi, I am currently trying to create a store page where the images ar 3x4 not 3x2 like all the other galleries. I have read many responses and found css to try, although nothing works.

My version is 7.0 and the template is one of the York family, Jasper Jin.

 

Any help would be appreciated. andrewbuckley.com.au/celestial-reverie

You can try this CSS code

img.ProductList-image.ProductList-image--primary.loaded {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: unset !important;
}

Hi, I'm also struggling with figuring this out on a site I haven't published yet. I would like to sell photo prints (both portrait and landscape). I've created two categories within the store, so essentially a portrait and landscape page. How can I show the prints in their original landscape aspect ratio on the landscape page? Assuming I'll need to use CSS

On 10/29/2024 at 8:41 AM, Edow said:

Hi, I'm also struggling with figuring this out on a site I haven't published yet. I would like to sell photo prints (both portrait and landscape). I've created two categories within the store, so essentially a portrait and landscape page. How can I show the prints in their original landscape aspect ratio on the landscape page? Assuming I'll need to use CSS

You can share link to your site, we can check easier.