Multiple image per column in multicolumn section

[JumpShipPaddy]

I want to add a second image into each column block in my multicolumn sections. At present, the only options within the block are Image, Heading, Description, Hover text, Link label, and Link. I'd like there to be a way to add another image just below the first (i.e. Image, Image 2, Heading...)

Can anyone help with the liquid changes to add this as an option?

[topnewyork]

Hi @JumpShipPaddy , can you kindly share the store URL and the liquid and its schema with me?

Thanks!

[JumpShipPaddy]

Hi @topnewyork, we're at jumpship.beer. What's the best way to share liquid/schema? It is unchanged as of the Dawn theme.

[topnewyork · Accepted solution]

Hi @JumpShipPaddy ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your multicolumn.liquid file
3. Replace whole code with the below

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}

<div class="multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">
  <div
    class="page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
    {% endif %}
  >
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin multicolumn__title">
        <h2 class="title inline-richtext {{ section.settings.heading_size }}">
          {{ section.settings.title }}
        </h2>
        {%- if section.settings.button_label != blank and show_mobile_slider -%}
          <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">
            {{- section.settings.button_label | escape -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}
    <slider-component class="slider-mobile-gutter">
      <ul
        class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--tablet grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign highest_ratio = 0
          for block in section.blocks
            if block.settings.image.aspect_ratio > highest_ratio
              assign highest_ratio = block.settings.image.aspect_ratio
            endif
          endfor
        -%}
        {%- for block in section.blocks -%}
          {%- assign empty_column = '' -%}
          {%- if block.settings.image == blank
            and block.settings.title == blank
            and block.settings.text == blank
            and block.settings.link_label == blank
          -%}
            {%- assign empty_column = ' multicolumn-list__item--empty' -%}
          {%- endif -%}

          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            <div class="multicolumn-card content-container">
              {%- if block.settings.image != blank -%}
  <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
    <div
      class="media media--transparent media--{{ section.settings.image_ratio }}"
      {% if section.settings.image_ratio == 'adapt' %}
        style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
      {% endif %}
    >
      {{
        block.settings.image
        | image_url: width: 3200
        | image_tag:
          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
          sizes: sizes,
          class: 'multicolumn-card__image'
      }}
    </div>
  </div>
{%- endif -%}

{%- if block.settings.image_2 != blank -%}
  <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
    <div
      class="media media--transparent media--{{ section.settings.image_ratio }}"
      {% if section.settings.image_ratio == 'adapt' %}
        style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
      {% endif %}
    >
      {{
        block.settings.image_2
        | image_url: width: 3200
        | image_tag:
          widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
          sizes: sizes,
          class: 'multicolumn-card__image'
      }}
    </div>
  </div>
{%- endif -%}

              <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3 class="inline-richtext">{{ block.settings.title }}</h3>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endif -%}
                {%- if block.settings.link_label != blank -%}
                  <a
                    class="link animate-arrow"
                    {% if block.settings.link == blank %}
                      role="link" aria-disabled="true"
                    {% else %}
                      href="{{ block.settings.link }}"
                    {% endif %}
                  >
                    {{- block.settings.link_label | escape -}}
                    <span class="svg-wrapper"
                      ><span class="icon-wrap">&nbsp;{{ 'icon-arrow.svg' | inline_asset_content }}</span></span
                    >
                  </a>
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>

      {%- if show_mobile_slider -%}
        <div class="slider-buttons large-up-hide">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            <span class="svg-wrapper">{{ 'icon-caret.svg' | inline_asset_content }}</span>
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            <span class="svg-wrapper">{{ 'icon-caret.svg' | inline_asset_content }}</span>
          </button>
        </div>
      {%- endif -%}
    </slider-component>
    <div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
      {%- if section.settings.button_label != blank -%}
        <a
          class="button button--primary"
          {% if section.settings.button_link == blank %}
            role="link" aria-disabled="true"
          {% else %}
            href="{{ section.settings.button_link }}"
          {% endif %}
        >
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.multicolumn.name",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "t:sections.multicolumn.settings.title.default",
      "label": "t:sections.multicolumn.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        },
        {
          "value": "hxxl",
          "label": "t:sections.all.heading_size.options__5.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        {
          "value": "third",
          "label": "t:sections.multicolumn.settings.image_width.options__1.label"
        },
        {
          "value": "half",
          "label": "t:sections.multicolumn.settings.image_width.options__2.label"
        },
        {
          "value": "full",
          "label": "t:sections.multicolumn.settings.image_width.options__3.label"
        }
      ],
      "default": "full",
      "label": "t:sections.multicolumn.settings.image_width.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
        },
        {
          "value": "circle",
          "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.multicolumn.settings.image_ratio.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.multicolumn.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.multicolumn.settings.column_alignment.label"
    },
    {
      "type": "select",
      "id": "background_style",
      "options": [
        {
          "value": "none",
          "label": "t:sections.multicolumn.settings.background_style.options__1.label"
        },
        {
          "value": "primary",
          "label": "t:sections.multicolumn.settings.background_style.options__2.label"
        }
      ],
      "default": "primary",
      "label": "t:sections.multicolumn.settings.background_style.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "t:sections.multicolumn.settings.button_label.default",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.multicolumn.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.multicolumn.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
   {
  "type": "column",
  "name": "t:sections.multicolumn.blocks.column.name",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.multicolumn.blocks.column.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "Image 2"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "t:sections.multicolumn.blocks.column.settings.title.default",
      "label": "t:sections.multicolumn.blocks.column.settings.title.label"
    },
    {
      "type": "richtext",
      "id": "text",
      "default": "t:sections.multicolumn.blocks.column.settings.text.default",
      "label": "t:sections.multicolumn.blocks.column.settings.text.label"
    },
    {
      "type": "text",
      "id": "link_label",
      "label": "t:sections.multicolumn.blocks.column.settings.link_label.label"
    },
    {
      "type": "url",
      "id": "link",
      "label": "t:sections.multicolumn.blocks.column.settings.link.label"
    }
  ]
}

  ],
  "presets": [
    {
      "name": "t:sections.multicolumn.presets.name",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[JumpShipPaddy]

Top stuff, thank you so much.

[topnewyork]

@JumpShipPaddy , your most welcome!

[JumpShipPaddy]

One last question, right now the image scales to fit the square box, can I change this using CSS or otherwise so that the image (which is 240x40 px) shows the full width?

[topnewyork]

Try the below css and then tell me if it works and if it does works, kindly hit like and mark it as an accepted solution.

Follow the below instructions to use css:

.multicolumn-card__image {
  width: 100% !important;
  height: auto !important;
  max-width: 240px !important;
}

[JumpShipPaddy]

Thanks, that fixes the scaling but now leaves a huge blank space beneath the image before the header as if it were a square image.