Jump to content

Shop Square Thumbnails - Change to uncrop?

Recommended Posts

Site URL: https://www.welshphotographer.co.uk/

Hi everyone, I wonder if anyone can help me please. 

I currently have a lot of images in galleries that I can display uncropped so if the image is rectangular then it displays properly. I am currently overhauling my website and I want to move away from galleries and to shops that display the image but with the option to purchase.

Examples:

Gallery - https://www.welshphotographer.co.uk/#/landscapecolour/

Shop - https://www.welshphotographer.co.uk/aviation-prints/

It's a slow process moving over several hundred images to the shop with tags, SEO, product names, descriptions etc which is fine and I'm prepared to do that BUT! the shop only displays a square thumbnail until the user clicks on the image. Is there any way this can be changed so it's not cropped square 1:1 please?

It's the only thing that's stopping it being now as I want it! 

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

I spoke too soon! 

 

That code works brilliantly for images that are landscape orientation but for images that are portrait orifentation, it still makes them square format rather than what the image size is.

 

Example of landscape orientation working brilliantly: 

https://www.welshphotographer.co.uk/aviation-prints/

Example of portrait orientation still not working:

https://www.welshphotographer.co.uk/florafaunaprints/

 

Appreciate the help BTW 

Link to comment

Sorry to be a nag!

I'm not a coder but I noticed if I change the width to auto and height to 100% I get the image for portrait orientation perfect but obviously it messes up the landscape orientation. If I change them both to 100% it all goes weird! Is there a way to code it so the longest edge is 100% and the shorter edge is auto so the image isn't cropped whatever way it is?

 

Thanks

 

#productList .product .product-image img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

Link to comment

Site URL: https://www.welshphotographer.co.uk/

I've asked this already in the Commerce section and @tuanphan kindly gave me a code which worked excellenty for some of the images but not others. I've posted it here in case 'coders' only hang out here and someone else can help me!!

The code I was given was:

#productList .product .product-image img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;

I have images for sale in both landscape and portrait orientation and it worked wonders on the landscape images but the portrait style were still square crops.

Is there a code that you can say longest edge is 100% and the shortest edge is auto so it displays the whole image?

Here's what I mean:

https://www.welshphotographer.co.uk/florafaunaprints/

I'm using Avenue template at the moment. If it means changing to a new template then I'll have to do that but if there is a code to fix the issue then that'd be ace.

I've read so many posts now with the same issues on here and spent a while seeing if I could use the codes on the other people's posts to get mine working but to no avail! 

I follow a lot of photographers online and they're always saying how the video is sponsered by SquareSpace but I'm struggling to see how SquareSpace can be any good for photographers if their images cannot be shown full size in the shop where people can purchase them?!!

 

TBH It's starting to drive me nuts!

Link to comment
On 7/15/2022 at 7:54 PM, WelshPhotographer said:

Site URL: https://www.welshphotographer.co.uk/

I've asked this already in the Commerce section and @tuanphan kindly gave me a code which worked excellenty for some of the images but not others. I've posted it here in case 'coders' only hang out here and someone else can help me!!

The code I was given was:

#productList .product .product-image img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;

I have images for sale in both landscape and portrait orientation and it worked wonders on the landscape images but the portrait style were still square crops.

Is there a code that you can say longest edge is 100% and the shortest edge is auto so it displays the whole image?

Here's what I mean:

https://www.welshphotographer.co.uk/florafaunaprints/

I'm using Avenue template at the moment. If it means changing to a new template then I'll have to do that but if there is a code to fix the issue then that'd be ace.

I've read so many posts now with the same issues on here and spent a while seeing if I could use the codes on the other people's posts to get mine working but to no avail! 

I follow a lot of photographers online and they're always saying how the video is sponsered by SquareSpace but I'm struggling to see how SquareSpace can be any good for photographers if their images cannot be shown full size in the shop where people can purchase them?!!

 

TBH It's starting to drive me nuts!

It looks like you solved these?

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.