dmWidgetGalleryGridPlugin

• In a console, from your project root dir, run:

git clone git://github.com/4levels/dmWidgetGalleryGridPlugin.git plugins/dmWidgetGalleryGridPlugin  

• In config/ProjectConfiguration.class.php, add dmWidgetGalleryGridPlugin to the list of enabled plugins:

class ProjectConfiguration extends dmProjectConfiguration
{  
  public function setup()  
  {  
    parent::setup();  
 
    $this->enablePlugins(array(  
      // your enabled plugins  
      'dmWidgetGalleryGridPlugin'  
    ));  

• In a console, from your project root dir, run:

php symfony dm:setup  

Add a gallery grid on the site

Just open the front tool bar "Add" menu, and drag&drop a gallery grid somewhere on your site.

Manage gallery images

Medias tab

Open the MEDIA right panel, then drag&drop images into gallery dialog.
You can set an alt attribute to each image.
To add a link to an image, you can :

• drag&drop a link to the field from the left PAGES panel
• write a full url to another site

Thumbnails tab

Here you can choose the total width and height of the gallery grid. A resize method and JPG quality is proposed, exactly like for the Media Widget. You have to assign a valid grid size, defined as rows x columns, eg. 3 x 3. The margin field is used to space the thumbnails. The actual thumbnail size is calculated by the width/height, cols/rows and margin values. The Zoom size fields are used to set the image size in colorbox after clicking a thumbail.

Effects tab

Animation

Choose the way how colorbox should be opened: 'Elastic' is the default option as seen in Diem FrontEdit. Other values are 'Fade' or 'None'.

Speed

Sets the speed of the fade and elastic transitions, in milliseconds. Defaults to 350.

Opacity

The overlay opacity level. Range: 0 to 1. Defaults to .85

Config

More config options for the ColorBox. See the ColorBox documentation for all options and examples

Advanced tab

As usual, you can set one or many CSS classes to the widget.

Todo

• add the CSS declaration in a view.css file to make the li's float left. Workaround: add the following CSS rule to any of your website's CSS files:

.content_gallery_grid ol li {  
  float: left;  
}  

• review the code to use Yaml config files
• title & other meta data display of gallery items onmouseover and in zoomed state
• implement links

Planned features

• add paging for longer collections (exceeding rows x columns)
• adjustable grid size for visitors