This tutorial shows you how to add a download option with different sizes to an image grid.

Creating an Image Grid

Go to the folder you would like to publish as image grid and select the Publish To Web tab.

In the Presets tab on the right, select on of the Image Grid options. For the sample we have chosen Medium Image Grid.

Change the output dimension and cellWidth & cellHeight to your liking. In the preview window you can always see the changes immediately.

If you would like to view the preview in a bigger window, just open the context menu next to Your Source Code and choose the option Open result in new window.

When you are done, just copy the source code to your website with one of the following options:

  • you can copy the source code as a complete HTML5 document
  • you can only copy the code which needs to go in the body of your HTML5 document and copy the section in Required Scripts to the head of your document seperately
Copy to Clipboard

In order to simplify things we have used the CSS framework Materialize for demonstration purposes. You can of course use whatever you prefer and adapt the sample accordingly.

The <fsi-imagegrid> tag which we included in the sample looks like this:

It’s important to set the parameter onCellClick=”openDownloadModal” in order to define that on click the pop up with the download option opens.

Copy to Clipboard

This is how the JavaScript for the pop up and download looks like:

First we add the click events:

Copy to Clipboard

The function openDownloadModal defines the sizes that will be downloaded and enables you to add a custom width and custom height field.

It also takes care of the preview image which will be shown in the upper right.

Copy to Clipboard

The function downloadImage ensures the correct download:

Copy to Clipboard

The HTML for the Materialize download pop-up:

You can of course use something different to style the modal, this is only for demonstration purposes.

Copy to Clipboard

The CSS for styling the image grid:

This can of course be freely adapted to fit your needs.