Can I crop a square image to a circle in liquid collections? how?

Highlighted
Explorer
63 0 3

I need to crop a square image to a circle, keeping the image centered to the circle, on the collection page in liquid...how do I achieve this? I'm using Debut, and the image is in the body of a page. See my code below for what I have so far:

<img style="max-width: 150px; height: auto;" src="{{ pages.some-page.content }}" />

 

 

0 Likes
Highlighted
Excursionist
10 0 4

You can't do that in Liquid but you can achieve that with CSS:
https://www.w3schools.com/howto/howto_css_rounded_images.asp 

If my answer was helpful then please Like and Accept Solution :)
1 Like
Highlighted
Explorer
63 0 3

@marcoswatanabe 

 

Thanks for the link. In their example they say to add html:

<img src="im_avatar.png" alt="Avatar">

Then to add CSS:

img {
  border-radius: 50%;
}

Where would I put these? 

 

0 Likes
Highlighted
Explorer
63 0 3

Okay I figured it out from reading the info in the link...for anyone curious how I achieved this, my code works, and is as follows:

 

On collections:

<img style="max-width: 150px; height: auto; border-radius: 50%;" src="{{ pages.some-page-name.content }}" />

 

1 Like