Add custom multi-image section in Shopify - shopify

Question

I'm trying to add a custom section in Shopify to allow the user to upload 2 promotional images. I'm a novice but I managed to create a custom section for 1 image but when I try it for two images in the same section the images won't display on the page after upload.
I found a few threads on here to get me to this point. See code below:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}
{% schema %}
{
"name": "PromoTwo",
"blocks":[
{
"type": "block-1",
"name": "Block 1",
"settings": [
{
"type": "image_picker",
"id": "test_2",
"label": "Promo Image 1"
}
]
},
{
"type": "block-2",
"name": "Block 2",
"settings": [
{
"type": "image_picker",
"id": "test_3",
"label": "Promo Image 2"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}
My goal for this section is to create a section with two side by side images that the user will be able to upload themselves.
My suspicion is that I'm doing something wrong here:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}

Answer 1

You are trying to build something that is already present with the proper tools but the wrong way.
Sections
The main idea of a section is to provide an interactive way for the admin to update the content for a specific element.
A section has two ways to achieve this:
using the section settings
using the section blocks
Difference between section settings and blocks
The section settings are static fields that can be populated via the customize panel. Static in the sense that you can't dynamically add more without writing additional code.
On another hand blocks are the same as sections settings but they can by dynamic or you can add multiply blocks without writing additional code for each new one.
You can use both in the same section file if you like but you need to learn how to call them properly.
Syntax difference
Here is how a section settings looks like:
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
{% endschema %}
An here is how you call it:
{{ section.settings.slide_image | img_url: '1024x' | img_tag }}
Section is the main object and after that you pass the JSON objects, so it becomes section.settings.slide_image.
Here is how a block syntax looks:
{% schema %}
{
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
]
}
{% endschema %}
And here is the proper way to call it:
{% for block in section.blocks %}
{{ block.settings.slide_image | img_url: '1024x' | img_tag }}
{% endfor %}
What's wrong with your code?
1) You are using section blocks but you are calling the section settings.
2) You are creating multiply block types with the same image field - there is no point to this.
3) Don't use img_url: 'medium' this deprecated. Use numbers instead. For example img_url: '1024x'.
How should your code look like
Here is how should your code look like:
{% for block in section.blocks %}
{{ block.settings.promo_image | img_url: '1024x' | img_tag }}
{% endfor %}
{% schema %}
{
"name": "Promo",
"blocks": [
{
"type": "promo",
"name": "Puote",
"settings": [
{
"id": "promo_image",
"type": "image_picker",
"label": "Promo image"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}

Answer 2

{% for block in section.blocks %}
<div class="image_box">
{{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
</div>
{% endfor %}
{% schema %}
{
"name": "multi image",
"max_blocks": 4,
"settings": [
{
"type": "header",
"content": "multi image"
}
],
"blocks": [
{
"type": "select",
"name": "Add Button",
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "Add image"
}
]
}
],
"presets": [
{
"name": "multi image",
"category": "text"
}
]
}