Need HELP with Schema!!!!

New Member
7 0 0

So, I'm trying to use different images for desktop and mobile for my hero banner. I've successfully duplicated the code and schema but it only reads the sizing for my mobile image size.

 

I don't really understand the language so it's nothing short of a miracle I've gotten this far. I'm pretty sure the issue is in the schema but not sure. PLS HELP!

 

Here is my hero.liquid file for Debut theme:

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}">
      {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.image.width < max_width -%}
        {%- assign slide_width = section.settings.image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      {%- if section.settings.image != blank -%}
        <img class="hero-fixed-width__image lazyload lazypreload"
             src="{{ section.settings.image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
    <div class="hidden_mobile hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.image -%}
         data-bgset="{% include 'bgset', image: section.settings.image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});"
         {%- endif -%}>
    {%- if section.settings.image == blank -%}
      <div class="hidden_mobile placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
        {%- if section.settings.hero_layout == 'fixed_width' -%}
    </div>
  {%- endif -%}
</div>





{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}





{%- if section.settings.mobile_hero_layout == 'full_width' and section.settings.mobile_hero_size == 'adapt' -%}
  {%- if section.settings.mobile_image.aspect_ratio == blank -%}
    {%- assign mobile_min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign mobile_min_aspect_ratio = section.settings.mobile_image.aspect_ratio -%}
  {%- endif -%}
  {%- assign mobile_wrapper_height = 100 | divided_by: mobile_min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- mobile_wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.mobile_hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.mobile_hero_layout == 'fixed_width' and section.settings.mobile_hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign mobile_min_aspect_ratio = section.settings.mobile_image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.mobile_hero_layout }}">
      {%- assign img_url = section.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.mobile_image.width < max_width -%}
        {%- assign slide_width = section.settings.mobile_image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.mobile_title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.mobile_text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.mobile_title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.mobile_text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.mobile_text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.mobile_text }}</div>
          {%- endif -%}
          {%- if section.settings.mobile_button_label != blank and section.settings.mobile_button_link != blank -%}
            <a href="{{ section.settings.mobile_button_link }}" class="btn hero__btn">
              {{ section.settings.mobile_button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      {%- if section.settings.mobile_image != blank -%}
        <img class="hero-fixed-width__image lazyload lazypreload"
             src="{{ section.settings.mobile_image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.mobile_image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.mobile_alignment }};"
             alt="{{ section.settings.mobile_image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.mobile_image %} style="background-image: url('{{ section.settings.mobile_image | img_url: '2048x' }}'); background-position: center {{ section.settings.mobile_alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
    <div class="hidden_desktop hero hero--{{ section.settings.mobile_hero_size }} hero-{{ section.id }}{% if section.settings.mobile_title != blank or section.settings.mobile_text != blank or section.settings.mobile_button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.mobile_hero_layout }}"
         {%- if section.settings.mobile_image -%}
         data-bgset="{% include 'bgset', mobile_image: section.settings.mobile_image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.mobile_alignment }}; background-image: url('{{ section.settings.mobile_image | img_url: '300x300' }});"
         {%- endif -%}>
    {%- if section.settings.mobile_image == blank -%}
      <div class="hidden_desktop placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.mobile_title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.mobile_text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.mobile_title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.mobile_text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.mobile_text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.mobile_text }}</div>
          {%- endif -%}
          {%- if section.settings.mobile_button_label != blank and section.settings.mobile_button_link != blank -%}
            <a href="{{ section.settings.mobile_button_link }}" class="btn hero__btn">
              {{ section.settings.mobile_button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.mobile_hero_size }}{% if section.settings.mobile_title != blank or section.settings.mobile_text != blank or section.settings.mobile_button_label != blank %} hero__overlay{% endif %}"{% if section.settings.mobile_image %} style="background-image: url('{{ section.settings.mobile_image | img_url: '2048x' }}'); background-position: center {{ section.settings.mobile_alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
  {%- if section.settings.mobile_hero_layout == 'fixed_width' -%}
    </div>
  {%- endif -%}
</div>

0 Likes
New Member
7 0 0

Here is the schema:

{% schema %}
{
  "name": {
    "en": "Image with text overlay",
  },
  "class": "index-section index-section--flush",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": {
        "en": "Image",
      }
    },
    {
      "type": "select",
      "id": "alignment",
      "label": {
        "en": "Image alignment",
      },
      "default": "center",
      "options": [
        {
          "value": "top",
          "label": {
            "en": "Top",
          }
        },
        {
          "value": "center",
          "label": {
            "en": "Middle",
          }
        },
        {
          "value": "bottom",
          "label": {
            "en": "Bottom",
          }
        }
      ]
    },
    {
      "type": "select",
      "id": "hero_layout",
      "label": {
        "en": "Layout",
      },
      "default": "full_width",
      "options": [
        {
          "label": {
            "en": "Full width",
          },
          "value": "full_width"
        },
        {
          "label": {
            "en": "Fixed width",
          },
          "value": "fixed_width"
        }
      ]
    },
    {
      "type": "select",
      "id": "hero_size",
      "label": {
        "en": "Section height",
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "en": "Adapt to image",
          },
          "value": "adapt"
        },
        {
          "label": {
            "en": "Extra Small",
          },
          "value": "x-small"
        },
        {
          "label": {
            "en": "Small",
          },
          "value": "small"
        },
        {
          "label": {
            "en": "Medium",
          },
          "value": "medium"
        },
        {
          "label": {
            "en": "Large",
          },
          "value": "large"
        },
        {
          "label": {
            "en": "Extra Large",
          },
          "value": "x-large"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_size",
      "label": {
        "en": "Text size",
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "en": "Medium",
          },
          "value": "medium"
        },
        {
          "label": {
            "en": "Large",
          },
          "value": "large"
        }
      ]
    },
    {
      "type": "text",
      "id": "title",
      "label": {
        "en": "Heading",
      },
      "default": {
        "en": "Image with text overlay",
      }
    },
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "en": "Text",
      },
      "default": {
        "en": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>",
      }
    },
    {
      "type": "text",
      "id": "button_label",
      "label": {
        "en": "Button label",
      }
    },
    {
      "type": "url",
      "id": "button_link",
      "label": {
        "en": "Button link",
      }
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": {
        "en": "Image",
      }
    },
    {
      "type": "select",
      "id": "mobile_alignment",
      "label": {
        "en": "Image alignment",
      },
      "default": "center",
      "options": [
        {
          "value": "top",
          "label": {
            "en": "Top",
          }
        },
        {
          "value": "center",
          "label": {
            "en": "Middle",
          }
        },
        {
          "value": "bottom",
          "label": {
            "en": "Bottom",
          }
        }
      ]
    },
    {
      "type": "select",
      "id": "mobile_hero_layout",
      "label": {
        "en": "Layout",
      },
      "default": "full_width",
      "options": [
        {
          "label": {
            "en": "Full width",
          },
          "value": "full_width"
        },
        {
          "label": {
            "en": "Fixed width",
          },
          "value": "fixed_width"
        }
      ]
    },
    {
      "type": "select",
      "id": "mobile_hero_size",
      "label": {
        "en": "Section height",
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "en": "Adapt to image",
          },
          "value": "adapt"
        },
        {
          "label": {
            "en": "Extra Small",
          },
          "value": "x-small"
        },
        {
          "label": {
            "en": "Small",
          },
          "value": "small"
        },
        {
          "label": {
            "en": "Medium",
          },
          "value": "medium"
        },
        {
          "label": {
            "en": "Large",
          },
          "value": "large"
        },
        {
          "label": {
            "en": "Extra Large",
          },
          "value": "x-large"
        }
      ]
    },
    {
      "type": "select",
      "id": "mobile_text_size",
      "label": {
        "en": "Text size",
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "en": "Medium",
          },
          "value": "medium"
        },
        {
          "label": {
            "en": "Large",
          },
          "value": "large"
        }
      ]
    },
    {
      "type": "text",
      "id": "mobile_title",
      "label": {
        "en": "Heading",
      },
      "default": {
        "en": "Image with text overlay",
      }
    },
    {
      "type": "richtext",
      "id": "mobile_text",
      "label": {
        "en": "Text",
      },
      "default": {
        "en": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>",
      }
    },
    {
      "type": "text",
      "id": "mobile_button_label",
      "label": {
        "en": "Button label",
      }
    },
    {
      "type": "url",
      "id": "mobile_button_link",
      "label": {
        "en": "Button link",
      }
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Image with text overlay",
      },
      "category": {
        "en": "Image",
      }
    }
  ]
}
{% endschema %}

 

0 Likes