Your First Gallery

Four steps: get photos in, describe them, save a display, paste the shortcode. About five minutes for a small batch.

1UploadDrag photos in2DescribeFill your fields3Build a displayPick photos + layout4PasteShortcode on a page
The whole workflow. Everything else in these docs is a detail of one of these four steps.

1. Upload some photos

Go to JMGallery › Upload and drag a folder of photos onto the drop zone. They upload two at a time with progress bars.

Before you drag anything in, fill the panel on the right with whatever these photos have in common — the album name, the year, the place. Every photo in the batch is saved with those values, so a hundred photos from one trip get described once instead of a hundred times.

Photos already in your Media Library can be pulled in from the picker further down the same screen. More in Adding photos.

2. Check your fields

JMGallery › Fields is where you decide what a photo record holds. Six fields are set up for you. Rename them, reorder them, delete the ones that do not fit your collection, add your own.

For each field you choose four things: whether it shows as a column in the library, whether it becomes a filter, whether it appears on the item page, and whether it can go in a caption. More in Custom fields.

3. Build a display

A display is a saved answer to two questions: which items, and what they look like. Go to JMGallery › Displays and click + New display.

  • Under Which items, filter on any field. Leave everything blank to show the whole library.
  • Under Layout, pick grid, masonry or list, then columns, spacing and corner radius.
  • Under Captions, tick the fields you want under or over each photo.
  • Click Preview to see it, then Save display.

4. Put it on a page

Saving gives the display a shortcode. Copy it and paste it into any page, post, or widget:

100 items
Image Galleries That Load Fast
Image Galleries That Load Fast
Custom Fields for Everyday Sites
Custom Fields for Everyday Sites
Elementor vs the Block Editor
Elementor vs the Block Editor
elementor-vs-the-block-editor-demo.webp
elementor-vs-the-block-editor-demo.webp
Building Post Grids Without Code
Building Post Grids Without Code
Backups You Will Actually Restore
Backups You Will Actually Restore
Speeding Up a Slow WordPress Site
Speeding Up a Slow WordPress Site
Choosing a Theme That Grows With You
Choosing a Theme That Grows With You
Getting Started With the Block Editor
Getting Started With the Block Editor
Looping Videos for Lobby Screens
Looping Videos for Lobby Screens
Adding Captions to Every Video
Adding Captions to Every Video
Cutting Short Videos for Social
Cutting Short Videos for Social
Animated Text That Grabs Attention
Animated Text That Grabs Attention
Colour Grading for a Consistent Brand
Colour Grading for a Consistent Brand
Removing Backgrounds Cleanly
Removing Backgrounds Cleanly
Exporting Images for the Web
Exporting Images for the Web
Batch Editing Product Photos
Batch Editing Product Photos
Building a Type Scale
Building a Type Scale
Self-Hosting Web Fonts
Self-Hosting Web Fonts
Line Length and Readability
Line Length and Readability
Pairing Fonts That Work Together
Pairing Fonts That Work Together
Accessible Contrast Made Easy
Accessible Contrast Made Easy
Building a Simple Colour Palette
Building a Simple Colour Palette
Using White Space With Purpose
Using White Space With Purpose

That is the gallery live. You can override any layout setting for one page without touching the saved display:

100 items
Image Galleries That Load Fast
Image Galleries That Load Fast
Custom Fields for Everyday Sites
Custom Fields for Everyday Sites
Elementor vs the Block Editor
Elementor vs the Block Editor
elementor-vs-the-block-editor-demo.webp
elementor-vs-the-block-editor-demo.webp
Building Post Grids Without Code
Building Post Grids Without Code
Backups You Will Actually Restore
Backups You Will Actually Restore
Speeding Up a Slow WordPress Site
Speeding Up a Slow WordPress Site
Choosing a Theme That Grows With You
Choosing a Theme That Grows With You

Where to go next