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

JodySergison
Visitor
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">

<img

class="lazyload"

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

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

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

data-sizes="auto"

/>

<noscript>

<img class="grid-product__image lazyloaded"

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

</noscript>

</div>

{% endfor %}

</div>
{%- else -%} 

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

 

Replies 3 (3)

Trudy
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 %}
{{team}}

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

 

Looking to customize your theme? Don't hire a developer - instead check out Design Packs! https://apps.shopify.com/design-packs
no_robotocha
Shopify Partner
43 2 7

This solved it for me, thank you @Trudy 

--
No, Robotocha!

stressedowner
Shopify Partner
34 1 6

were you able to solve this?