Image Gallery Plugin for Grails

deepak-mittal edited this page Oct 2, 2010 · 17 revisions
Clone this wiki locally

Image-Gallery plugin creates an Image gallery and also provides the UI to dynamically add/update Images. Plugin supports Multiple Image galleries to co-exist with different sets of Images/configurations. Changing layout of the Image Gallery is as simple as using any other tag of grails. (for now JPG or JPEG images are recommended)


Feature Implemented so far

  • Configurable gallery properties
  • CRUD for the Image Gallery/Image
  • No need to provide thumbnail, it gets created of its own.
  • Reuse Images in more than one gallery.
  • Multiple optional themes to show gallery with different look and feel.
  • Lightbox (optional), that allows user view current images in a lightbox i.e a popup.

Tag Usage:

This tag needs to be placed before the ‘show’ tag. It loads the required javascript files.

<ig:resources />


 <ig:show galleryInstance="${Gallery.get(1)}" theme="classic" options="height:400" showInLightBox="true"/>
  • galleryInstance: Required if gallery instance is to be used.
  • theme(optional): theme to be used like dots, fullscreen. Default is “classic”.
  • showInLightBox(optional): displays in a LightBox (a popup) if set to true.
  • options(optional): comma separated list of various Galleria options can be provided here. To know more visit: Galleria

1. Using Gallery instance

<ig:show options="height:500,preload:2,carousel:true,transition:'pulse',image_pan_smoothness:5" 
showInLightBox="true" galleryInstance="${galleryInstance}" />

2. Using images directly

 <ig:show options="height:500,preload:2,carousel:true,transition:'pulse',image_pan_smoothness:5">
    <g:each in="${images}" status="i" var="image">
      <ig:img src="${createLink(action: 'showImage', controller: 'image', id: image?.id)}" alt="${image?.description}" 
title="${image?.caption}" thumbnailSrc="${createLink(action: 'showImage', controller: 'image', id: image?.id,params:[thumbnail:true])}"/>

3. Images on the files system can also be referred as given below:-

<ig:show options="height:500,preload:2,carousel:true,transition:'pulse',image_pan_smoothness:5" showInLightBox="true">
      <ig:img src="/images/image1.jpg" alt="some description" title="Caption of the image"
      <ig:img src="/images/image10.gif" alt="some description" title="Caption of the image"

Note: Thumbnails of any image would be converted into jpeg format.

To customize the maxHeight and maxWidth of the thumbnail, make the following entries in the Config.groovy file


Future Releases:

  • Integration with Flickr.
  • Option to store images on File System instead of databse.

Known Issues:

  • Thumbnails of png images get distorted.