Preview Mode
You may want to hide certain elements or disable certain features in preview mode. For example, you may want to hide the cookie banner in preview mode, or disable animations such as page transitions.
This can be done in your backend templates as well as in your frontend code.
Backend
The Kirby Live Preview provides a previewMode content key that you can use to detect whether the current page is in preview mode. The key is true if the page is in preview mode and undefined (false) otherwise:
if ($page->previewMode()->isTrue()) {
// Page is in preview mode
}
Wrap the HTML in your snippets and template that you want to hide in a conditional statement that checks for the previewMode. For example, you can hide the cookie banner in preview mode:
<?php if ($page->previewMode()->isFalse()): ?>
<?php snippet('cookie-banner') ?>
<?php endif ?>
Frontend
The same page rendered as a preview embeds a data-preview-mode attribute in the document element (<html> tag). You can use this attribute to hide or disable elements in your frontend code.
/* Hide the cookie banner in preview mode */
[data-preview-mode] .cookie-banner {
display: none;
}
/* Disable animations in preview mode */
const isPreviewMode = document.documentElement.dataset.previewMode === "true";
if (!isPreviewMode) {
// Run your animations or other features
}
Link Navigation
Clicking a link inside the preview opens the matching Panel view instead of following the link. Four kinds of links take another route:
- Anchors with a fragment are handed to the browser. The test runs on the resolved URL, not on the
hrefyou wrote, so/about#teamcounts too – the preview navigates to that page rather than opening its Panel view. - Anchors marked with
data-preview-ignorebehave like ordinary links inside the preview. - Links to another origin open in a new browser tab.
- Links below
/assets/or/media/are swallowed – neither the Panel nor the preview moves.
<a href="<?= $page->url() ?>" data-preview-ignore>Stay in the preview</a>