meet-the-stars.liquid

{{ 'meet-the-experts.css' | asset_url | stylesheet_tag }}
{{ 'meet-the-experts.js' | asset_url | script_tag }}

<div class="meet-the-experts">
  <div class="container">
    <h1 class="meet-the-title">{{ section.settings.main_title }}</h1>
    <p class="meet-the-subtitle">{{ section.settings.sub_title }}</p>
    <div class="meet-the-experts-inner">
      {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
          <div class="meet-the-experts-item">
            <div class="meet-the-experts-image">
              {% if block.settings.image != blank %}
                <img class="main-image"
                     srcset="{{ block.settings.image | img_url: '165x' }} 165w,
                             {{ block.settings.image | img_url: '360x' }} 360w,
                             {{ block.settings.image | img_url: '533x' }} 533w,
                             {{ block.settings.image | img_url: '720x' }} 720w,
                             {{ block.settings.image | img_url: '940x' }} 940w,
                             {{ block.settings.image | img_url: '1066x' }} 1066w,
                             {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                     src="{{ block.settings.image | img_url: '533x' }}"
                     sizes="(min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                     alt="{{ block.settings.image.alt | escape }}"
                     loading="lazy"
                     >
              {% else %}
                {{ 'image' | placeholder_svg_tag: 'main-image svg-image' }}
              {% endif %}
            </div>
            <div class="meet-the-experts-content">
              <h2 class="meet-the-experts-heading">{{ block.settings.heading }}</h2>
              <div class="company-name">
                <p>{{ block.settings.company_name }}</p>
              </div>
              <div class="main-description">
                <div class="meet-the-experts-description-wrap">
                  <div class="meet-the-experts-description">
                    {{ block.settings.description }}
                  </div>
                </div>
                <a class="meet-the-experts-button-readmore">Read More</a>
              </div>  
              <div class="meet-the-experts-bottom">
                <div class="social-icon">
                  <ul class="social-icon-list" role="list">
                    {%- if block.settings.social_instagram_link != blank -%}
                      <li class="social-item instagram">
                        <a href="{{ block.settings.social_instagram_link }}" class="social-icon-link" target="_blank">
                          {%- render 'icon-instagram' -%}
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if block.settings.social_facebook_link != blank -%}
                      <li class="social-item facebook">
                        <a href="{{ block.settings.social_facebook_link }}" class="social-icon-link" target="_blank">
                          {%- render 'facebook-icon' -%}
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if block.settings.social_twitter_link != blank -%}
                      <li class="social-item twitter">
                        <a href="{{ block.settings.social_twitter_link }}" class="social-icon-link" target="_blank">
                          {%- render 'icon-twitter' -%}
                        </a>
                      </li>
                    {%- endif -%}
                  </ul>
                </div>
                {% if block.settings.band_logo_image != blank %}
                  <div class="band-logo-image">
                    <img class="band-logo-image-inner"
                         srcset="{{ block.settings.band_logo_image | img_url: '165x' }} 165w,
                                 {{ block.settings.band_logo_image | img_url: '360x' }} 360w,
                                 {{ block.settings.band_logo_image | img_url: '533x' }} 533w,
                                 {{ block.settings.band_logo_image | img_url: '720x' }} 720w,
                                 {{ block.settings.band_logo_image | img_url: '940x' }} 940w,
                                 {{ block.settings.band_logo_image | img_url: '1066x' }} 1066w,
                                 {{ block.settings.band_logo_image | img_url: '1192x' }} 1192w,
                                 {{ block.settings.band_logo_image | img_url: 'original' }}"
                         src="{{ block.settings.band_logo_image | img_url: 'original' }}"
                         alt="{{ block.settings.band_logo_image.alt | escape }}"
                         loading="lazy"
                         >
                  </div>
                {% endif %}
              </div>
            </div>
            <hr>
          </div>
        {% endfor %}
      {% else %}
        {% for i in  (1..4) %}
          <div class="meet-the-experts-item">
            <div class="meet-the-experts-image">
              {{ 'image' | placeholder_svg_tag: 'main-image svg-image' }}
            </div>
            <div class="meet-the-experts-content">
              <h2 class="meet-the-experts-heading">Name</h2>
              <div class="company-name">
                <p>Company Name</p>
              </div>
              <div class="main-description">
                <div class="meet-the-experts-description-wrap">
                  <div class="meet-the-experts-description">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                  </div>
                </div>
                <a class="meet-the-experts-button-readmore">READ MORE</a>
              </div>             
              <div class="meet-the-experts-bottom">
                <div class="social-icon">
                  <ul class="social-icon-list" role="list">
                    <li class="social-item">
                      <a href="javascript:void(0)" class="social-icon-link" >
                        {%- render 'icon-instagram' -%}
                        <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                      </a>
                    </li>
                    <li class="social-item">
                      <a href="javascript:void(0)" class="social-icon-link" >
                        {%- render 'facebook-icon' -%}
                        <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                      </a>
                    </li>
                    <li class="social-item">
                      <a href="javascript:void(0)" class="social-icon-link" >
                        {%- render 'icon-twitter' -%}
                        <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      {% endif %}
      {% if section.settings.meet_the_stars_label != blank %}
        <div class="meet-the-experts-button">
          <a href="{% if section.settings.meet_the_stars_link != blank %}{{ section.settings.meet_the_stars_link }}{% else %}javascript:void(0){% endif %}">{{ section.settings.meet_the_stars_label }}</a>
        </div>
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Meet The Experts",
    "settings": [
        {
            "type": "text", 
            "id": "main_title",
            "label": "Main Title",
            "default": "Meet The Experts"
        },
        {
            "type": "text", 
            "id": "sub_title",
            "label": "Sub Title",
            "default": "Lorem ipusm dolor sit amet, consectetur adipiscing elit, sed."
        },
        {
          "type": "url",
          "id": "meet_the_stars_link",
          "label": "Button Link"
        },
        {
          "type": "text",
          "id": "meet_the_stars_label",
          "label": "Button Label",
          "default": "Meet The Stars"
        }
      ],
     "blocks": [
      {
        "type": "text",
        "name": "Meet The Experts Item",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text", 
            "id": "heading",
            "label": "Heading",
            "default": "Name"
          },
          {
            "type": "text", 
            "id": "company_name",
            "label": "Company Name",
            "default": "Company Name"
          },
          {
            "type": "richtext", 
            "id": "description",
            "label": "Description",
            "default": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>"
          },
          {
            "type": "image_picker",
            "id": "band_logo_image",
            "label": "Band Logo Image"
          },
          {
              "type": "text",
              "id": "social_instagram_link",
              "label": "Instagram"
          },
          {
              "type": "text",
              "id": "social_facebook_link",
              "label": "Facebook"
          },
          {
              "type": "text",
              "id": "social_twitter_link",
              "label": "Twitter"
          }
        ]
      }
    ]
  }
{% endschema %}