FROM CACHE - en_header

Using Shopify 2.0 Metafields - uploaded icons are blurry

Solved
jessica-b
Shopify Partner
10 2 2

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.

  

2.jpg

1.jpg

Accepted Solution (1)

Accepted Solutions
jessica-b
Shopify Partner
10 2 2

This is an 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. 

View solution in original post

Replies 5 (5)
jessica-b
Shopify Partner
10 2 2

This is an 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
Shopify Partner
232 23 86

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. 

SagarikaDas_0-1634791436567.png

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution!
Wade598
New Member
1 0 0

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
New Member
1 0 0

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
Shopify Partner
10 2 2

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;
}