Adding an image gallery to debut theme without an app

astrofalls
Visitor
1 0 0

My website is astrofalls.com, I am trying to add a section to my website which is an image gallery but have come to find there is no simple way to do it in shopify. I want to be able to have 3 columns of square images on a shopify page, and link the image into a page containing more info about an image. I have tried using tables and 1:1 images but shopify resizes all my images, resulting in an uneven grid. 

 

Is there any way to just make a simple page gallery?

Replies 2 (2)

DavidEKim
Shopify Partner
392 131 187

Hi,

If you want to make a simple gallery in Debut Theme, please follow the steps below.

*Note: The section is made for Debut Theme. It will work with most vintage theme (not tested in Shopify 2.0 theme yet).

 

1. Go to Online Store > Actions > Edit code

2. Under Sections > Click "Add a new section"

20220716_131624.png

3. Type "image-gallery" and then click "Done". It will let you create a new section named "image-gallery.liquid".

4. Delete all content (make it blank)

20220716_132023.png

20220716_132054.png

5. Copy & Paste the code below in to the blank document (image-gallery.liquid).

 

<div id="section-id-{{ section.id }}" class="image-gallery-container">
  {% style %}
    {%- for block in section.blocks -%}
    #section-id-{{ section.id }} #block-id-{{ block.id }} {
      max-width: {{ block.settings.image_width }}px;
    }
    {%- endfor -%}
  {% endstyle %}

  <div class="container ig_content">
    {% if section.settings.title != blank %}
    <div class="image_gallery_title">
      <h2 class="ig_title" data-cc-animate>
        {{- section.settings.title | escape -}}
      </h2>
    </div>
    {% endif %}

    <div class="flexible-layout flexible-layout--variable-columns flexible-layout--columns-{{ section.blocks.size }} align-{{ section.settings.text_alignment }}">
      {% for block in section.blocks %}
        <div id="block-id-{{ block.id }}" class="ig_block" {{ block.shopify_attributes }}
             data-cc-animate="cc-fade-in-up" data-cc-animate-delay="{{ forloop.index | times: 0.15 }}s">
          
          {%- if block.settings.subtitle_on_top == true -%}
            {% if block.settings.title != blank %}
              <div class="ig_section_title">{{ block.settings.title }}</div>
            {% endif %}
          {%- endif -%}

          {% if block.settings.enable_image %}
            <div class="ig_image">
              {%- if block.settings.link != blank -%}<a href="{{ block.settings.link }}">{%- endif -%}

              {%- if block.settings.ig_image != blank -%}
                <img src="{{ block.settings.ig_image | img_url: 'master' }}">
              {%- else -%}
                <div class="placeholder-image">
                  {{- 'image' | placeholder_svg_tag: 'placeholder-svg' -}}
                </div>
              {%- endif -%}

              {%- if block.settings.subtitle_on_top == false -%}
                {% if block.settings.title != blank %}
                  <div class="ig_section_title">{{ block.settings.title }}</div>
                {% endif %}
              {%- endif -%}

              {%- if block.settings.link != blank -%}</a>{% endif -%}
            </div>
          {% endif %}

        </div>
      {% endfor %}
    </div>
  </div>
</div>

