Dawn: changing the collection image size to a square and stop it from resizing

[irrimiri]

Hello

I’ve searched this forum and found several topics on how to resize the collection image in the webshop, but so far, none of these solutions worked for me, so I removed them again.

On my website, I’ve uploaded square images for the collections which are also visible in my ‘mega menu’ as well.
But the collection images don’t look great when I’m using the collection banner with the image on my product pages. https://www.shopmiriambos.nl/collections/august-en-suus
The image always seems to resize and gets cut off, and the text on the left is always a bit limited in space.
I’ve tried playing with different image

Ideally, I’d like a ‘fixed’ collection image:

• 1:1 square instead of the 16:9 ratio (which I tried and doesn’t seem to work nicely)

• fixed size (350x350 px for example)

• fixed positoin

• aligned: right.

See my screenshots below to see what I mean.
Is this change even possible?

Thanks so much in advance for any advice.

Best,
Miriam

[yy0z]

Like the screen shot below?

What you need to do is to go to Edit Code → Assets → component-collection-hero.css. Navigate to the end of the file and you should see something like this. Replace the lines highlighted in red from 50% to 75% and 25% respectively. That should give you roughly 350px for your picture width. The height is determined by your image height, so you need to make sure you upload a square image yourself.

Hope that helps.

@media screen and (min-width: 750px) {
  .collection-hero--with-image .collection-hero__text-wrapper {
    padding: 4rem 2rem 4rem 0;
    flex-basis: 50%;
  }

  .collection-hero__image-container {
    align-self: stretch;
    flex: 1 0 50%;
    margin-left: 3rem;
    min-height: 20rem;
  }
}

@media screen and (min-width: 750px) {
  .collection-hero--with-image .collection-hero__text-wrapper {
    padding: 4rem 2rem 4rem 0;
    flex-basis: 75%;
  }

  .collection-hero__image-container {
    align-self: stretch;
    flex: 1 0 25%;
    margin-left: 3rem;
    min-height: 20rem;
  }
}

[irrimiri]

Thanks SO much for helping me with this request.
I couldn’t figure out where to change it myself.

Your solution did the trick regarding showing the image a bit smaller. Thanks for that.
But when checking another collection page, I noticed that the page is still cropping the image.

With the icon that I used in the example of my original question, it’s not noticeable due to the white space around it.
But with other images on the collection page, there is some visible cropping.
Would it be possible to prevent the cropping from happening at all?

See images below

Thanks so very much again. This little tweak was already very helpful.

[yy0z]

Ok, this is caused by the fact that you have different collection description length, and the image was not automatically shrinking to fit the space. If you change the code to the following: flex: 1 1 25%, it should work. I have copied the new code below again in case of confusion.

@media screen and (min-width: 750px) {
  .collection-hero--with-image .collection-hero__text-wrapper {
    padding: 4rem 2rem 4rem 0;
    flex-basis: 75%;
  }

  .collection-hero__image-container {
    align-self: stretch;
    flex: 1 1 25%;
    margin-left: 3rem;
    min-height: 20rem;
  }
}

[irrimiri]

Thanks so much again.
It didn’t seem to fix the issue when I tried it.

But I tried something else and added a height and width for the image to the code, which helped.
I removed the min-height: 40rem; and played a bit with the size and came to 240px, which seems to work best. I hope that changing this bit of the code won’t cause any harm. So far I haven’t spotted any.
The image now appears just small enough so it won’t get visibly cropped anymore.

@media screen and (min-width: 750px) {
.collection-hero–with-image .collection-hero__text-wrapper {
padding: 4rem 2rem 4rem 0;
flex-basis: 75%;
}

.collection-hero__image-container {
align-self: stretch;
flex: 1 1 25%;
margin-left: 3rem;
width: 240px;
height: 240px;

}
}

Again, thanks for the help as it got me into the right direction.

[yy0z]

My bad, I forgot we are trying to fit the height not the width, although when I played on the developer tool it somehow worked, not sure what happened there.

What you did is absolutely fine, just bear in mind that this will not be responsive anymore as the image size is fixed.

I had a look at your site again on mobile view, I would suggest you to review your collection images a bit more. For example the mitten one that is causing the cropped view, it is because it is very zoomed in. Shopify optimises the display of images via a css property called: object-fit: cover, and it zooms into the picture when the full picture does not fit in the frame. The reason I am explaining this is that if you look at the same collection page on a mobile view, the image is very zoomed in, and of course that is defaulted to landscape as well, which does not look very professional.

In this instance, I would suggest if you had used a less zoomed in image, it would work better. And then you don’t actually have to force the code to set the width and height.

Of course this is just my suggestion.