Theme section duplicating image

Mistborn
Tourist
4 0 1

Hi there,

I have inherited a bespoke Shopify theme and trying to make sense of the code. Any help would be most gratefully received as I have gone round in circles for hours and cannot work out why it wont work!

The intended result of this code is out output two columns/boxes with text and background images.

I have got the Schema working ok, and the first column/box is outputting as expected. The two issues are occuring in the second, for unknown reasons (to me!) it is not outputting the correct image or colour. Despite the ID's matching.

For example for the first Column I have set "id": "image" in the Schema and for the second I have set "id": "image_2".

If I could get a second brain on this that would be amazing as I am stumped!

Many thanks,

Duncan.

 

<!-- /sections/index-two-column-content.liquid -->

<!-- {%- assign button_colors = section.settings.button_colors | default: '#fff' -%}
{%- assign button_text = '#fff' -%}
{%- assign brightness = button_colors | color_brightness -%} -->

<!-- {%- if brightness > 127 -%}
  {%- assign button_text = settings.text_color -%}
{%- endif -%} -->

{%- if section.settings.image -%}
  {%- assign img_object = section.settings.image -%}
  {%- assign img_api = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}



<style>
  .colors-{{section.id}} {
    background-color: {{ section.settings.background | default: "#F7F9FA" }};
    color: {{ section.settings.color  | default: "#282C2E" }};
  }

  .colors-{{section.id}} .image-with-text__button { color: {{ button_colors }}; border-color: {{ button_colors }}; }
  .colors-{{section.id}} .image-with-text__button .icon { fill: {{ button_text }}; }
  .colors-{{section.id}} .image-with-text__button--clear .icon { fill: #fff; }
  .colors-{{section.id}} .image-with-text__button--filled { color: {{ button_text }}; border-color: {{ button_colors }}; background-color: {{ button_colors }}; }
  .colors-{{section.id}} .image-with-text__button--filled { color: {{ button_text }}; border-color: {{ button_colors }}; background-color: {{ button_colors }}; }
  .colors-{{section.id}} .image-with-text__button:hover { color: #fff; border-color: {{ settings.link_hover_color }}; background: {{ settings.link_hover_color }}; }
  .colors-{{section.id}} .image-with-text__button:hover .icon { fill: #fff; }
</style>

<section class="index-double js-overflow-container image-with-text-section colors-{{section.id}} {{ section.settings.height }} {% if section.settings.image == blank %}image-with-text-section{% endif %}" data-section-id="{{ section.id }}" data-section-type="image-with-text" id="FeaturedImage-{{ section.id }}">
  <div class="image-with-text-wrapper js-overflow-container {% if section.settings.title == blank and section.settings.content %}image-with-text--no-text{% endif %}"> <!--this ?-->


    <div class="image-with-text__image"><!-- IMAGE ONE-->
      {% if section.settings.image %}
        {% if section.settings.height == 'image-height' %}
          {%- assign img_object = section.settings.image -%}
          {%- assign img_small = section.settings.image | img_url: '18x' -%}
          {%- assign img_api = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      
          <img class="lazyload"
            src="{{ img_small }}"
            data-src="{{ img_api }}"
            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
            data-aspectratio="{{ section.settings.image.aspect_ratio }}"
            data-sizes="auto"
            alt="{{ section.settings.image.alt | escape }}">
          <noscript>
            <img src="{{ section.settings.image | img_url: '2048x' }}" alt="{{ section.settings.image.alt }}">
          </noscript>
        {% else %}
          <div class="image-with-text__image-img lazyload"
            data-bgset="{{ img_api }}"
            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
            data-aspectratio="{{  section.settings.image.aspect_ratio }}"
            data-sizes="auto">
          </div>
          <noscript>
            <div class="image-with-text__image-img no-js-image"
              style="background-image:url('{{ img_object | img_url: '1080x' }}'); background-size: cover; background-position: center center; background-repeat: no-repeat;">
            </div>
          </noscript>
        {% endif %}
      {% else %}
        <div class="image-with-text__image-img">
          {{ 'lifestyle-1' | placeholder_svg_tag }}
        </div>
      {% endif %}

      {% unless section.settings.title == blank and section.settings.content %}
      <div class="image-with-text__text js-overflow-container">
        <div class="image-with-text__inner js-overflow-content">
          {% unless section.settings.title == '' %}
            <h2 class="video__title" data-aos="fade-up" data-aos-duration="500">{{ section.settings.title | escape }}</h2>
          {% endunless %}
          {% unless section.settings.content == '' %}
            <div class="video__description" data-aos="fade-up" data-aos-duration="600" data-aos-delay="100">{{ section.settings.content }}</div>
          {% endunless %}
        </div>
      </div>
      {% endunless %}

      {% assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 %}
      <div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>
    </div>



    
    <div class="image-with-text__image"><!-- IMAGE TWO-->
      {% if section.settings.image_2 %}
        {% if section.settings.height_2 == 'image-height' %}
          {%- assign img_object = section.settings.image_2 -%}
          {%- assign img_small = section.settings.image_2 | img_url: '18x' -%}
          {%- assign img_api = section.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      
          <img class="lazyload"
            src="{{ img_small}}"
            data-src="{{ img_api }}"
            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
            data-aspectratio="{{ section.settings.image_2.aspect_ratio }}"
            data-sizes="auto"
            alt="{{ section.settings.image_2.alt | escape }}">
          <noscript>
            <img src="{{ section.settings.image_2 | img_url: '2048x' }}" alt="{{ section.settings.image_2.alt }}">
          </noscript>
        {% else %}
          <div class="image-with-text__image-img lazyload"
            data-bgset="{{ img_api }}"
            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
            data-aspectratio="{{  section.settings.image_2.aspect_ratio }}"
            data-sizes="auto">
          </div>
          <noscript>
            <div class="image-with-text__image-img no-js-image"
              style="background-image:url('{{ img_object | img_url: '1080x' }}'); background-size: cover; background-position: center center; background-repeat: no-repeat;">
            </div>
          </noscript>
        {% endif %}
      {% else %}
        <div class="image-with-text__image-img">
          {{ 'lifestyle-1' | placeholder_svg_tag }}
        </div>
      {% endif %}

      {% unless section.settings.title_2 == blank and section.settings.content_2 %}
      <div class="image-with-text__text js-overflow-container">
        <div class="image-with-text__inner js-overflow-content">
          {% unless section.settings.title_2 == '' %}
            <h2 class="video__title" data-aos="fade-up" data-aos-duration="500">{{ section.settings.title_2 | escape }}</h2>
          {% endunless %}
          {% unless section.settings.content_2 == '' %}
            <div class="video__description" data-aos="fade-up" data-aos-duration="600" data-aos-delay="100">{{ section.settings.content_2 }}</div>
          {% endunless %}
        </div>
      </div>
      {% endunless %}

      {% assign overlay_opacity_2 = section.settings.overlay_opacity_2 | times: 0.01 %}
      <div class="image-overlay" style="background-color:{{ section.settings.overlay_color_2 }} !important; opacity:{{ overlay_opacity_2 }};"></div>
    </div>
  </div>

</section>

{% schema %}
{
  "name": "Two Column Content",
  "settings": [
    {
      "type": "header",
      "content": "Column One"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Header"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default": "<p>Enter you text here...</p>"
    },
    {
      "type": "color",
      "id": "color",
      "label": "Text Colour",
      "default": "#000"
    }, 
    {
      "type": "header",
      "content": "Background Image"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "height",
      "label": "Section height",
      "default": "screen-height-one-half",
      "options": [
        { "value": "screen-height-full", "label": "Full screen height"},
        { "value": "screen-height-three-quarters", "label": "3/4 of screen"},
        { "value": "screen-height-two-thirds", "label": "2/3 of screen"},
        { "value": "screen-height-one-half", "label": "1/2 of screen"},
        { "value": "screen-height-one-third", "label": "1/3 of screen"},
        { "value": "seven-fifty-height-hero", "label": "750px" },
        { "value": "sixty-fifty-height-hero", "label": "650px" },
        { "value": "five-fifty-height-hero", "label": "550px" },
        { "value": "four-fifty-height-hero", "label": "450px" },
        { "value": "image-height", "label": "Image height" }
      ]
    },
    {
      "type": "header",
      "content": "Overlay"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Opacity",
      "info": "Increase contrast for legible text.",
      "unit": "%",
      "min": 0,
      "max": 90,
      "step": 5,
      "default":15
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay color",
      "default": "#fff"
    },
    

    {
      "type": "header",
      "content": "Column Two"
    },
    {
      "type": "text",
      "id": "title_2",
      "label": "Heading",
      "default": "Header"
    },
    {
      "type": "richtext",
      "id": "content_2",
      "label": "Content",
      "default": "<p>Enter you text here...</p>"
    },
    {
      "type": "color",
      "id": "color_2",
      "label": "Text Colour",
      "default": "#000"
    }, 
    {
      "type": "header",
      "content": "Background Image"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "height_2",
      "label": "Section height",
      "default": "screen-height-one-half",
      "options": [
        { "value": "screen-height-full", "label": "Full screen height"},
        { "value": "screen-height-three-quarters", "label": "3/4 of screen"},
        { "value": "screen-height-two-thirds", "label": "2/3 of screen"},
        { "value": "screen-height-one-half", "label": "1/2 of screen"},
        { "value": "screen-height-one-third", "label": "1/3 of screen"},
        { "value": "seven-fifty-height-hero", "label": "750px" },
        { "value": "sixty-fifty-height-hero", "label": "650px" },
        { "value": "five-fifty-height-hero", "label": "550px" },
        { "value": "four-fifty-height-hero", "label": "450px" },
        { "value": "image-height", "label": "Image height" }
      ]
    },
    {
      "type": "header",
      "content": "Overlay"
    },
    {
      "type": "range",
      "id": "overlay_opacity_2",
      "label": "Opacity",
      "info": "Increase contrast for legible text.",
      "unit": "%",
      "min": 0,
      "max": 90,
      "step": 5,
      "default":15
    },
    {
      "type": "color",
      "id": "overlay_color_2",
      "label": "Overlay color",
      "default": "#fff"
    }

    
  ],
  "presets": [
    {
      "name": "Two Column Content",
      "category": "Image"
    }
  ]
}
{% endschema %}

 

0 Likes