hero.liquid

{%- comment -%}
  DISPLAY
{%- endcomment -%}

{%- liquid
  assign buttons = 0
  assign visible = nil
  unless section.settings.mobile
  assign visible = 'd-none d-sm-block'
  endunless
  unless section.settings.tablet
  if visible == nil
  assign visible = 'd-block d-sm-none d-md-block'
  else
  assign visible = 'd-none d-md-block'
  endif
  endunless
  unless section.settings.desktop
  if visible == nil
  assign visible = 'd-block d-lg-none'
  else
  assign visible = visible | append: ' d-lg-none'
  endif
  endunless
-%}

<div class="hero col-12 {{ visible }}">
  <div class="hero-caption d-flex px-5 {{ section.settings.position }}">

    <div
      class="text-{{ section.settings.text_align }} p-{{ section.settings.gutter }}"
      style="max-width:{{- section.settings.width }}px;">

      {%- for block in section.blocks -%}

        {%- unless block.type == 'button' -%}

          {%- capture styles -%}
            color:{{- block.settings.fc | default: 'inherit' -}};
            letter-spacing:{{- block.settings.ls | default: 'inherit' -}};
            font-size:{{- block.settings.fs | default: 'inherit' -}}px;
            font-weight:{{- block.settings.fw | default: 'inherit' -}};
          {%- endcapture -%}

          {%- if block.type == 'heading' -%}
            <h1 class="mb-{{- section.settings.spacing -}}" style="{{ styles }}">
              {{- block.settings.value -}}
            </h1>
          {%- else -%}
            <p class="mb-{{- section.settings.spacing -}}" style="{{ styles }}">
              {{- block.settings.value -}}
            </p>
          {%- endif -%}

        {%- else -%}

          {%- capture style -%}
            color:{{- block.settings.fc | default: 'inherit' -}};
            background-color{{- block.settings.bg | default: 'inherit' -}};
            max-width:{{- section.settings.width }}px;
          {%- endcapture -%}

          {%- liquid
            assign class = nil
            if block.settings.radius and block.settings.shadow
            assign class = 'btn-radius btn-shadow'
            elsif block.settings.shadow
            assign class = 'btn-shadow'
            elsif block.settings.radius
            assign class = 'btn-radius'
            endif -%}

          <ul class="pt-{{- section.settings.spacing -}}">
            {%- comment -%}

            {%- endcomment -%}
            <li>
              <a
                href=" {{- block.settings.url }}"
                title=" {{- block.settings.value }}"
                style=" {{- style }}"
                class="btn btn-line {{ class }}">
                {{ block.settings.value }}
              </a>
            </li>
          </ul>

        {%- endunless -%}
      {%- endfor -%}

    </div>
  </div>

  <div class="aspect-ratio {{ section.settings.aspect_ratio }}">

    {%- if section.settings.desktop_image != blank and section.settings.mobile_image != blank -%}
      <picture class="image">
        <source
          media="lg"
          data-srcset=" {{- section.settings.desktop_image | img_url: '1440x' | format: 'pjpg' }}" />
        <source
          media="md"
          data-srcset=" {{- section.settings.desktop_image | img_url: '1240x' | format: 'pjpg' }}" />
        <source
          media="sm"
          data-srcset=" {{- section.settings.mobile_image | img_url: '1024x' | format: 'pjpg' }}" />
        <source
          media="xs"
          data-srcset=" {{- section.settings.mobile_image | img_url: '1024x' | format: 'pjpg' }}" />
        <noscript>
          <img
            class="img-fluid lazy"
            src=" {{- section.settings.desktop_image | img_url: '1440x' | format: 'pjpg' }}">
        </noscript>
        <img
          class="img-fluid lazy"
          data-src=" {{- section.settings.desktop_image | img_url: '1440x' | format: 'pjpg' }}">
      </picture>
    {%- else -%}
      {%- render 'placeholder', type: 'hero_image' -%}
    {%- endif -%}

  </div>
</div>

