Natuurlijk! Hier is een stapsgewijze gids om een op maat gemaakte content preview-functionaliteit voor je Craft CMS-website te ontwikkelen, zodat gebruikers live previews kunnen bekijken van blogposts en pagina's voordat ze publiceren. --- ### 1. Overzicht van de aanpak - **Preview URL's instellen**: Maak speciale preview-URL's die de content in een preview-modus laden. - **Template-aanpassingen**: Zorg dat je templates de preview-parameters herkennen en de juiste content tonen. - **JavaScript-integratie**: Voeg scripts toe om de preview-functionaliteit te beheren. - **Plugins**: Gebruik (indien nodig) Craft plugins zoals [CP Field Inspect](https://plugins.craftcms.com/cp-field-inspect) of vergelijkbare tools om preview-ondersteuning te verbeteren. --- ### 2. Preview URL's configureren in Craft CMS **Stap 1: Defineer een preview route** Voeg in je `routes.php` (of via de route manager in de Control Panel) een route toe voor previews. Bijvoorbeeld: ```php // in craft/config/routes.php return [ 'preview/<slug:{slug}>' => 'entries/preview', ]; ``` **Stap 2: Maak een preview controller** Maak een aangepaste controller die de preview behandelt. Bijvoorbeeld: ```php namespace craft\controllers; use craft\web\Controller; use craft\elements\Entry; use yii\web\Response; class CustomPreviewController extends Controller { protected array|int|bool $allowAnonymous = true; public function actionPreview($slug): Response { // Zoek de entry op basis van slug en content type $entry = Entry::find() ->slug($slug) ->one(); if ($entry) { // Render de template met een preview flag return $this->renderTemplate('templates/entry', [ 'entry' => $entry, 'isPreview' => true, ]); } throw new \yii\web\NotFoundHttpException('Entry niet gevonden.'); } } ``` **Stap 3: Maak de preview URL voor gebruikers** In de Control Panel (CP) kun je aangepaste acties toevoegen die een preview-link genereren, bijvoorbeeld: `https://jouwsite.nl/preview/voorbeeld-slug` --- ### 3. Template-aanpassingen **Stap 1: Pas je template aan om preview-flag te herkennen** In je template (bijvoorbeeld `entry.twig`): ```twig {% if isPreview is defined and isPreview %} <div class="preview-banner">Voorbeeldmodus</div> {% endif %} ``` **Stap 2: Laad de juiste content afhankelijk van preview-status** Gebruik: ```twig {% set entryToShow = isPreview is defined and isPreview ? entry : entry.getLive() %} ``` (Indien je entries hebt die nog niet gepubliceerd zijn, gebruik `getDraft()` of `getPending()` indien nodig.) --- ### 4. JavaScript-integratie **Stap 1: Voeg een preview-knop toe** In je backend of frontend, voeg een knop toe die de preview-URL opent in een nieuw tabblad: ```twig <a href="{{ entry.url ~ '?preview=true' }}" target="_blank" class="btn preview-btn">Voorbeeld</a> ``` **Stap 2: Detecteer preview-modus en laad dynamisch** Je kunt JavaScript gebruiken om de preview-modus te detecteren en bijvoorbeeld: ```js if (window.location.search.includes('preview=true')) { document.body.classList.add('preview-mode'); // Eventueel extra scripts om de preview te verbeteren } ``` --- ### 5. Mogelijke plugin-aanbevelingen - **CP Field Inspect**: Geeft inzicht in de velden en content, handig voor previews. - **Drafts & Versions** (standaard in Craft): Zorg dat je draft previews kunt tonen. - **SuperTable, Neo, of andere veldtypes**: Om complexe contentstructuren te beheren en previews te ondersteunen. --- ### 6. Extra tips - Zorg dat je template veilig omgaat met drafts en niet-gelanceerde content. - Overweeg gebruik te maken van [Craft's native preview API](https://craftcms.com/docs/3.x/entries/overview#previewing-drafts) indien je geen uitgebreide maatwerk wilt. - Test de preview op verschillende devices en browsers. --- ### Samenvatting - Configureer routes voor previews. - Pas je templates aan om preview-parameters te herkennen. - Voeg preview-knoppen toe in de CP. - Gebruik JavaScript voor dynamisch gedrag. - Overweeg plugins voor extra functionaliteit. --- Indien je verdere hulp nodig hebt bij specifieke code of configuratie, laat het gerust weten!

