gallery template page

New Member
3 0 1

<div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">
  {% case section.blocks.size %}
    {% when 1 %}
      {%- assign column_size = '' -%}
    {% when 2 %}
      {%- assign column_size = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign column_size = 'medium-up--one-third' -%}
    {% else %}
      {%- assign column_size = 'medium-up--one-quarter' -%}
  {% endcase %}

  {% for block in section.blocks %}
    <div class="grid__item {{ column_size }} js" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}
        <a class="image-bar__link" href="{{ block.settings.link }}">
          <div class="image-bar__item box ratio-container lazyload"
               data-bgset="{% include 'bgset', image: block.settings.image %}"
               data-sizes="auto"
               data-parent-fit="cover"
               style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
      {% elsif block.settings.image != blank %}
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
      {% else %}
        <div class="image-bar__item">
      {% endif %}
      <div class="image-bar__content{% if block.settings.cta_label != blank or block.settings.link != blank %} image-bar__overlay{% endif %}">
        {% if block.settings.image == blank %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}

        {% if block.settings.cta_label != blank %}
          <div class="image-bar__text">
            <h3 class="image-bar__caption">{{ block.settings.cta_label | escape }}</h3>
          </div>
        {% endif %}
      </div>
      {% if block.settings.link != blank %}
        </div></a>
      {% else %}
        </div>
      {% endif %}
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}" {{ block.shopify_attributes }}>
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  {% endfor %}
</div>

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}
{% schema %}
  {
    "name": {
      "en": "Gallery",
      "de": "Galerie",
      "fr": "Galerie"
    },
    "class": "index-section index-section--flush",
    "max_blocks": 200,
    "settings": [
      {
        "type": "select",
        "id": "section_height",
        "label": {
          "en": "Section height",
          "de": "Bereichs-Höhe",
          "fr": "Hauteur de la section"
        },
        "default": "medium",
        "options": [
          {
            "label": {
              "en": "Extra Small",
              "de": "Extra klein",
              "fr": "Très petite"
            },
            "value": "x-small"
          },
          {
            "label": {
              "en": "Small",
              "de": "Klein",
              "fr": "Petite"
            },
            "value": "small"
          },
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          },
          {
            "label": {
              "en": "Extra Large",
              "de": "Extra groß",
              "fr": "Très grande"
            },
            "value": "x-large"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": {
          "en": "Image",
          "de": "Foto",
          "fr": "Image"
        },
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            }
          },
          {
            "type": "select",
            "id": "alignment",
            "label": {
              "en": "Image alignment",
              "de": "Fotoausrichtung",
              "fr": "Alignement de l'image"
            },
            "default": "center",
            "options": [
              {
                "value": "top",
                "label": {
                  "en": "Top",
                  "de": "Oben",
                  "fr": "Haut"
                }
              },
              {
                "value": "center",
                "label": {
                  "en": "Middle",
                  "de": "Mitte",
                  "fr": "Milieu"
                }
              },
              {
                "value": "bottom",
                "label": {
                  "en": "Bottom",
                  "de": "Unten",
                  "fr": "Bas"
                }
              }
            ]
          },
          {
            "type": "url",
            "id": "link",
            "label": {
              "en": "Link",
              "de": "Link",
              "fr": "Lien"
            },
            "info": {
              "en": "Optional",
              "de": "Optional",
              "fr": "Facultatif"
            }
          },
          {
            "type": "text",
            "id": "cta_label",
            "label": {
              "en": "Caption",
              "de": "Unterschrift",
              "fr": "Légende"
            }
          }
        ]
      }
    ],
    "presets": [
      {
        "name": {
          "en": "Gallery",
          "de": "Galerie",
          "fr": "Galerie"
        },
        "category": {
          "en": "Image",
          "de": "Foto",
          "fr": "Image"
        },
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
 

after u can create gallery page

<div class="container" style="margin-right: 15px; margin-left: 15px;">
  <div class="row"> 

        <h1 style="text-align:center;">{{ page.title }}</h1>
     
   {% section 'our-client-template' %}
  </div>
</div>
 

0 Likes
Excursionist
32 0 5

Just wanted to see if there is a question here or not. I just see a bunch of code with no question

0 Likes
New Member
1 0 0

Hi, how this works? And how does it look? I'm trying to set up a page.gallery template and it's been a pain trying to find the way. I'd appreciate some guidance.

 

0 Likes