The Live Preview panel renders your Gallery inside the editor using the same code that displays it on the front end. As you edit settings and save, the preview updates to reflect the current state — so you can see exactly how your Gallery will look without switching tabs or visiting the published page.
Location Gallery editor → Live Preview panel
How It Works #
The Live Preview panel appears as a metabox in the Gallery editor, alongside the items grid and settings. When the editor loads, FotoGrids fetches the rendered HTML for the current Gallery from a dedicated preview endpoint and displays it inside the panel. The preview uses the same rendering pipeline as the public shortcode — the same layout engine, the same CSS, the same Lightbox configuration.
Each time you save the Gallery (manually or via Autosave), the preview refreshes automatically. There is no need to click a refresh button — the update happens as soon as the save completes.
What the Preview Shows #
The preview renders the Gallery as it exists at the time of the last save. It reflects:
- The current layout and all display settings
- The items currently in the Gallery, in their saved order
- Captions, item types, and any per-item settings that affect display
- CSS applied via the Custom CSS field
Because the preview renders from saved data, changes you make to settings or items are not visible in the preview until you save.
The Lightbox is active in the preview panel. Clicking an item opens it in the Lightbox so you can check navigation, captions, and zoom behaviour without leaving the editor.
Unsaved Changes #
The preview always reflects the last saved state, not the current state of the editor. If you have made changes that have not yet been saved, the preview continues to show the previous version. Save the Gallery — using Update, Quick Save, or ⌘+S / Ctrl+S — to update the preview.
If Autosave is on, the preview refreshes automatically a few seconds after each change as autosave completes.
What the Preview Does Not Show #
The preview renders the Gallery as an authenticated admin user with no front-end context. A few things intentionally differ from the live page:
Permission gates — view restrictions set in the Gallery’s Permissions tab (such as “Only registered users”) are not enforced in the preview. The preview always renders the full Gallery regardless of who-can-view settings.
Cache — the preview always renders fresh from the database. It does not read from or write to the render cache, so it will not reflect a cached version and will not invalidate the cache.
Theme styles — the preview renders inside wp-admin, so fonts, colours, and spacing that come from your active front-end theme are not applied. Gallery-specific styles — layouts, hover effects, Lightbox appearance, item spacing — are rendered accurately using the CSS that ships with FotoGrids.
