Adding metadata descriptions

In order to add descriptions generated from image metadata, you need to add the <fsi-imagegrid-template> tag to your FSI ImageGrid:

Adding the template tag:
<fsi-imagegrid style="text-align:center;width:100%;height:100%;"
  dir="images/samples"
  cellWidth="240"
  cellHeight="231"
>
  <fsi-imagegrid-template class="fsi-image-grid-template" style="display:none">
    <div class="myImageGridImage" >
      <img class="fsi-image-grid-image"/>
    </div>
    <div class="myImageGridTitle">
     ###image.filename###
    </div>
  </fsi-imagegrid-template>
</fsi-imagegrid>

This adds the image file name below the image. All metadata which can be defined in the Metadata tab of the FSI Server Web Interface can be added to the FSI ImageGrid.

A more elaborate example:

Adding more metadata:
<fsi-imagegrid style="text-align:center;width:100%;height:100%;"
  dir="images/samples"
  cellWidth="240"
  cellHeight="231"
>
  <fsi-imagegrid-template class="fsi-image-grid-template" style="display:none">
    <div class="myImageGridTitle">
      # ###image.number###<span>###image.filename###</span>
    </div>
    <div class="myImageGridImage" >
      <img class="fsi-image-grid-image"/>
    </div>
    <div class="myImageGridText" >
      <span>
        Dimension: ###image.width### x ###image.height###<br/>
        Size: ###general.size###<br/>
        Last Modified: ###general.lastmodified###<br/>
        Credit: ###iptc.Credit###
      </span>
    </div>
  </fsi-imagegrid-template>
</fsi-imagegrid>

This way, a title with the image number and image filename would be displayed above the image while the dimensions, size, last modified date and the IPTC credit are displayed below each image.

Example​

Example