Skip to content

Home

Jump to bottom
risingisland edited this page Sep 19, 2026 · 1 revision

AnyGal

AnyGal is a flexible image gallery plugin for GetSimple CMS CE that lets you create galleries using your own HTML templates.

Instead of being tied to a particular gallery layout or JavaScript library, AnyGal provides a simple template system with image placeholders. The resulting HTML is generated from those templates and can be inserted into page content with a shortcode or directly into a theme template with PHP.

Features

  • Create multiple image galleries.
  • Give each gallery its own unique slug.
  • Build the gallery markup using your own HTML templates.
  • Separate wrapper and item templates.
  • Use the gallery from:
    • Page content with a shortcode.
    • Theme templates with a PHP function.
  • Built-in image browser for selecting images already in data/uploads/.
  • Upload new images directly from the gallery editor.
  • Browse upload subfolders.
  • Search uploaded images.
  • Select multiple images at once.
  • Drag-and-drop image reordering.
  • Move images up or down.
  • Store an image title and description.
  • Optional custom image data field.
  • Automatically uses GetSimple thumbnails where available.
  • Generates thumbnails when necessary.
  • Supports:
    • JPG / JPEG
    • PNG
    • GIF
    • WebP
  • Maximum upload size of 10 MB per image.
  • Gallery data is stored as individual JSON files.
  • Gallery data is kept outside the public uploads directory.
  • Uses GetSimple nonce and session checks for administrative AJAX operations.
  • Image titles, descriptions and custom data are HTML-escaped when rendered.
  • Includes English and Spanish translations.

Installation

  1. Download or copy the AnyGal plugin directory and AnyGal.php file into:

    plugins/

  2. The resulting structure should look similar to:

    plugins/
├── AnyGal.php
└── AnyGal/
    ├── .htaccess
    ├── assets/
    │   ├── .htaccess
    │   └── admin.js
    └── lang/
        ├── .htaccess
        ├── en_US.php
        └── es_ES.php

  3. Log in to the GetSimple administration area.

  4. Open Plugins and activate AnyGal.

  5. A new AnyGal / Galleries administration area will be available in the admin navigation.

The plugin automatically creates its data directory when required:

data/other/AnyGal/

Gallery JSON files are stored there and the directory is protected from direct web access.

Creating a Gallery

Open AnyGal → Galleries and choose New Gallery.

Gallery Slug

The slug identifies the gallery and is used by both the shortcode and PHP function.

For example:

portfolio

or:

summer-2026

Allowed characters are:

  • Lowercase letters
  • Numbers
  • Hyphens (-)
  • Underscores (_)

Spaces are converted to hyphens.

The gallery slug cannot be changed after the gallery has been created.

Templates

Each gallery has two HTML templates:

Wrapper Template

The wrapper contains the overall gallery markup.

The special placeholder:

{{img-tpl}}

is replaced with the generated image items.

Example:

<div class="my-gallery">
    {{img-tpl}}
</div>

Item Template

The item template is repeated once for every image in the gallery.

Example:

<figure class="gallery-item">
    <a href="{{img-full}}">
        <img src="{{img-thumb}}" alt="{{img-alt}}">
    </a>
    <figcaption>
        <h3>{{img-title}}</h3>
        <p>{{img-desc}}</p>
    </figcaption>
</figure>

AnyGal combines the two templates when the gallery is rendered.

For example:

Wrapper:
<div class="my-gallery">
    {{img-tpl}}
</div>

Item:
<figure>
    <img src="{{img-thumb}}" alt="{{img-alt}}">
</figure>

produces a structure similar to:

<div class="my-gallery">
    <figure>
        <img src="..." alt="...">
    </figure>
    <figure>
        <img src="..." alt="...">
    </figure>
    <figure>
        <img src="..." alt="...">
    </figure>
</div>

Available Placeholders

The following placeholders can be used in the Item Template.

Placeholder Description
{{img-full}} URL of the full-size image
{{img-thumb}} URL of the thumbnail. Falls back to the full-size image if no thumbnail exists
{{img-data}} Optional custom image data field
{{img-title}} Image title
{{img-desc}} Image description
{{img-alt}} Alt text — uses the image title, or the filename if no title is supplied

Example

<a href="{{img-full}}" class="gallery-image">
    <img
        src="{{img-thumb}}"
        alt="{{img-alt}}"
        title="{{img-title}}"
    >
</a>

Optional Image Data Field

A gallery can enable the image data field.

When enabled, each image receives an additional field that can contain custom information such as:

  • CSS classes
  • Tags
  • IDs
  • Custom metadata
  • Links
  • Other template-specific values

Use:

{{img-data}}

in the Item Template to output it.

For example:

<div class="gallery-item {{img-data}}">
    <img src="{{img-thumb}}" alt="{{img-alt}}">
</div>

The value is escaped before being inserted into the HTML.

Adding Images

After saving a gallery, open its Images tab.

Click Add Images.

The image manager provides two options:

Browse

Browse images already stored in:

data/uploads/

Subfolders are supported.

You can:

  • Navigate folders.
  • Search for images.
  • Select multiple images.
  • Add the selected images to the gallery.

Upload

Images can also be uploaded directly from the gallery editor.

Supported formats:

JPG
JPEG
PNG
GIF
WebP

Maximum size:

10 MB per image

Uploaded images are placed in the GetSimple uploads directory and can subsequently be reused by other galleries.

Removing an image from a gallery does not delete the physical image file from data/uploads/.

Managing Gallery Images

