How can I use MetaObject file list to create an image gallery?

1 0 0

How can I access the MetaObject file list to output images 


I have create a metaobject called "team_member" with a field called "gallery_images" which is a list of images this is what I am using so far to try to display each image to create a gallery



{%- if shop.metaobject.team_member.gallery_images != blank -%}

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "initialIndex": 2, "cellAlign": "center"}'>

{% assign file = shop.metaobject.team_member.gallery_images.value %}

{% for image in shop.metaobject.team_member.gallery_images.value %}

<div class="carousel-cell">



src=" {{ image | image_url: width: '1640x' }}"

data-widths="[475, 880, 1200, 1620]"

data-aspectratio="{{ image.aspect_ratio }}"




<img class="grid-product__image lazyloaded"

src="{{ field | image_url: width: '1640x' }}">



{% endfor %}

{%- else -%} 

<p>not working</p>
{%- endif -%}


Replies 3 (3)

Shopify Partner
11 1 3

I'm not sure if you have the metaobject right on the shop, but generally you need to connect the metaobject to something via a metafield.

In the example below I create a metafield on the page (also called team_member) and connected a metaobject to that.


Then you can access the metaobject and assign it to a variable  - the first line in the code below.


Team is now the MetaobjectDrop and you can loop through the gallery_images value and use the image_tag to render the images.


{% assign team = page.metafields.custom.team_member.value %}

{% for file_link in team.gallery_images.value %}
{{ file_link | image_url: width: 100 | image_tag: loading: 'lazy'}}
{% endfor %}


Looking to customize your theme? Don't hire a developer - instead check out Design Packs!
Shopify Partner
43 2 7

This solved it for me, thank you @Trudy 

No, Robotocha!

Shopify Partner
34 1 6

were you able to solve this?