Displaying a grid with metadata

This tutorial shows you how to display images with metadata in a dynamic grid.

The Adding Metadata to Images in FSI Server tutorial shows you how to add the data to the images.

Creating an image grid

Go to the folder where you want to publish the image grid and select the Publish to Web tab.

Select Image Grid with meta data from the Preferences on the right.

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 see the preview in a larger window, just open the context menu next to your source code and select the option Open result in new window.

We have also added autocrop="cc", which will automatically crop the images into the tiles without any border, and useQuickZoom & useTouchZoom for additional zoom when hovering over an image or pinch-zoom on touch screen enabled devices.

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

<fsi-imagegrid
  style="text-align:center;width:100%;height:100%;"
  dir="sample-images/Collection"
  cellWidth="200"
  cellHeight="180"
  autoCrop="cc"
  useQuickZoom="true"
  useTouchZoom="true">
</fsi-imagegrid>

The tag contains the template for the text that will appear above and below the image. To display the metadata fields we have added, Caption, Credit and FSI Extra, we modify the tag as follows:

<fsi-imagegrid-template style="display:none">
  <div class="myImageGridTitle">
    <span>###iptc.Caption###</span>
  </div>
  <div class="myImageGridImage">
    <img class="fsi-image-grid-image" />
  </div>
  <div class="myImageGridText">
    <span>
      ###iptc.FSI Extra###<br /><br />
      Photo: ###iptc.Credit###<br /><br />
    </span>
  </div>
</fsi-imagegrid-template>

You can change the CSS styles below the fsi-imagegrid tag to your liking. Those styles define how the tiles and the text look like.

For the example we have changed the following:

fsi-imagegrid .fsi-imagegrid-root .myImageGridTitle {
  padding: 2px 6px;
  font-size: 14px;
  text-align: center;
  height: 20px;
  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;
}

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

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

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

you can copy the source code as an entire HTML5 document
you can 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.

Displaying a grid with metadata

Creating an image grid​

Creating an image grid