Skip to main content

Image download in different sizes

Download Option

This tutorial will show you how to add a multi-size download option to an image grid.

Create an image grid​

Go to the folder you want to publish as a picture grid and select the Publish to Web tab.

In the Preferences tab on the right, select one of the image grid options. For this example, we have selected Medium Image Grid.

Download Option Preset

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

If you want to view the preview in a larger window, simply open the context menu next to your source code and select Open result in new window.

Download Options

When you are finished, simply copy the source code to your website using one of the following options

  • copy the source code as an entire HTML5 document

  • copy only the code that needs to go in the body of your HTML5 document, and copy the Required Scripts section separately to the head of your document.

You can find a complete working HTML file example in the tutorial resources on GitHub.

<fsi-imagegrid
  style="text-align:center;width:100%; height:800px;"
  dir="sample-images/Collection"
  cellWidth="360"
  cellHeight="224"
  preloadCount="60"
  debug="true"
  useQuickZoom="false"
  onCellClick="openDownloadModal"
  downloadTargetFrame="_self">
  <fsi-imagegrid-template style="display:none">
    <div class="myImageGridTitle">
      <span>###iptc.Caption###<br /><br /></span>
    </div>
    <div class="myImageGridImage">
      <img class="fsi-image-grid-image" />
    </div>
    <div class="myImageGridText">
      <span> ###iptc.FSI Extra###<br /> </span>
    </div>
  </fsi-imagegrid-template>
</fsi-imagegrid>

For the sake of simplicity, we have used the Materialize CSS framework for demonstration purposes. You can, of course, use whatever you prefer and adapt the example accordingly.

The fsi-imagegrid tag we included in the example looks like the one above.

It's important to set the onCellClick="openDownloadModal" parameter to specify that the download option popup should open on click.

JavaScript content for the popup and the download​

You can find a complete working JS file example in the tutorial resources on GitHub.

First we add the click events:

document.addEventListener('DOMContentLoaded', function (event) {
  // add click events
  var downBtns = document.getElementsByClassName('download-btn');
  for (var i = 0; i < downBtns.length; i++) {
    downBtns[i].addEventListener('click', downloadImage);
  }
});

The openDownloadModal function defines the sizes that are downloaded and allows you to add a custom width and height field.

It also takes care of the thumbnail that is displayed in the top right corner.

function openDownloadModal(evt, oCell) {
  // change sizes
  var width1 = oCell.sourceWidth;
  var height1 = oCell.sourceHeight;
  var width2 = Math.round(width1) / 2;
  var height2 = Math.round(width2 / (width1 / height1));
  var width4 = Math.round(width1) / 4;
  var height4 = Math.round(width4 / (width1 / height1));

  var dss;
  dss = document.getElementById('dsSize1');
  dss.setAttribute('data-index', oCell.nIndex);
  dss.setAttribute('data-format', 'jpeg');
  dss.setAttribute('data-width', width4);
  dss.setAttribute('data-height', height4);
  dss.gridInstance = this;
  dss.addParameters = {quality: 90};
  dss.innerText = width4 + ' x ' + height4;

  dss = document.getElementById('dsSize2');
  dss.setAttribute('data-index', oCell.nIndex);
  dss.setAttribute('data-format', 'jpeg');
  dss.setAttribute('data-width', width2);
  dss.setAttribute('data-height', height2);
  dss.gridInstance = this;
  dss.addParameters = {quality: 90};
  dss.innerText = width2 + ' x ' + height2;

  dss = document.getElementById('dsSize5');
  dss.setAttribute('data-index', oCell.nIndex);
  dss.setAttribute('data-format', 'source');
  dss.setAttribute('data-width', width1);
  dss.setAttribute('data-height', height1);
  dss.gridInstance = this;
  dss.innerText = width1 + ' x ' + height1;

  dss = document.getElementById('dsSize6');
  dss.setAttribute('data-index', oCell.nIndex);
  dss.setAttribute('data-format', 'png');
  dss.setAttribute('data-width', 'dsCustomWidth');
  dss.setAttribute('data-height', 'dsCustomHeight');
  dss.setAttribute('data-max-width', width1);
  dss.setAttribute('data-max-height', height1);
  dss.gridInstance = this;
  dss.addParameters = {effects: 'pad(CC,FFFF)'};

  dss = document.getElementById('dsCustomWidth');
  dss.max = width1;

  dss = document.getElementById('dsCustomHeight');
  dss.max = height1;

  // preview img
  var dpi = document.getElementById('downloadPreviewImg');
  var previewURL = this.getImageDownloadURL(oCell.nIndex, 80, 'jpeg');
  dpi.src = previewURL;

  var elems = document.getElementById('downloadSelection');
  var instances = M.Modal.init(elems, {
    dismissible: true,
    preventScrolling: false,
  });
  instances.open();
}

The function downloadImage ensures the correct download:

function downloadImage(evt) {
  if (evt.srcElement) {
    var dsElem = evt.srcElement.getAttribute('data-size-elem');

    var sizeElem = document.getElementById(dsElem);
    if (sizeElem) {
      var format = sizeElem.getAttribute('data-format');

      if (
        format !== 'source' &&
        isNaN(sizeElem.getAttribute('data-width')) === false
      ) {
        var addParams =
          sizeElem.addParameters !== undefined ? sizeElem.addParameters : {};
        sizeElem.gridInstance.downloadImage(
          sizeElem.getAttribute('data-index'),
          sizeElem.getAttribute('data-width'),
          format,
          addParams,
        );
      } else if (
        format !== 'source' &&
        isNaN(sizeElem.getAttribute('data-width')) === true
      ) {
        var addParams =
          sizeElem.addParameters !== undefined ? sizeElem.addParameters : {};
        var widthId = sizeElem.getAttribute('data-width');
        if (widthId) {
          var width = parseInt(document.getElementById(widthId).value);
          var maxWidth = sizeElem.getAttribute('data-max-width');
          width = width > maxWidth ? maxWidth : width;
          addParams.width = width;
        }
        var heightId = sizeElem.getAttribute('data-height');
        if (heightId) {
          var height = parseInt(document.getElementById(heightId).value);
          if (height && height != '') {
            var maxHeight = sizeElem.getAttribute('data-max-height');
            height = height > maxHeight ? maxHeight : height;
            addParams.height = height;
          }
        }

        sizeElem.gridInstance.downloadImage(
          sizeElem.getAttribute('data-index'),
          width,
          format,
          addParams,
        );
      } else {
        sizeElem.gridInstance.downloadSourceImage(
          sizeElem.getAttribute('data-index'),
        );
      }
    }
  }
}

HTML content for the Materialize download pop-up​

You can find a complete working HTML file example in the tutorial resources on GitHub.

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

<div id="downloadSelection" class="modal">
  <div class="modal-content">
    <div class="row">
      <div class="col s4"><h4>Download Image</h4></div>
      <div class="col s8 right-align"><img id="downloadPreviewImg" /></div>
    </div>
    <div class="row">
      <div class="col s12">
        Choose the righ t dimension for downloading or define your own.
      </div>
    </div>
    <div class="row">
      <div class="col s12"><hr /></div>
    </div>
    <div class="row">
      <div class="col s3 center-align">
        <h5 id="dsSize1"></h5>
        <h6>Small Size</h6>
        <p>JPEG</p>
        <p>Quality: 90%</p>
      </div>
      <div class="col s3 center-align">
        <h5 id="dsSize2"></h5>
        <h6>Medium Size</h6>
        <p>JPEG</p>
        <p>Quality 90%</p>
      </div>
      <div class="col s3 center-align">
        <h5 id="dsSize5"></h5>
        <h6>Original size</h6>
        <p>Original file type</p>
        <p>Original Quality</p>
      </div>
      <div class="col s3 center-align" id="dsSize6">
        <div class="input-field col s6">
          <input
            type="number"
            min="1"
            max="1000"
            placeholder="px"
            id="dsCustomWidth"
            class="autocomplete" />
          <label for="autocomplete-input">Width</label>
        </div>
        <div class="input-field col s6">
          <input
            type="number"
            min="1"
            max="1000"
            placeholder="px"
            id="dsCustomHeight"
            class="autocomplete" />
          <label for="autocomplete-input">Height</label>
        </div>
        <h6>PNG</h6>
        <p>with white padding</p>
      </div>
    </div>
    <div class="row">
      <div class="col s3 center-align">
        <a
          class="waves-effect waves-light btn teal darken-1 download-btn"
          data-size-elem="dsSize1"
          >Download</a
        >
      </div>
      <div class="col s3 center-align">
        <a
          class="waves-effect waves-light btn teal darken-1 download-btn"
          data-size-elem="dsSize2"
          >Download</a
        >
      </div>
      <div class="col s3 center-align">
        <a
          class="waves-effect waves-light btn teal darken-1 download-btn"
          data-size-elem="dsSize5"
          >Download</a
        >
      </div>
      <div class="col s3 center-align">
        <a
          class="waves-effect waves-light btn teal darken-1 download-btn"
          data-size-elem="dsSize6"
          >Download</a
        >
      </div>
    </div>

    <div class="row">
      <div class="col s12"><hr /></div>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

CSS content for styling the image grid​

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

fsi-imagegrid .fsi-imagegrid-root .myImageGridTitle {
  padding: 2px 6px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  background-color: #eee;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

fsi-imagegrid .fsi-imagegrid-root .myImageGridTitle > span {
  float: center;
  line-height: inherit;
}

div.fsi-imagegrid-inner-container > div {
  border: 1px solid #eeee;
}
fsi-imagegrid .fsi-imagegrid-root .myImageGridText {
  padding: 4px;
  font-size: 12px;
  text-align: center;
  height: 50px;
  background-color: #eee;
  color: #666;
  overflow: hidden;

  white-space: nowrap;
}
fsi-imagegrid .fsi-imagegrid-root .myImageGridText > span {
  display: inline-block;
  text-align: center;
}

fsi-imagegrid div.fsi-imagegrid-root .myImageGridImage {
  height: calc(100% - 70px);
  background-color: #eee;
  text-align: center;
  overflow: hidden;
}

fsi-imagegrid .fsi-imagegrid-root .fsi-imagegrid-inner-container > div {
  margin: 4px;
}

fsi-imagegrid .fsi-imagegrid-root .fsi-image-grid-image-parent img {
  vertical-align: top;
}

div.fsi-imagegrid-inner-container > div:hover {
  border-color: #00897b;
  -webkit-box-shadow: 0px 0px 0px 2px #00897b;
  box-shadow: 0px 0px 0px 2px #00897b;
}