Zeker! Ik help je graag met het ontwikkelen van een op maat gemaakte preview-functionaliteit voor Craft CMS. Hier is een complete handleiding: ## 1. Basisconfiguratie Craft CMS Eerst moet je ervoor zorgen dat je preview-functionaliteit is ingeschakeld in de Craft configuratie: ```php // config/general.php return [ 'enableTemplateCaching' => true, 'devMode' => true, // Zet dit op false in productie 'cpTrigger' => 'admin', 'useEmailAsUsername' => true, ]; ``` ## 2. Template-aanpassingen ### Base Template (templates/_base.twig) ```twig <!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title is defined ? title : siteName }}</title> {% if craft.app.request.isPreview %} <meta name="robots" content="noindex, nofollow"> {% endif %} </head> <body> {% block content %}{% endblock %} {% if craft.app.request.isPreview %} <div id="preview-banner" style="position: fixed; top: 0; left: 0; right: 0; background: #ff9900; color: white; padding: 10px; text-align: center; z-index: 9999;"> 🔄 Live Preview Modus - Niet-gepubliceerde content </div> {% endif %} </body> </html> ``` ### Blogpost Template (templates/blog/_entry.twig) ```twig {% extends '_base.twig' %} {% block content %} <article> <h1>{{ entry.title }}</h1> <p class="date">{{ entry.postDate|date('d-m-Y') }}</p> <div class="content"> {{ entry.bodyContent|raw }} </div> </article> {% endblock %} ``` ### Pagina Template (templates/pages/_entry.twig) ```twig {% extends '_base.twig' %} {% block content %} <div class="page-content"> <h1>{{ entry.title }}</h1> {% if entry.introText is not empty %} <div class="intro">{{ entry.introText }}</div> {% endif %} <div class="main-content"> {{ entry.mainContent|raw }} </div> </div> {% endblock %} ``` ## 3. JavaScript Preview Functionaliteit Maak een JavaScript-bestand voor de preview-logica: ```javascript // assets/js/preview.js class CraftPreview { constructor() { this.init(); } init() { // Controleer of we in de control panel zijn if (typeof Craft !== 'undefined' && typeof Craft.Preview !== 'undefined') { this.setupPreviewListeners(); } } setupPreviewListeners() { // Event listener voor preview-knop document.addEventListener('click', (e) => { if (e.target.matches('[data-action="preview"]') || e.target.closest('[data-action="preview"]')) { this.handlePreview(); } }); } handlePreview() { // Voeg custom preview-logica toe setTimeout(() => { this.updatePreviewWindow(); }, 1000); } updatePreviewWindow() { const previewFrame = document.querySelector('.preview-frame'); if (previewFrame) { // Voeg custom styling toe aan preview previewFrame.addEventListener('load', () => { const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document; this.injectPreviewStyles(previewDoc); }); } } injectPreviewStyles(doc) { const style = doc.createElement('style'); style.textContent = ` .preview-notice { position: fixed; top: 0; left: 0; right: 0; background: #ff9900; color: white; padding: 10px; text-align: center; z-index: 10000; font-family: sans-serif; } `; doc.head.appendChild(style); } } // Initialiseer preview functionaliteit new CraftPreview(); ``` ## 4. Plugin Aanbevelingen ### 1. **SEOmatic** (Aanbevolen) ```bash composer require nystudio107/craft-seomatic ``` - Voorziet meta-tags in previews - SEO-voorbeeld in preview modus ### 2. **Preparse Field** ```bash composer require mmikkel/preparse-field ``` - Handig voor het voorbereiden van content voor preview ### 3. **Custom CSS voor Control Panel** Voeg toe aan `config/general.php`: ```php 'cp' => [ 'css' => [ '/assets/css/cp-preview.css', ], ], ``` ## 5. Aanvullende Configuratie ### Routes configureren (config/routes.php) ```php <?php return [ 'blog/<slug:{slug}>' => ['template' => 'blog/_entry'], 'pagina/<slug:{slug}>' => ['template' => 'pages/_entry'], ]; ``` ### Preview Targets configureren Maak een `preview-targets.js` bestand: ```javascript // assets/js/preview-targets.js Craft.Preview = Craft.Preview.extend({ getTargets: function() { return [ { name: 'Desktop', width: 1200, height: 800 }, { name: 'Tablet', width: 768, height: 1024 }, { name: 'Mobile', width: 375, height: 667 } ]; } }); ``` ## 6. Control Panel Aanpassingen Voeg toe aan `templates/_includes/forms.twig`: ```twig {% block previewButton %} <div class="btngroup"> <button type="button" class="btn submit" data-action="preview"> {{ 'Preview'|t('app') }} </button> </div> {% endblock %} ``` ## 7. Security Considerations Voeg toe aan je sectie configuratie: ```php 'previewTargets' => [ [ 'label' => 'Live Preview', 'urlFormat' => '{url}?preview={token}', 'refresh' => true ] ] ``` ## 8. Implementatie Stappen 1. **Installeer benodigde plugins** via Composer 2. **Maak template-bestanden** aan zoals hierboven beschreven 3. **Voeg JavaScript-bestanden** toe aan je asset bundle 4. **Test de preview-functionaliteit** met verschillende content types 5. **Optimaliseer prestaties** door caching in te stellen ## 9. Troubleshooting Tips - Zorg dat je Craft versie 3.7+ gebruikt voor beste preview support - Controleer of user permissions preview rechten hebben - Test met verschillende browsers - Monitor console errors in dev tools Deze setup geeft je een robuuste preview-functionaliteit die werkt voor zowel blogposts als reguliere pagina's. Het is modulair opgezet zodat je eenvoudig aanvullende content types kunt toevoegen.