This tutorial shows you how you can display images with meta data in a dynamic grid.
The tutorial Adding meta data to images in FSI Server shows you how to add the data to the images.
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 on the right, select the option Image Grid with meta data.
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.
We have also added autocrop=”cc” which automatically fits the images into the tiles without any border, and useQuickZoom & useTouchZoom for added zoom while hovering over an image or pinch zooming on touchscreen-enabled devices.
The tag contains the template for the text that is shown above and below the image. In order to show the meta data fields we have added, Caption, Credit and FSI Extra, we change the tag the following way:
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:
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