Hi!
I’ve been struggling with some code to put what I believe is called an ‘overlay’ on top of my collection page images.
As you can see here: https://infinitihome.co.uk/collections/all-furniture
The images are all different sizes. I know that the img.product-card can be altered to centre the image and put a square overlay on but every bit of code I’ve tried breaks my site.
Is there anyone that may be able to hep with this?
I’ve also tried forcing the image height but this looks very odd.
Hope you can help!
.product-card__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
I’ve been playing around with this however I can’t seem to get it correct.
Any help would be massively appreciated.
Thank you
Hi @AdamStokes2021 ,
I have just checked your images on your store, Make all images with same size as others shopify store having. If you use different size than it will cause effect.
A Shopify collection is a group of products on your online eCommerce store pages. Since the images are side by side, it’s essential to make sure all the Shopify images in your collection have the same image aspect ratio and image sizes. It’s extremely obvious if one product image does not have the same size as the others.
and if you do it by custom setting than image quality will destroy!
so best solution is, create same size images!
Hi @oscprofessional ,
Thanks for your reply.
I completely understand that images should be the same size however this isn’t possible due to the product imagery provided and the ratios of some of the imagery.
Doing this will mean some of the products are cropped out of the images (You’ll see this with some of the taller furniture images, a square would crop them out. This also means the cropped image will display within the product page which is not what I want.
I know theres a way to adjust the image on the collections page and it’s a sacrifice I’m willing to make to have some uniformity on the collection page.
Any help would be really appreciated.
Thank you
Hi @AdamStokes2021 ,
If you create images with small, and when you are going to increase the size than surely it will destroy the quality. but If you create large image size with HD quality, and when you will go for decrease the size by custom then it will not get blur.
I think you’ve misunderstood what it is I’m trying to achieve.
I need the images to be squared, but with an overlay, so the image sizes aren’t being played with, it’s the image card itself.
Here’s an example if I edit the code to this:
.product-card__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15vw;
object-fit: cover;
}
You can see how this has changed the images, however I can’t quite complete the code correctly so that it works on all devices and looks consistent. Also the product text needs to come up.
I understand that some of the products are going to be cropped such as the one in the example but I’m willing to accept this if there is no work around.
I hope this helps.
