WelshPhotographer Posted July 8, 2022 Share Posted July 8, 2022 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
WelshPhotographer Posted July 8, 2022 Author Share Posted July 8, 2022 I should also add I'm using the template Avenue 😎 Link to comment
tuanphan Posted July 9, 2022 Share Posted July 9, 2022 Try adding to Design > Custom CSS #productList .product .product-image img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } 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
WelshPhotographer Posted July 11, 2022 Author Share Posted July 11, 2022 On 7/9/2022 at 5:01 AM, tuanphan said: Try adding to Design > Custom CSS #productList .product .product-image img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } Thank you! That did the trick!! Many thanks Link to comment
WelshPhotographer Posted July 12, 2022 Author Share Posted July 12, 2022 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
WelshPhotographer Posted July 14, 2022 Author Share Posted July 14, 2022 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
WelshPhotographer Posted July 15, 2022 Author Share Posted July 15, 2022 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
tuanphan Posted July 18, 2022 Share Posted July 18, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment