Accessing and displaying metafield items

ppoultonjoe

If i want to grab metafield images, in this case from collections, and use them as a custom footer image(s), am I correct in thinking I have to add the "li-section" to the outer div (inside the main wrapper), and then "li-object" on the placeholder image inside webflow? If so, I have set up like below but the images are not appearing once uploaded as a theme:

| Div with "li-section=prefooter" - works and displays in theme
| Image with "li-object=collection.metafields.custom.collection_image"

Am I using the wrong selectors on li-object?

4 comments

JJan

Hey @poultonjoe, in that case you would need to use li-object:src, so add the :src modifier. And I think you also need to specify the dimensions with the url filter. So in the end it should look something like this:
li-object:src="collection.metafields.custom.collection_image | image_url: width: 1000, height: 1000"
li-object:alt="collection.metafields.custom.collection_image.alt"

You can play a bit around with the image_url filter, here is the documentation: https://shopify.dev/docs/api/liquid/filters#image_url

JJan

And to get a better idea of what attribute modifier you need to use, you can take a look here: https://www.liquify.pro/docu/getting-started#Liquid-Objects

li-object ist essentially the same as li-object:text, so you only use it for text. In other cases, for example a link, you would need to use the :href modifier

ppoultonjoe

Thank you

jjonas.halbstark

Hi @poultonjoe,
another solution would be using li-settings:image="Image" and then using the dynamic source in shopify. So this section can be used also in other places.
If you added this attribute on the image you can got into shopifys editor and selcect the section. There you can see the image settings. Click on the dynamicsource icon and select the metafield.

Attachment

Bildschirmfoto_2024-10-06_um_18.21.52.png

Add a reply

Welcome to the Liquify Community

Accessing and displaying metafield items