Masonry Image Gallery section - liquid code

[WDC_Dev]

I was looking for a clean, easy way to add a Masonry Image gallery.
I put together this Image Gallery section, which is really simple and works well for a simple, basic, responsive Masonry Image Gallery.

To add this section

1. Go to Online Store -> go to the three dots to the left of Customize and click Edit Code

2. Sections -> Add a new section
3. Make sure liquid is checked, name it image-gallery.liquid
4. Copy/paste the liquid code below
5. Done, "Image Gallery" should now show up when you edit a page and click "Add section"

Screenshot of what it looks like

{%- if section.blocks -%}

<style>
  .image-gallery-wrapper {
    columns: 300px;
  }

  .image-gallery-wrapper .image-gallery-item img {
    width: 100%;
    margin-bottom: 1rem;
  }
</style>

  <section class="image-gallery">
  <div class="page-width">
  
  {%- if section.settings.custom_text_title -%}
    <h2 class="h1">{{ section.settings.custom_text_title }}</h2>
  {%- endif -%}
    
    <div class="image-gallery-wrapper">
      
      {% for blocks in section.blocks %}
        <div class="image-gallery-item">
          <img src="{{ blocks.settings.gallery_image | img_url: 'large' }}" alt="{{ section.settings.custom_text_title }} gallery image">
        </div>
      {% endfor %}
    
    </div>
    
  </div>
</section>
  
{%- endif -%}

{% schema %}
  {
    "name": "Image Gallery",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "id": "custom_text_title",
        "type": "text",
        "label": "Text box heading",
        "default": "Gallery Title"
      },
    ],
    "blocks": [
      {
        "name": "Gallery Image",
        "type": "gallery_image",
        "settings": [
          {
            "type": "image_picker",
            "id": "gallery_image",
            "label": "gallery image"
          }
        ]
      }
    ],
    "presets": [
    {
    "name": "Image Gallery",
    "category": "Image Gallery"
    }
    ]
  }
{% endschema %}

It's purposefully very simple. No links, lightboxes or any fancy code.
A good baseline to customize if you want, but it should just work following the simple instructions above.

CSS customizations
3 lines of CSS control the masonry layout and it's responsive without breakpoints! (it's magic! using the voodoo of css columns)
You can play with the columns: 300px; width to adjust column widths

If you want to adjust the horizontal spacing, add 

column-gap: 30px;

to .image-gallery-wrapper and adjust as needed. You'll want the column-gap and img margin-bottom to match for consistent horizontal and vertical spacing within the masonry layout if you adjust it
The img margin-bottom value controls the vertical spacing

[rajweb]

@

Hey @WDC_Dev ,

Your section for the Masonry Image Gallery is straightforward and functional. However, there are some improvements and adjustments you can make to enhance its functionality, compatibility, and adherence to best practices:

Suggested Adjustments:

1. CSS for Responsiveness: While using columns is a simple way to create a masonry layout, it may lack full browser compatibility or customization. Consider enhancing it with media queries for more control.

.image-gallery-wrapper {
  columns: 2;
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .image-gallery-wrapper {
    columns: 3;
  }
}

@media (min-width: 1024px) {
  .image-gallery-wrapper {
    columns: 4;
  }
}

.image-gallery-item img {
  width: 100%;
  margin-bottom: 1rem;
  display: block; /* Ensures no inline gaps */
}

2. Accessibility Enhancements: Add alt attributes dynamically per image block to ensure better accessibility. Replace the placeholder alt="{{ section.setting.custom_text_title }} gallery "image" with something more descriptive:

<img src="{{ blocks.settings.gallery_image | img_url: 'large' }}" alt="{{ blocks.settings.alt_text | default: section.settings.custom_text_title }}">

Add a corresponding setting for alt_text  in the schema:

{
  "type": "text",
  "id": "alt_text",
  "label": "Alt text",
  "default": "Gallery image"
}

3. Schema Validation Fix: Your schema includes a trailing comma after  "default": "Gallery Title", which might cause errors. Remove it:

{
  "id": "custom_text_title",
  "type": "text",
  "label": "Text box heading",
  "default": "Gallery Title"
}

4. Add Preview Support in the Editor: 

To preview the gallery without requiring all images to be uploaded:

json

"default": [
  {
    "type": "gallery_image",
    "settings": {
      "gallery_image": "https://via.placeholder.com/300"
    }
  }
]

5. Improve Loading Performance: Use a lower resolution for the gallery image preview to improve load times:

<img src="{{ blocks.settings.gallery_image | img_url: 'medium' }}" alt="{{ section.settings.custom_text_title }}">

6. Additional Schema Categories: Add categories or tags for better organization in the Shopify admin:

"presets": [
  {
    "name": "Masonry Image Gallery",
    "category": "Media"
  }
]

Final Version of the Code:

<style>
  .image-gallery-wrapper {
    columns: 2;
    column-gap: 1rem;
  }

  @media (min-width: 768px) {
    .image-gallery-wrapper {
      columns: 3;
    }
  }

  @media (min-width: 1024px) {
    .image-gallery-wrapper {
      columns: 4;
    }
  }

  .image-gallery-item img {
    width: 100%;
    margin-bottom: 1rem;
    display: block;
  }
</style>

<section class="image-gallery">
  <div class="page-width">
    {% if section.settings.custom_text_title %}
      <h2 class="h1">{{ section.settings.custom_text_title }}</h2>
    {% endif %}
    
    <div class="image-gallery-wrapper">
      {% for block in section.blocks %}
        <div class="image-gallery-item">
          <img src="{{ block.settings.gallery_image | img_url: 'large' }}" alt="{{ block.settings.alt_text | default: section.settings.custom_text_title }}">
        </div>
      {% endfor %}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Image Gallery",
  "settings": [
    {
      "id": "custom_text_title",
      "type": "text",
      "label": "Text box heading",
      "default": "Gallery Title"
    }
  ],
  "blocks": [
    {
      "type": "gallery_image",
      "name": "Gallery Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "gallery_image",
          "label": "Gallery Image"
        },
        {
          "type": "text",
          "id": "alt_text",
          "label": "Alt text",
          "default": "Gallery image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Masonry Image Gallery",
      "category": "Media"
    }
  ]
}
{% endschema %}

This version enhances the functionality and usability of your masonry image gallery while improving its visual appeal and loading performance.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[HStevensArt]

Hay there, any way we could add a line or two in the code to make the images follow the order of the drop down on the edit page?

Mine lets me order 6-8 photos vertically(hate this), and I have set it to 4 images across. After the 8th image in the column it then throws the 9th image in the 2nd column. I want to order my image Left to Right Bottom to Top. Top being the newest image, bottom being the oldest. Like instagram.

[rajweb]

@HStevensArt ,

Yes, I can help you with that! I can adjust the code to ensure your images follow the order you’re looking for—displaying them Left to Right, Bottom to Top, similar to Instagram.

Please feel free to reach out to me via email to discuss this further. Looking forward to hearing from you soon. Thanks!

Best regards,

Rajat