pattern-modal.html

<div class="m2m-modal-container d-flex flex-wrap justify-content-center mt-4">
  {% comment %}
    *-------------------------
    Button to open the gallery
    -------------------------*
  {% endcomment %}
  <input class="m2m-modal-btn" type="checkbox" id="m2m-modal-{{ include.id }}" name="m2m-modal-{{ include.id }}">
  <label class="btn btn-lg btn-m2m btn-m2m-cta py-3 px-4 fw-bold" for="m2m-modal-{{ include.id }}">📷 <span class="initialism fs-5 ps-1"><strong>Open the gallery</strong></span></label>
  {% comment %}
    *-------------------------
    Modal content
    -------------------------*
  {% endcomment %}
  <div class="m2m-modal position-fixed d-flex flex-wrap justify-content-center">
    <div class="m2m-modal-wrap d-block position-relative">
      {% comment %}
        *-------------------------
        Carousel
        -------------------------*
      {% endcomment %}
      <div class="m2m-carousel-container d-flex justify-content-center">
        <div class="m2m-carousel">
          <ul class="m2m-carousel-scroll list-unstyled mx-0 my-0" scroll-behavior="smooth">
          {%- for image in site.static_files | where: "image", true -%}
            {%- capture galleryPath -%}{{ include.folder }}{%- endcapture -%}
            {%- if image.path contains galleryPath -%}
            {%- assign filenameparts = image.path | split: "/" -%}
            {%- assign imgCaption = filenameparts | last | replace: image.extname,'' | replace: 'thumb-', '' | replace: 'a_','' | replace: 'b_','' | replace: 'c_','' | replace: 'd_','' | replace: 'e_','' | replace: 'f_','' | replace: 'g_','' | replace: 'h_','' | replace: 'i_','' | replace: 'l_','' | replace: 'm_','' | replace: 'n_','' | replace: 'o_','' | replace: 'p_','' | replace: 'q_','' | replace: 'r_','' | replace: 's_','' | replace: 't_','' | replace: 'u_','' | replace: 'v_','' | replace: 'z_','' | replace: '-',' ' | replace: '_',' ' -%}
            {%- unless image.path contains 'thumb-' -%}
            <li class="m2m-carousel-scroll-item-outer">
              <div id="{{ imgCaption | slugify }}-{%- increment slideId -%}" class="m2m-carousel-scroll-item">
                {%- assign respFileNamePart = filenameparts | last -%}
                {%- assign respImgPath = respFileNamePart | prepend: galleryPath | remove_first: "/" -%}
                {% responsive_image_block %}
                  path: {{ respImgPath }}
                  alt: {{ imgCaption | capitalize }}
                  margin-nil: 0
                {% endresponsive_image_block %}
              </div>
            </li>
            {%- endunless -%}
            {%- endif -%}
          {%- endfor -%}
          </ul>
          {% comment %}
            *-------------------------
            Carousel navigation
            -------------------------*
          {% endcomment %}
          <nav id="m2m-slider-nav">
          {%- for image in site.static_files -%}
            {%- capture galleryPath -%}{{ include.folder }}{%- endcapture -%}
            {%- if image.path contains galleryPath -%}
            {%- assign filenameparts = image.path | split: "/" -%}
            {%- assign imgCaption = filenameparts | last | replace: image.extname,'' | replace: 'thumb-', '' | replace: 'a_','' | replace: 'b_','' | replace: 'c_','' | replace: 'd_','' | replace: 'e_','' | replace: 'f_','' | replace: 'g_','' | replace: 'h_','' | replace: 'i_','' | replace: 'l_','' | replace: 'm_','' | replace: 'n_','' | replace: 'o_','' | replace: 'p_','' | replace: 'q_','' | replace: 'r_','' | replace: 's_','' | replace: 't_','' | replace: 'u_','' | replace: 'v_','' | replace: 'z_','' | replace: '-',' ' | replace: '_',' ' -%}
            {%- unless image.path contains 'thumb-' -%}
            {%- assign imageNavPath = image.path | split: "/" | last | prepend: 'thumb-' -%}
            {%- assign slideId = 0 -%}
            {%- assign slideNavId = 0 -%}
            {%- assign slideNav = 0 -%}
            <a href="#{{ imgCaption | slugify }}-{%- increment slideNavId -%}">
              <img class="mx-auto d-block" src="{{ galleryPath }}{{ imageNavPath }}" alt="{{ imgCaption | capitalize }}" title="Click to view {{ imgCaption | capitalize }}" width="120" height="120">
            </a>
            {%- endunless -%}
            {%- endif -%}
          {% endfor %}
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>