<fsi-imagegrid style="text-align:center;width:100%;height:100%;"
  dir=""
  cellWidth="240"
  cellHeight="231"
  %%Attributes%%
>

		<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###
				</span>
			</div>
		</fsi-imagegrid-template>

	</fsi-imagegrid>

<style type="text/css">
    fsi-imagegrid .fsi-imagegrid-root .myImageGridTitle{
      padding:1px 6px;
      font-size:14px;
      text-align:left;
      height:20px;
      line-height:20px;
      background-color:#111;
      color:#FFF;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }

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

    fsi-imagegrid .fsi-imagegrid-root .myImageGridText{
      border-top: 1px solid #666;
      padding:4px;
      font-size:12px;
      text-align:center;
      height:50px;
      background-color:#EEE;
      color:#000;
      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:#DDD;
      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;
    }
</style>