<style>
.image-gallery-container {
  width: 100%;
}
.section-image-gallery {
  display: block;
  margin: 12px 24px 80px 24px;
}
.image_gallery_title {
  display: block;
  width: 100%;
}
.ig_title {
  text-align: {{ section.settings.ig_title_alignment }};
  font-size: {{ section.settings.ig_title_size }}px;
  font-weight: 600;
  margin: 20px 30px;
}
div.ig_content {
  width: 100% !important;
  display: inline-flex;
  flex-direction: column;
  align-content: space-around;
  align-items: center;
}
div.ig_block {
  {% if section.settings.enable_box_shadow == true %}box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);{% endif %}
  text-align: center;
  border-radius: 3px;
  margin: 12px 24px;
  overflow: hidden;
  width: {{ section.settings.image_block_width }}%;
}
.ig_section_title {
  display: inline-flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: 30%;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  padding: 12px;
}
.ig_image img {
  margin: 0;
  padding: 0;
}
@media (max-width: 767px) {
  div.ig_block {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    border-radius: 20px;
    margin: 25px 0;
    overflow: hidden;
    width: 100%;
  }
  .ig_section_title {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 30%;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    padding: 12px;
  }
}
.flexible-layout,
.fixed-layout {
  margin-left: -30px;
  margin-bottom: -30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.flexible-layout.valign-middle > .column,
.fixed-layout.valign-middle > .column {
  align-self: center;
}
.flexible-layout.valign-bottom > .column,
.fixed-layout.valign-bottom > .column {
  align-self: flex-end;
}
.flexible-layout .column,
.fixed-layout .column {
  padding-left: 30px;
  margin-bottom: 30px;
  flex: 0 0 auto;
}
.flexible-layout .column--quarter,
.fixed-layout .column--quarter {
  width: 25%;
}
.flexible-layout .column--third,
.fixed-layout .column--third {
  width: 33.333%;
}
.flexible-layout .column--half,
.fixed-layout .column--half {
  width: 50%;
}
.flexible-layout .column--two-thirds,
.fixed-layout .column--two-thirds {
  width: 66.666%;
}
.flexible-layout .column--three-quarters,
.fixed-layout .column--three-quarters {
  width: 75%;
}
.flexible-layout .column--full,
.fixed-layout .column--full {
  width: 100%;
}

.flexible-layout--align-center {
  justify-content: center;
}

.flexible-layout--variable-columns {
  justify-content: space-around;
}
.flexible-layout--variable-columns .column {
  flex: 1 0 auto;
  width: 33%;
  max-width: 50%;
}
.flexible-layout--variable-columns.flexible-layout--columns-4 .column {
  width: 50%;
}

.flexible-layout--form {
  margin-bottom: 0;
}
.flexible-layout--form .column {
  margin-bottom: 20px;
}

@media (max-width: 1300px) {
  .flexible-layout,
  .fixed-layout {
    margin-left: -20px;
  }
  .flexible-layout .column,
  .fixed-layout .column {
    padding-left: 20px;
  }

  .flexible-layout .column--quarter {
    width: 25%;
  }
  .flexible-layout .column--third {
    width: 33.333%;
  }
  .flexible-layout .column--half {
    width: 50%;
  }
  .flexible-layout .column--two-thirds {
    width: 66.666%;
  }
  .flexible-layout .column--three-quarters {
    width: 75%;
  }
  .flexible-layout .column--full {
    width: 100%;
  }

  .flexible-layout--variable-columns .column {
    width: 33%;
    max-width: 50%;
  }
  .flexible-layout--variable-columns.flexible-layout--columns-4 .column {
    width: 50%;
  }
}
@media (max-width: 767px) {
  .flexible-layout {
    margin-left: auto;
    margin-bottom: 0;
    flex-direction: column;
  }
  .flexible-layout .column {
    margin-bottom: 40px;
    padding-left: 0;
    width: 100% !important;
    max-width: none;
  }
  .flexible-layout .column:last-child {
    margin-bottom: 0;
  }
  .flexible-layout.layout-all-quarters {
    flex-direction: row;
    margin-left: -16px;
    margin-bottom: -30px;
  }
  .flexible-layout.layout-all-quarters .column {
    margin-bottom: 30px;
    padding-left: 16px;
    width: 50% !important;
  }
  .flexible-layout.layout-all-quarters .column:last-child {
    margin-bottom: 30px;
  }

  .flexible-layout--form {
    margin-bottom: 0;
  }
  .flexible-layout--form .column {
    margin-bottom: 20px;
  }
  .flexible-layout--form .column:last-child {
    margin-bottom: 20px;
  }
}

</style>


{% schema %}
{
  "name": "Image Gallery",
  "class": "section-image-gallery",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Image Gallery"
    },
    {
      "type": "select",
      "id": "ig_title_alignment",
      "label": "Title Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "ig_title_size",
      "min": 16,
      "max": 60,
      "step": 1,
      "label": "Title Font Size",
      "unit": "px",
      "default": 24
    },
    {
      "id": "enable_box_shadow",
      "type": "checkbox",
      "label": "Enable image box shadow",
      "default": true
    },
    {
      "type": "range",
      "id": "image_block_width",
      "min": 10,
      "max": 100,
      "step": 1,
      "label": "Image Block Width",
      "unit": "%",
      "default": 20
    }
  ],
  "max_blocks": 3,
  "blocks": [
    {
      "type": "image_block",
      "name": "Block",
      "settings": [
        {
          "id": "enable_image",
          "type": "checkbox",
          "label": "Enable image",
          "default": true
        },
        {
          "type": "image_picker",
          "id": "ig_image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 60,
          "max": 700,
          "step": 10,
          "label": "Image width",
          "unit": "px",
          "default": 400
        },
        {
          "id": "subtitle_on_top",
          "type": "checkbox",
          "label": "Title on top",
          "default": true
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Gallery",
      "settings": {
      },
      "blocks": [
        {
          "type": "image_block"
        },
        {
          "type": "image_block"
        },
        {
          "type": "image_block"
        }
      ]
    }
  ]
}
{% endschema %}

 

6. "Save" the file.

 

7. Go to Online Store > Customize (Theme Editor)

 

8. Click "Add section"

 

9. You will see the "Image Gallery" section. 

 

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
Marcus01
Visitor
2 0 1

Hi there! We are Hains & Co.

I want to add an Image Gallery to my header. I have followed your instructions above, its worked, but now I just can't workout how to add a page to my header with eth images. Can you help? Happy to pay a little??