Gallery Manager
Gallery Manager is a unified system for creating and managing image, video, PDF, and combined media galleries. Each gallery type supports multiple layout options and is embeddable via shortcodes.
Gallery Types
Luminal CMS supports four gallery types, each stored in its own directory:
- Image Galleries —
admin/data/galleries/images/{slug}.json - Video Galleries —
admin/data/galleries/videos/{slug}.json - PDF Galleries —
admin/data/galleries/pdfs/{slug}.json - Combined Galleries —
admin/data/galleries/combined/{slug}.json(mix of all media types)
Important: The gallery type in the JSON must match its directory. A video gallery stored in galleries/images/ will cause rendering failures.
Creating a Gallery
- Open Gallery Manager from the navigation.
- Select the gallery type tab (Images, Videos, PDFs, or Combined).
- Click + New Gallery.
- Enter a title and slug (auto-generated from title).
- Choose a layout: Grid, Masonry, or Rows.
- Set the columns count (grid/masonry) or row height (rows layout).
- Click Create.
Layout Options
Grid
Equal-sized cells in a fixed column grid. Best for uniformly-sized media. Set the column count (2-6) to control the grid density.
Masonry
Pinterest-style layout where items maintain their aspect ratio and flow into columns. Great for mixed-orientation photos. Column count determines the number of vertical tracks.
Rows
Horizontal rows where items are sized to fill the row width while maintaining aspect ratio. Set the target row height in pixels (default: 240px).
Adding Media Items
After creating a gallery, use the Media Browser to add items:
- The media browser appears as an iframe panel below the gallery editor.
- Navigate to the appropriate media folder (
media/images/,media/videos/, etc.). - Click on files to add them to the gallery.
- Items appear in the gallery item list above.
Media Browser Tips
- Single click in iframe mode adds the item to the gallery.
- Ctrl+click or Shift+click toggles selection for bulk operations (delete, move).
- Right-click opens a context menu with Move to Folder option.
- Use the upload button to add new files directly.
Thumbnail System
Thumbnails are automatically generated and cached:
- Thumbnails live in
.cache/subdirectories next to source files - Format:
{source-dir}/.cache/{basename}.jpg - Generated via
/admin/ajax/media-cache.php - Images use GD, videos use ffmpeg for frame extraction
- Gallery renderers check
.cache/with fallback on error
Embedding Galleries
Embed galleries in any page using shortcodes:
[[image-gallery:my-photos]]
[[video-gallery:demo-reel]]
[[pdf-gallery:documents]]
[[gallery:mixed-media]]The shortcode type must match the gallery type. is specifically for combined galleries.
Gallery JSON Structure
{
"type": "image-gallery",
"title": "My Photos",
"slug": "my-photos",
"layout": "masonry",
"columns": 3,
"rowheight": 240,
"items": [
"media/images/photo1.jpg",
"media/images/photo2.jpg"
]
}Path format: Item paths are stored WITHOUT a leading slash (media/images/foo.jpg, not /media/images/foo.jpg). Renderers prepend the slash. Do not prepend /media/ — that causes double paths.
Reordering Items
Drag and drop items in the gallery editor to reorder them. The order in the items array determines the display order on the frontend.
Tips for Optimal Media
- Images: Use JPEG for photos, PNG for graphics with transparency. Optimize file sizes before uploading.
- Videos: MP4 with H.264 encoding provides the best browser compatibility. Keep file sizes reasonable.
- PDFs: Thumbnails are generated as placeholder images. Consider file size for download performance.
- Aspect ratios: Masonry layout handles mixed ratios best. Grid works well with uniform ratios.