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.
For example, you can hide the cookie banner with the following CSS:
[data-preview-mode] .cookie-banner {
display: none;
}
For JavaScript animations or other features, you can use the data-preview-mode
attribute to disable them:
const isPreviewMode = document.documentElement.dataset.previewMode === "true";
if (!isPreviewMode) {
// Run your animations or other features
}