alle secties op één pagina

Bouwblokken

Elke sectie op deze pagina is een ander blok uit de paginabouwer. Het label boven elke kop vertelt uit welk veldtype het komt.

Wat je hieronder ziet

Elk blok is een set in het Replicator-veld page_builder. De redacteur kiest een set, vult de velden in en sleept hem op zijn plek. De template ernaast heet precies zo: set gallery wordt gerenderd door resources/views/page_builder/gallery.antlers.html.

bard · rich text

Tekst

Het Bard-veld: een rich text editor die HTML opslaat en alleen de knoppen toont die je in de blueprint aanzet.

Dit blok is het werkpaard. Koppen, alinea's, lijstjes, links en inline code — allemaal uit één veld, en alleen de opmaak die je zelf hebt toegestaan.

Waarom niet gewoon markdown?

Dat kan ook: het Markdown-veld zit er ook in. Het verschil is dat Bard gestructureerd opslaat, waardoor je er later andere dingen mee kunt doen dan alleen HTML uitspugen.

De knoppenbalk staat in de blueprint, niet in de code
Afbeeldingen kunnen uit de asset-container komen
Met save_html: true krijg je kant-en-klare HTML in je template

Een blok doet één ding. Dat is de hele truc.

replicator in replicator

Kaarten

Een replicator ín een replicator. De redacteur voegt kaarten toe, sleept ze op volgorde en kiest per kaart een teken.

Stache

De index over je bestanden. Wegwerpbaar: weggooien kost niets, hij bouwt zichzelf opnieuw op.

Glide

Beeld op maat via de URL. De redacteur uploadt één bestand, de template vraagt de maat die hij nodig heeft.

Live preview

Terwijl je typt zie je rechts de echte pagina meeveranderen. Zonder op te slaan.

Revisies

Elke opgeslagen versie blijft bewaard, dus terugdraaien kan zonder de geschiedenis in te duiken.

assets · select

Beeld en tekst

Een afbeelding naast een stuk tekst. De redacteur kiest de kant en de verhouding; Glide doet de rest.

Bijgesneden op 1:1 door Glide, uit een liggend origineel.

Het beeld staat één keer in de asset-container. Deze sectie vraagt om een vierkante uitsnede van 1000 bij 1000 in webp; een ander blok vraagt straks om iets anders uit hetzelfde bestand.

De redacteur hoeft dus niet te weten hoe groot een afbeelding moet zijn, en jij hoeft geen zes varianten te laten aanleveren.

assets · meerdere

Galerij

Hetzelfde veldtype, nu zonder maximum. De alt-tekst komt uit de blueprint van de asset-container zelf.

grid

Stappen

Een Grid-veld: vaste kolommen, rijen erbij zoveel je wilt. De nummering komt uit de template, niet uit een veld.

01

Blueprint schrijven

Leg vast welke velden een pagina heeft. Het formulier in het Control Panel volgt vanzelf.
02

Template ernaast zetten

Een bestand met dezelfde naam als de set. Antlers haalt de velden op met hun handle.
03

Redacteur laten los

Vanaf nu voegt hij secties toe zonder jou. Dat is het doel van de hele exercitie.

table

Specificaties

Het Table-veld bewaart paren van eigenschap en waarde. Handig voor productgegevens, technische specificaties of een colofon.

Opslag: Platte bestanden in content/, YAML en Markdown
Index: Stache, een wegwerp-cache over de bestanden
Template-taal: Antlers, met partials, tags en modifiers
Control Panel: Filament 5, gegenereerd uit de blueprints
Beeldbewerking: Glide, via GD of Imagick
Meertaligheid: Meerdere sites met eigen locale en URL

code

Code

Een fragment met bestandsnaam erboven. Zo ziet de template eruit die deze hele pagina tekent.

resources/views/components/page_builder.antlers.html

html

{{ page_builder }}
    {{ partial src="page_builder/{type}" }}
{{ /page_builder }}

grid · markdown

Veelgestelde vragen

Werkt dit zonder JavaScript?

Ja. Deze vragen klappen open met <details>, het menu op mobiel ook. JavaScript voegt alleen Escape en klikken-buiten toe.

Waar staan de antwoorden?

In het Markdown-veld van dit blok, in content/collections/pages/bouwblokken.md. Je kunt ze hier bewerken of in je editor — beide kanten werken.

Kan ik zelf een blok toevoegen?

Ja, in twee stappen: een set erbij in de blueprint, en een partial met dezelfde naam in resources/views/page_builder/. Er is geen registratie of configuratie die je daarnaast nog moet bijwerken.

“De beste CMS-functie is degene die de redacteur niet opmerkt.”

Iemand op een conferentie

zei dit, waarschijnlijk

color · range

Kleuren en schalen

Twee kleinere veldtypes: een kleurkiezer en een getal tussen 0 en 100. Hier gebruikt als palet met een aandeel.

Terracotta

#cc551e

70 / 100
Inkt

#211c13

90 / 100
Papier

#f5efe4

45 / 100
Mos

#4f7a3f

25 / 100

video

Video

De redacteur plakt een link. Een YouTube- of Vimeo-adres wordt een iframe, een .mp4-bestand wordt een videospeler.

Big Buck Bunny — een publiek domein-film, hier als voorbeeld.

taxonomie

Onderwerpen

Termen uit de taxonomie Onderwerpen. Elke term heeft een eigen pagina met de berichten die eraan hangen.