Mecha CMS

Mecha CMS blog and documentation.

Gallery Plugin

Updated: Sunday, 07 August 2016

Image galleries.

Image

Image thumbnails will be generated automatically by the thumbnail plugin where possible, if available.

{{gallery}}
  [1]: image-1.jpg
  [2]: image-2.jpg
  [3]: image-3.jpg
{{/gallery}}

With Image Caption

{{gallery}}
  [1]: image-1.jpg "Caption 1"
  [2]: image-2.jpg "Caption 2"
  [3]: image-3.jpg "Caption 3"
{{/gallery}}

Manual Thumbnail

{{gallery}}
  [1]: image-1.jpg | t/image-1.jpg "Caption 1"
  [2]: image-2.jpg | t/image-2.jpg "Caption 2"
  [3]: image-3.jpg | t/image-3.jpg "Caption 3"
{{/gallery}}

Custom Classes

Method 1

{{gallery.photo.family}}
  [1]: image-1.jpg "Caption 1"
  [2]: image-2.jpg "Caption 2"
  [3]: image-3.jpg "Caption 3"
{{/gallery}}

Result:

<div class="p gallery gallery-photo gallery-family">
  <div class="image-group">
    …
  </div>
</div>

Method 2

{{gallery class="photo family"}}
  [1]: image-1.jpg "Caption 1"
  [2]: image-2.jpg "Caption 2"
  [3]: image-3.jpg "Caption 3"
{{/gallery}}

Result:

<div class="p gallery photo family">
  <div class="image-group">
    …
  </div>
</div>

Custom Image Width and Height

{{gallery width="200" height="150"}}
  [1]: image-1.jpg "Caption 1"
  [2]: image-2.jpg "Caption 2"
  [3]: image-3.jpg "Caption 3"
{{/gallery}}

Other attributes will be treated as normal HTML attributes.

{{gallery path="path/to/folder"}}
{{gallery path="path/to/folder"}}
  [0]: image-0.jpg "Default Image"
{{/gallery}}

You can add custom image title and description in a txt file with the same name as the image name, stored in the same folder:

path/to/folder/
├── image-1.jpg
├── image-1.txt
└── t/
    └── image-1.jpg

Content of image-1.txt:

Title: Image Title
Description: Image description.

Manual thumbnail files can be stored in the t folder.


Toolbar Button

A toolbar button is available to quickly generates the gallery shortcode:

Image

Download Latest Version

Donation and Email Subscription