How do I add multiple images to a Shopify Section without using a loop?

Question

I want to make a section where I can add 3 images. Each image will be styled differently so must be wrapped in it's own classes and elements.

I've been able to do the 3 images by using a for loop eg:

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

But, of course, this just means each image block is identical.

How can I display and style each image block uniquely?

My schema is as such:

{% schema %}
{
  "name": {
    "en": "Multi-hero"
  },
  "class": "index-section index-section--flush",
  "max_blocks": 3,
  "settings": [
  ],
  "blocks": [
    {
      "type": "image",
      "name": {
        "en": "Image"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Multi-hero"
      },
      "category": {
        "en": "Image"
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}

Answer 1

It kind of depends on how much control you want to give the user of the theme editing tools, but if you don't mind exposing some more options to them you could try something like this:

{% schema %}
{
  "name": {
    "en": "Multi-hero"
  },
  "class": "index-section index-section--flush",
  "max_blocks": 3,
  "settings": [
  ],
  "blocks": [
    {
      "type": "image",
      "name": {
        "en": "Image"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        },
        {
          "type": "select",
          "default": "center",
          "id": "image_style",
          "label": {
            "en": "Style"
          },
          "options": [
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "large",
              "label": "Large"
            },
            {
              "value": "huge",
              "label": "Huge"
            }
          ]
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Multi-hero"
      },
      "category": {
        "en": "Image"
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}

And then use that in your output:

{% for block in section.blocks %}  
    <div class="image_box image_box--{{ block.settings.image_style }}"> 
      {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
    </div>
  {% endfor %}

Or, if you want to change the image classes:

{% for block in section.blocks %}  
    <div class="image_box"> 
      {% assign image_class = 'logo-bar__image image-size--' | append: block.settings.image_style }} %}
      {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, image_class }}
    </div>
  {% endfor %}

Answer 2

Instead of relying on For loop, you can use block type for different type of images. I used your code to create 3 different types of blocks, namely

1. Image Left
2. Image Center
3. Image Right

Then used case to target different type of blocks.

{% for block in section.blocks %}  
    {% case block.type %}
        {% when 'image-left' %}
            {{block.type}} - Image Left Markup
        {% when 'image-center' %}
            {{block.type}} - Image Center Markup
        {% when 'image-right' %}
            {{block.type}} - Image Right Markup
    {% endcase %}
{% endfor %}

{% schema %}
{
  "name": {
    "en": "Multi-hero"
  },
  "class": "index-section index-section--flush",
  "max_blocks": 3,
  "settings": [],
  "blocks": [
    {
      "type": "image-left",
      "name": {
        "en": "Image Left"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    },
    {
      "type": "image-center",
      "name": {
        "en": "Image Center"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    },
    {
      "type": "image-right",
      "name": {
        "en": "Image Right"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    }
  ]
}
{% endschema %}