{% comment %}
Instagram Gallery — curated section
------------------------------------
A hand-picked grid of Instagram posts. Each tile links out to the real post.
No app, no API token, nothing that expires.
Install:
1. Online Store > Themes > ... > Edit code
2. Sections > Add a new section > name it "instagram-gallery"
3. Delete the starter content, paste this file in, save
4. Customize > Add section > Instagram gallery
Adding a post:
Open the post on Instagram, use the "..." menu > Copy link.
Screenshot or save the image, upload it in the block, paste the link.
{% endcomment %}
{%- if section.settings.title != blank or section.settings.handle != blank -%}
{%- endif -%}
{% schema %}
{
"name": "Instagram gallery",
"tag": "section",
"class": "ig-gallery",
"settings": [
{
"type": "text",
"id": "eyebrow",
"label": "Eyebrow",
"default": "In real rooms"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Installed"
},
{
"type": "richtext",
"id": "intro",
"label": "Intro text",
"default": "
{%- if section.settings.eyebrow != blank -%}
{{ section.settings.eyebrow | escape }}
{%- endif -%}
{%- if section.settings.title != blank -%}
{%- if section.settings.handle != blank -%}
@{{ section.settings.handle | replace: '@', '' | strip }}
{%- endif -%}
{{ section.settings.title | escape }}
{%- endif -%} {%- if section.settings.intro != blank -%}{{ section.settings.intro }}
{%- endif -%}
{%- for block in section.blocks -%}
{%- if block.settings.image != blank -%}
{{
block.settings.image
| image_url: width: 1200
| image_tag:
loading: 'lazy',
widths: '300, 500, 700, 900, 1200',
sizes: '(min-width: 900px) 25vw, 50vw',
alt: block.settings.alt
}}
{%- else -%}
{{ 'image' | placeholder_svg_tag }}
{%- endif -%}
{%- if block.settings.caption != blank or block.settings.credit != blank -%}
{%- endif -%}
{%- endfor -%}
{%- if section.settings.button_label != blank -%}
{%- endif -%}
A closer look at where our swings have landed, and the designers who put them there.
" }, { "type": "text", "id": "handle", "label": "Instagram handle", "info": "Without the @ symbol.", "default": "smart_metal_pk" }, { "type": "header", "content": "Layout" }, { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 3, "max": 6, "step": 1, "default": 4 }, { "type": "range", "id": "gap", "label": "Space between tiles", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 16 }, { "type": "select", "id": "aspect", "label": "Tile shape", "options": [ { "value": "1 / 1", "label": "Square" }, { "value": "4 / 5", "label": "Portrait" }, { "value": "3 / 4", "label": "Tall portrait" } ], "default": "4 / 5" }, { "type": "range", "id": "corner_radius", "label": "Corner radius", "min": 0, "max": 24, "step": 2, "unit": "px", "default": 0 }, { "type": "checkbox", "id": "stagger", "label": "Stagger tiles", "info": "Alternating tiles sit lower, like swings hung at different lengths. Desktop only.", "default": true }, { "type": "range", "id": "max_width", "label": "Maximum width", "min": 900, "max": 1600, "step": 50, "unit": "px", "default": 1300 }, { "type": "header", "content": "Colours" }, { "type": "color", "id": "bg_color", "label": "Background", "default": "#ffffff" }, { "type": "color", "id": "text_color", "label": "Text", "default": "#1a1a1a" }, { "type": "header", "content": "Button" }, { "type": "text", "id": "button_label", "label": "Button label", "default": "Follow along" }, { "type": "url", "id": "button_link", "label": "Button link", "info": "Paste https://www.instagram.com/smart_metal_pk/ here — url fields can't be pre-filled with external links." }, { "type": "header", "content": "Spacing" }, { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 64 }, { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 64 } ], "blocks": [ { "type": "post", "name": "Post", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "url", "id": "link", "label": "Instagram post link", "info": "Open the post, use ... > Copy link, paste it here." }, { "type": "text", "id": "caption", "label": "Caption", "info": "Shown on hover. Keep it to one short line." }, { "type": "text", "id": "credit", "label": "Credit", "info": "Designer or studio name, if the swing is in their project." }, { "type": "text", "id": "alt", "label": "Alt text", "info": "Describe the image for screen readers and search engines." } ] } ], "max_blocks": 12, "presets": [ { "name": "Instagram gallery", "blocks": [ { "type": "post" }, { "type": "post" }, { "type": "post" }, { "type": "post" } ] } ] } {% endschema %}