Using Shopify 2.0 Metafields - uploaded icons are blurry

[jessica-b]

Hi there - I've been using the Custom Fields app by Bonify with good results. But now that Shopify 2.0 offers metafields, I've been switching to them and updating my code. I've run into a problem, though. When I format a metafield to accept an image upload (icons in this case), the images are blurry. Using the Custom Fields app for this exact same purpose, the images are crisp and clear. I'm using the same files for both. I tried making my .png 1x and 2x with no difference in the quality of the image. Any idea how I can get a good, clear image upload using Shopify 2.0's built in metafields? I've attached images though the difference is more noticeable online where the Custom Fields images are super crisp.

  

[jessica-b · Accepted solution]

I figured it out. 

If I double the dimensions in this bit...

<img class="fc-field field__icon-image field-type--image" src="{{ product.metafields.my_fields.plant_icon_1_of_3 | img_url: '140x140' }}" alt="" >

... and then half the dimensions in my CSS code (width: 70px), the image appears clearly. 

[SagarikaDas]

Hey @jessica-b,

I also tried and I used 64 x 64px image size. It automatically adapts the size and I am satisfied with the results. 

[Wade598]

Much obliged to you for posting that it very well may be only what to offer motivation to somebody who needs it! Keep up the extraordinary work.

[Kulile]

Hi Jessica, i got the same problem than you, could you explain a little bit more how you did to fix it please ? Where do you put your code in order to have a clear image ? I've been trying everything i could but the images are still blurry. Thanks a lot !

[jessica-b]

In my case, the icons needed to be 2x in order for them to appear clearly. So, I made sure my uploaded image was twice the size I needed (140px), then I forced it to display at half size using CSS (70px). 

Using the example from my previous post:

This part goes into your template file, wherever you want the icon or image to appear. The content of this img tag will be based on your own specifications.

<img class="fc-field field__icon-image field-type--image" src="{{ product.metafields.my_fields.plant_icon_1_of_3 | img_url: '140x140' }}" alt="" >

This part goes into your CSS code. Call out the classes from the img tag above and set the display size. In my case it's:

.fc-field.field__icon-image.field-type--image {
max-width: 70px;
}