Render multiple images in a single block - Beyond theme

Store Design
1

I have created a custom liquid component with multiple image selectors in the json

However, in the render component, there is only one image variable (‘image’), which means only that particular image is being rendered

The id’s of each image selector object in the custom blocks json is unique (image, image1, image2)

But only the first - ‘image’ is getting rendered

I am aware that the image is getting passed through the image.liquid file and that is probably why only the image variable works

I have attached a video of the custom block json and custom block render component below

Do let me know if you want to see any more code, i shall provide it

2

Hi @NativeHealth_R I want to see all full code of these files

  1. cutom-image-with-text.liquid

  2. custom-image-text-content.liquid

sometimes I dot not get notifacation so you can mail me direct at: ramchandra3938@gmail.com

or on skype: live:ramchandra3938

3

I have sent an email with the files from my work email id rishikesh@nativehealth.in

4

yes I got that

in custom-image-text-content.liquid you have remove code?,

because i find only code avelable for 1st image only

5

Apologies, i have sent you the correct files

6

“blocks”: [
{
“type”: “main”,
“name”: “Image With Text”,
“settings”: [
{
“id”: “image”,
“label”: “Image”,
“type”: “image_picker”
},
{
“id”: “title”,
“label”: “Heading”,
“type”: “text”,
“default”: “Image with text”
},
{
“id”: “custom_html”,
“label”: “Text”,
“type”: “text”,
“default”: “Some HTML content”
}
]
}
]

Create a block identified by “type” in the custom json schema for your component

And then render the block in your custom liquid using

{% for block in section.blocks %}
{% if block.type == ‘main’ %}

…

Thanks to Avi for finding this solution

1 Like