Providing images for download in different sizes

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

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 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

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){

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

The function downloadImage ensures the correct download:

Copy to Clipboard

<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 right 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>
  <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

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

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;
}

The CSS for styling the image grid:

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

Providing images for download in different sizes

Creating an Image Grid

Cookies on this website allow us to:

Third-Party Cookies: