Shopify themes, liquid, logos, and UX
How to get File metafield image alt without using Shopify filters?
Is there a solution for this?
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".
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.
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">
There must be a bug in your code then. I just tried this approach and it worked like a charm.
Image settings:
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:
Feel free to use this code to fix yours!
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 %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024