{% schema %}
{
  "name": "Hero Image",
  "class": "row jc-center ai-center py-2",
  "tag": "section",
  "templates": ["index"],
  "settings": [
    {
      "type": "header",
      "content": "Visibility",
      "info": "Control the responsive visibility of the image at different screen sizes"
    },
    {
      "type": "checkbox",
      "id": "mobile",
      "label": "Mobile",
      "info": "Visible upto 540px",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "tablet",
      "label": "Tablet",
      "info": "Visible between 540px > 720px",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "desktop",
      "label": "Desktop",
      "info": "Visible from 720px ",
      "default": true
    },
    {
      "type": "header",
      "content": "Sizing",
      "info": "Control the text content position alignment and structure"
    },
    {
      "type": "range",
      "id": "width",
      "label": "Width",
      "info": "The maximum width which contains text and button elements.",
      "unit": "px",
      "min": 0,
      "max": 1000,
      "step": 50,
      "default": 300
    },
    {
      "type": "range",
      "id": "gutter",
      "label": "Gutters",
      "info": "The X and Y spacing gutters surrounding the content",
      "min": 0,
      "max": 5,
      "step": 1,
      "default": 2
    },
    {
      "type": "range",
      "id": "spacing",
      "label": "Spacing",
      "info": "The inner Y spacing between each text element",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 2
    },
    {
      "type": "header",
      "content": "Layout",
      "info": "Control the content position and text alignment"
    },
    {
      "type": "select",
      "id": "position",
      "label": "Position",
      "default": "jc-center ai-center",
      "options": [
        {
          "value": "jc-start ai-start",
          "label": "Top Left"
        },
        {
          "value": "jc-center ai-start",
          "label": "Top Center"
        },
        {
          "value": "jc-end ai-start",
          "label": "Top Right"
        },
        {
          "value": "jc-start ai-center",
          "label": "Middle Left"
        },
        {
          "value": "jc-center ai-center",
          "label": "Middle Center"
        },
        {
          "value": "jc-end ai-center",
          "label": "Middle Right"
        },
        {
          "value": "jc-start ai-end",
          "label": "Bottom Left"
        },
        {
          "value": "jc-center ai-end",
          "label": "Bottom Center"
        },
        {
          "value": "jc-end ai-end",
          "label": "Bottom Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text Alignment",
      "default": "text-center",
      "options": [
        {
          "value": "text-left",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        },
        {
          "value": "text-right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "header",
      "content": "Link",
      "info": "Renders a href link on the hero image"
    },
    {
      "type": "url",
      "id": "href",
      "label": "Link"
    },
    {
      "type": "checkbox",
      "id": "buttons",
      "label": "Button Precedence",
      "info": "Whether or not to disable if button links are defined",
      "default": true
    },
    {
      "type": "header",
      "content": "Images",
      "info": "Choose or upload desktop and mobile images"
    },
    {
      "type": "image_picker",
      "id": "desktop_image",
      "label": "Desktop Image",
      "info": "Dimensions: 1440x"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile Image",
      "info": "Dimensions: 1024x1024"
    },
    {
      "type": "select",
      "id": "aspect_ratio",
      "label": "Aspect Ratio",
      "info": "Desktop image height",
      "default": "x840",
      "options": [
        {
          "value": "x920",
          "label": "x920"
        },
        {
          "value": "x840",
          "label": "x840"
        },
        {
          "value": "x820",
          "label": "x820"
        },
        {
          "value": "x780",
          "label": "x780"
        },
        {
          "value": "x740",
          "label": "x740"
        },
        {
          "value": "x720",
          "label": "x720"
        }
      ]
    }
  ],
  "blocks": [
    {
      "name": "Heading",
      "type": "heading",
      "settings": [
        {
          "type": "text",
          "id": "value",
          "label": "Heading"
        },
        {
          "type": "header",
          "content": "Accents",
          "info": "Customize the heading font colour"
        },
        {
          "type": "color",
          "label": "Font Colour",
          "id": "fc"
        },
        {
          "type": "header",
          "content": "Sizing",
          "info": "Customize the heading font sizing"
        },
        {
          "type": "range",
          "id": "fs",
          "label": "Font Size",
          "min": 1,
          "max": 50,
          "step": 0.5,
          "default": 15,
          "unit": "px"
        },
        {
          "type": "range",
          "id": "ls",
          "label": "Letter Spacing",
          "min": 0.1,
          "max": 3,
          "step": 0.1,
          "default": 0.5,
          "unit": "px"
        },
        {
          "type": "range",
          "id": "fw",
          "label": "Font Weight",
          "min": 100,
          "max": 600,
          "step": 100,
          "default": 300
        }
      ]
    },
    {
      "name": "Caption",
      "type": "richtext",
      "settings": [
        {
          "type": "richtext",
          "id": "value",
          "label": "Description"
        },
        {
          "type": "header",
          "content": "Accent",
          "info": "Customize the caption text colour"
        },
        {
          "type": "color",
          "label": "Font Colour",
          "id": "fc"
        },
        {
          "type": "header",
          "content": "Sizing",
          "info": "Customize the caption text sizing"
        },
        {
          "type": "range",
          "id": "fs",
          "label": "Font Size",
          "min": 1,
          "max": 50,
          "step": 0.5,
          "default": 15,
          "unit": "px"
        },
        {
          "type": "range",
          "id": "ls",
          "label": "Letter Spacing",
          "min": 0.1,
          "max": 3,
          "step": 0.1,
          "default": 0.5,
          "unit": "px"
        },
        {
          "type": "range",
          "id": "fw",
          "label": "Font Weight",
          "min": 100,
          "max": 600,
          "step": 100,
          "default": 300
        }
      ]
    },
    {
      "name": "Button",
      "type": "button",
      "settings": [
        {
          "type": "text",
          "id": "value",
          "label": "Label"
        },
        {
          "type": "url",
          "id": "url",
          "label": "Link"
        },
        {
          "type": "header",
          "content": "Accent",
          "info": "Customize the button colours"
        },
        {
          "type": "color",
          "label": "Text Colour",
          "id": "fc"
        },
        {
          "type": "color",
          "label": "Button Background",
          "id": "bg"
        },
        {
          "type": "header",
          "content": "Style",
          "info": "Customize the button style"
        },
        {
          "type": "checkbox",
          "id": "shadow",
          "label": "Button Shadow",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "radius",
          "label": "Button Radius",
          "default": true
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero Image",
      "category": "Image"
    }
  ]
}
{% endschema %}