Each image in a gallery can have:

  • Title
  • Description
  • Optional custom data

Images can also be reordered.

Reordering

You can reorder images using:

  • Drag and drop.
  • The up button.
  • The down button.

The order is saved automatically.

Removing Images

Removing an image only removes it from the current gallery.

The original file remains in:

data/uploads/

This allows the same image to be used in other galleries.

Using a Gallery in Page Content

AnyGal provides the following shortcode:

[get-anygal=SLUG]

For example, if the gallery slug is:

portfolio

use:

[get-anygal=portfolio]

The shortcode can be placed directly into GetSimple page content.

Quoted forms are also supported, for example:

[get-anygal="portfolio"]

Using a Gallery in a Theme

AnyGal also provides the PHP function:

get_anygal('SLUG');

For example:

<?php get_anygal('portfolio'); ?>

This outputs the rendered gallery directly.

You can therefore place a gallery inside a theme template, for example:

<section class="portfolio">
    <?php get_anygal('portfolio'); ?>
</section>

Adding CSS and JavaScript

AnyGal intentionally leaves the gallery presentation to the template.

This means you can use your own:

  • CSS
  • JavaScript
  • Lightbox
  • Slider
  • Masonry layout
  • Responsive grid
  • Carousel
  • Lazy-loading solution

For example, an image template could contain:

<div class="gallery-item">
    <a href="{{img-full}}" data-lightbox="gallery">
        <img src="{{img-thumb}}" alt="{{img-alt}}">
    </a>
</div>

AnyGal itself does not require a particular front-end gallery library.

Security

AnyGal includes several protections for administrative operations and rendered output.

Administrative access

AJAX operations require a valid GetSimple administrator session and GetSimple nonce verification.

Image validation

Uploaded files are checked using their actual image information rather than relying solely on the filename extension.

Supported image types are restricted to:

JPEG
PNG
GIF
WebP

Upload size

Each uploaded image is limited to:

10 MB

Path handling

Upload paths are cleaned and validated to prevent gallery records from referencing files outside the GetSimple uploads directory.

Output escaping

Image URLs, titles, descriptions, custom data and alt text are escaped before being inserted into the generated HTML.

Template PHP

Templates are treated as HTML/text templates.

PHP code placed inside a template is not executed.

This is intentional: templates are processed using placeholder replacement rather than being evaluated as PHP.

Data Storage

Each gallery is stored as a separate JSON file:

data/other/AnyGal/<slug>.json

For example:

data/other/AnyGal/portfolio.json

A gallery contains its template definitions and image records.

A simplified example is:

{
    "slug": "portfolio",
    "wrapper": "<div class=\"gallery\">{{img-tpl}}</div>",
    "item": "<img src=\"{{img-thumb}}\" alt=\"{{img-alt}}\">",
    "images": [
        {
            "id": "a1b2c3d4",
            "file": "portfolio/image.jpg",
            "data": "",
            "title": "Example image",
            "desc": "Example description"
        }
    ]
}

The exact JSON structure may change in future versions.

Backup and Migration

Because gallery definitions are stored as JSON files, backing up the following directories is recommended:

data/other/AnyGal/
data/uploads/
data/thumbs/

The gallery JSON files alone do not contain the actual image files.

If a site is migrated, restore the AnyGal JSON data together with the corresponding files in the GetSimple uploads directory.

Deleting a Gallery

Deleting a gallery removes its gallery definition from:

data/other/AnyGal/

It does not delete images from:

data/uploads/

This prevents accidental deletion of images that may be used elsewhere on the website.

Example Gallery Templates

Simple Responsive Grid

Wrapper

<div class="gallery-grid">
    {{img-tpl}}
</div>

Item

<figure class="gallery-item">
    <a href="{{img-full}}">
        <img src="{{img-thumb}}" alt="{{img-alt}}" loading="lazy">
    </a>

    {{img-title}}
</figure>

Figure with Caption

Wrapper

<div class="photo-gallery">
    {{img-tpl}}
</div>

Item

<figure class="photo-gallery__item">
    <a href="{{img-full}}">
        <img
            src="{{img-thumb}}"
            alt="{{img-alt}}"
            loading="lazy"
        >
    </a>

    <figcaption>
        <strong>{{img-title}}</strong>
        <span>{{img-desc}}</span>
    </figcaption>
</figure>

Custom Class Using Image Data

Enable the image data field and use:

<div class="gallery-item {{img-data}}">
    <a href="{{img-full}}">
        <img src="{{img-thumb}}" alt="{{img-alt}}">
    </a>
</div>

You could then enter values such as:

featured
portrait
landscape

for individual images.

Internationalization

AnyGal currently includes:

English (en_US)
Spanish (es_ES)

Language files are located in:

AnyGal/lang/

The plugin uses the standard GetSimple i18n system.

File Structure

AnyGal.php
AnyGal/
├── .htaccess
├── assets/
│   ├── .htaccess
│   └── admin.js
└── lang/
    ├── .htaccess
    ├── en_US.php
    └── es_ES.php

The plugin dynamically creates:

data/other/AnyGal/

when required.

Notes

  • AnyGal stores gallery definitions separately from the physical image files.
  • Removing an image from a gallery does not remove the image from GetSimple.
  • The gallery slug is permanent after creation.
  • Templates contain HTML and placeholders; PHP is not executed inside them.
  • Front-end styling and gallery behaviour are intentionally controlled by the site/theme rather than by AnyGal.
  • Existing GetSimple thumbnails are used where available, reducing unnecessary thumbnail generation.

Clone this wiki locally