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

Highlighted
Explorer
96 0 4

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
Shopify Partner
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 :)
Highlighted
Explorer
96 0 4

@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
96 0 4

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 }}" />

 

Highlighted
Trailblazer
258 10 31

I think it will be more convenient to crop a square image directly on Shopify. Maybe this article can help you: https://avada.io/shopify/docs/how-crop-image-shopify.html

I'm Jason Dao, Manager of Research & Development Department at Avada Ecommerce.
0 Likes
Highlighted
Tourist
4 0 2

Hi where did you add it?  is it at collection.liquid? please help

0 Likes
Highlighted
Shopify Partner
30 2 8

Rather than add a style=“” in the img tag, add a class and name it uniquely. Then, in your css liquid file, at the bottom do your styling there.

EG

<img class=“your-class-name” src=“add-your-source” />


 Then in your CSS

 

.your-class-name {
  max-width:150px;
  height:auto; 
  border-radius:50%;
}

 

 

You could add other styles in there too.

Careful with max width, don’t try and make a big image small - that’s bad SEO. Ideally if you want an image to appear 150px you should create (edit) it to be 150px before you upload it. Also optimise for file size etc. 

0 Likes
Highlighted
Explorer
96 0 4

@GenevaSpace 

So I wanted this for a circular image on my custom collection template. The way I did this was create a new collection template, then I put this code where I wanted the image to be. Your src may be your image src, but in my case I wanted to automatically fill in the src below with a link I had stored on a different page's content. So for my src below, I outputted the content of that page.

How mine looks:

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

How yours could look:

<img style="max-width: 150px; height: auto; border-radius: 50%;" src="https://your-website.com/your-image-src" />

 

 

 

0 Likes