Join our HiFi mailing list to receive the latest news & updates

Image Grid Creator

Overview:

This snippet allows you to easily create a grid of images from the media tab.  You upload however many image you want, and then using custom fields, specify how wide you want the container to be and the number of images you want on each row.

All of the images are then automatically resized and placed in the grid.

Requirements:

No external requirements.

Components:

Template:

{% include 'common/image-grid.html' with ['images':this.media, 'width':this.custom.tych.width, 'layout':this.custom.tych.layout] %}

Installation:

To install this snippet, you just need to upload the file in the zip to your theme and include it in your desired template. All of the required CSS and image resizing is done inside the template itself.

You need to make sure that you're passing in variables for images, width and layout.  This means that you need to set up custom fields for width and layout.

  1. width: This is the width of the container that holds the images. Use a text field for this.
  2. layout: This is a textarea that explains how many images go on each row.

All the magic happens in the layout field.  The following would display 5 images total, 2 on the first line, 3 on the second:

2
3

It is also possible to indicate how tall you want each row to be in pixes. You can optionally do that by using a bar ("|") and then putting in the number of pixels you want. Here is an example that displays 6 images, 1 on the first row, 2 on the second, 3 on the third. The second row is set to 100px high:

1
2|100
3

Here is a screenshot showing the custom fields. Note that I am also using an "Enabled" dropdown so that it runs optionally.

Comments

  1. liz's avatar
    liz
    | Permalink
    This was great stuff. I was able to load all my images. Thank you so very much for sharing.