How to get File metafield image alt?

Bulxar
Shopify Partner
82 2 22

How to get File metafield image alt without using Shopify filters?

 

Is there a solution for this?

Replies 6 (6)

nburton
Shopify Partner
30 1 4

If you are not using Shopify filters, you can get the File metafield image alt by going to the "Files" section of your Shopify admin and clicking on the file you want to edit. Under the "Edit file" section, you will see a field for "Image Alt".

 
banned
Bulxar
Shopify Partner
82 2 22

Nice, I laugh too much Nburton

 

We need the aly yo be rendered in theme

MetafieldsGuru
Shopify Partner
158 32 95

Hi @Bulxar ,

 

It's doable, but only if you're using the "file_reference" metafield type to store images. In this case, the standard payload returned by Liquid will be a generic file object, which just happens to have an alt field easily accessible.

Check out Metafields Guru, the #1 ranked metafields app.

Bulk editor | Data import/export | Metafield sets | Browser extension
Bulxar
Shopify Partner
82 2 22

Hi @MetafieldsGuru ,

 

We are using "file_reference" type and select only 'Images' in rules.

 

Anyway inside theme it return something like this gid://shopify/MediaImage/26817624604838.

 

This is the variable {{ banner_image }}.
Doing something like this {{ banner_image.alt }} is not returning anything.

 

My current situation is to receive or have an option to get the media object attributes separated without using the Shopify metafield_tag which return the whole HTML code

<!-- Image -->
<img src="https://cdn.shopify.com/s/files/1/0561/7470/6753/files/potions-header.png?v=1650325393" loading="lazy" class="metafield-file_reference">

 

MetafieldsGuru
Shopify Partner
158 32 95

There must be a bug in your code then. I just tried this approach and it worked like a charm.

Image settings:

MetafieldsGuru_0-1659879608364.png

Code:

 

{% assign image_object = product.metafields.timer_test.image.value %}
{% if image_object %}
  <h3>Image:</h3>
  <img class="metafield-image" src="{{ image_object | image_url }}">
  <h3>Image alt:</h3>
  <div class="metafield-image-alt">{{image_object.alt}}</div>
{% endif %}

 

Output:

MetafieldsGuru_1-1659879625575.png

Feel free to use this code to fix yours!

Check out Metafields Guru, the #1 ranked metafields app.

Bulk editor | Data import/export | Metafield sets | Browser extension
RedwoodTH
Visitor
3 0 0

When I apply your code to metaobjects with images, the alt-tag remains empty though. Any ideas?

 

 

 

{% assign referenzen = shop.metaobjects.referenzen.values %}
{% for referenz in referenzen %}
  <div class="image-item">
    {{ referenz.image
      | image_url: width: 1420
      | image_tag:
        loading: 'lazy',
        class: 'masonry-card__image'
    }}
  </div>
  <div class="image-caption">{{ referenz.image.alt | escape }}</div>
{% endfor %}