Automad - kleines Flat File CMS ganz groß

6. 8. 2022  — 
 CMS

Der Entwickler des Automad CMS legt den Schwerpunkt auf hochwertiges Design und lässt dem Gestalter die Freiheit, komplexe Layouts mit dem Block-Editor zu realisieren. Das Aussehen der nachfolgenden Cards wird nach eigenen Vorstellungen gestaltet. Ob Mehrspaltenlayouts oder vollflächig verschachtelte Blocks, die Möglichkeiten sind nahezu grenzenlos. Automad bietet eine Gestaltungsfreiheit, die im Flat-File-Segment ihresgleichen sucht.  

Ein Beispiel für Cards, eines mit Bild, eines mit Slider. 

Card mit Bild...

Alt Text: Slider Bild 1
Alt Text: Slider Bild 2

... und mit Slider

Das Beispiel oben ist einfach umzusetzen. Bei komplexen Block-Anordnungen sollte man konzentriert an der Sache dran bleiben, da die Orientierung durch mehrere Overlays (per Block ein Overlay inkl. der passenden Einstellungen) verloren gehen kann.

Blocks können die "Main" Maximalbreite einnehmen, "Hero" nutzt die gesamte Browserbreite.

Nachfolgend ein Screenshot von automad.org, der verschachtelte Blocks zeigt. Blocks können weitere Blocks, Texte, Hintergrundbilder, Videos, Slideshows, Buttons und anderes beinhalten. Im Reiter "Stil bearbeiten" werden die Flexbox-Eigenschaften, Hintergrundbilder, Farben und Rahmenstärken bzw. Abstände definiert.      

Verschachtelte Blocks. Klicke aufs Bild um mehr zu erfahren.

Die Edit-Bar

Mit dem + (links) wird die Edit-Bar eingeblendet.

In der Edit-Bar können Texte, Blocks, Überschriften, Listen, Tabellen, Fotos, Masonry-Bildergalerien, Imageslider, TOC, Quellcode, Markdown, E-Mailformular und weitere ausgewählt werden. Für neue Inhalte reicht ein Zeilenwechsel, wobei Text nicht ausgewählt werden muss, um weiterzuschreiben, was dem Schreibfluss zugute kommt. Praktisch sind die "Benutzerdefinierten Vorlagen-Snippets", um php-Codeschnipsel einzubauen.

Automad im nicht-headless-Modus

Solange der headless Modus ausgeschaltet bleibt, arbeitet Automad ähnlich wie andere CMS auch. Die Seiten können direkt im In-Page-Bearbeitungsmodus erstellt bzw. geändert werden und die Bedienung läuft intuitiv und flüssig. Das ist der einfache Zugang zu Automad, den headless Modus hab ich noch nicht ausprobiert, hier die Beschreibung dazu.

Unverständlicherweise gehört Automad noch nicht zu den bekanntesten Vertretern der Flat-File-Systeme, weshalb bei Unsicherheiten nur die Homepage für allgemeine Infos und die Diskussions-Plattform für Fragen und Antworten in englischer Sprache herhalten können. Es gibt jedoch immer mehr Berichte über das Automad CMS, die hilfreich sein können.

Das Dashboard, die Schaltzentrale von Automad

Das Dashboard ist das Backend und die Schaltzentrale von Automad. In Allgemeine Daten und Dateien werden Inhalte gespeichert, die zT. für alle Seiten Verwendung finden, zB Javascript in "Items Footer" und CSS-Daten in "Items Header". Zu den Seiten können hier die passenden Fotos hochgeladen werden. In Systemeinstellungen wird u.A. die Sprache und der Benutzer verwaltet. Weitere Benutzer werden per E-Mail eingeladen oder direkt eingegeben. Eine Rechteverwaltung ist ohne Datenbank (MySQL) nicht möglich, aber genau das wollen Flat-File-Systeme ja vermeiden. Wer also andere User einlädt, sollte ihnen 100%ig vertrauen können, sie haben dann dieselben Rechte wie der Hompage-Betreiber. Acht reduziert gestaltete Themes und gleichviel Plugins sind in Pakete zu finden.

Seiten und Themes

Seiten werden im Dashboard angelegt und über die Buttons "Hero" und "Main" zur Bearbeitung angeklickt, siehe weiter unten. Das ausgewählte Theme bildet lediglich den Rahmen, in dem die Seiten frei gestaltet werden. Für die Blogs hab ich das Standardlayout gewählt, damit es nicht zu aufwändig wird. Das "Würfelicon" (Bild rechts) dient sowohl zum Verschieben des Absatzes als auch, abhängig vom Inhalt, für die Text- bzw. Block-Ausrichtung.

In einem weiteren Punkt unterscheiden sich Automad-Themes von Mitbewerbern. Für jedes Theme sind mehrere Optionen verfügbar. Einerseits inhaltsbezogen für Blogs, andererseits für die Gestaltung relevante Darstellungsoptionen, zB die Stile dark oder light. Es ist auch möglich, über "Sidebar Left und Sidebar Right" die Navigation seitlich zu positionieren. Links ein kleiner Ausschnitt bzgl. der Auswahl.

Hero und Main

Seiteninhalte werden In-Page über die blauen Buttons zur Bearbeitung angeklickt. "Hero" für den Header, der die gesamte Breite des Browserfensters einnimmt (ich verwende ihn hier nicht) und "Main" für den eigentlichen Seiteninhalt. Die Administrierung kann im Dashboard oder direkt auf der Seite erfolgen. Im Dashboard gibt es die Buttons nicht, die Bereiche sind aber gleich benannt (Hero und Main). In-Page ist der Button "Main" immer ganz unten auf der Seite, wer so wie ich, oft zwischen Seitenansicht und Bearbeitung wechselt, muss permanent scrollen, wer gleich im Dashboard schreibt, erspart sich das. Mittels Shortcode werden Änderungen mit ⌘ + S (am Mac) und Ctrl + S (am PC) gesichert, sehr praktisch. Natürlich gibt es oben rechts auch einen Button zum sichern.

Die markanten blau hinterlegten Buttons sind zur Bearbeitung der Inhalte: "Hero" (für die Titelleiste) und "Main" (den Seiteninhalt).

Weiters gibt es Buttons für Title, Date und Items Footer. Das Datum wird üblicherweise für Blogeinträge verwendet, ich hab es per CSS ausgeblendet. Die URL ist immer gleich benannt, wie die Titelzeile, scheinbar hat das bzgl. SEO keine Bedeutung mehr. Items Footer wiederum wird besser in "Allgemeine Daten und Dateien" eingetragen und gilt dann für alle Seiten.   

Die schwebende Palette unten mittig sind Links zu: Dashboard, Daten und Einstellungen der betreffenden Seite, hochgeladene Daten der Seite und allgemeine Systemeinstellungen.

Fotos, Bildergalerien und Slider

Kein starres Raster, schön aufgeteilt im Masonry-Layout. Die Bildergalerie wird zur Lightbox-Slideshow, wenn eines der Fotos angeklickt wird. Hochgeladen werden die Bilder per drag and drop oder via Bildauswahl. Leider können Fotos nicht direkt auf der Seite hochgeladen werden, dazu muss man auf "Allgemeine Daten und Dateien" wechseln. Das Bedienfeld für Fotos, Bildergalerien und Slider ist selbsterklärend. Fotos auswählen, hinzufügen oder löschen, bei Bedarf Größe und Stegabstand festlegen, fertig! Medien wie Bilder, Videos werden automatisch der betreffenden Seite zugeordnet und nicht wie in Wordpress in der Media-Datenbank gesichert. Eines der speziellen Goodies von Automad ist, dass Fotos in der Größe angepasst und zugeschnitten werden können. Der Einfachheit halber nur ein Screenshot ...

Sauber aufgeteilte Bildergalerie im Masonry-Layout

Flat-File-CMS, was ist das?

Das Automad CMS gehört zur Kategorie der Flat-File-CMS, welche schon seit Jahren für Aufmerksamkeit sorgen. Flat-File hat viele Vorteile, einer davon ist, dass die Datensicherung meist in schlanken txt- oder anderen Dateiformaten erfolgt, was wiederum das Handling bis zum Upload auf den Server enorm erleichtert. Wer schon einmal ein datenbankbasiertes System lokal vom Mac oder PC auf den Server gespielt hat, weiss welche Überraschungen man dabei erleben kann. Flat-File-Systeme bzw. deren Nutzer können sich diesbezüglich bequem zurücklehnen, auf den Server laden und fertig. Eigentlich unfassbar, dass noch immer kleine und kleinste Websites mit Wordpress - dem Platzhirschen unter den großen Datenbank-CMS - umgesetzt werden, dafür drängt sich ein schlankes Flat-File-System geradezu auf. Das "Kanonen auf Spatzen"- Prinzip ist weit verbreitet, auch deshalb führen Flat-File-CMS nach wie vor ein Nischendasein.

Einige Vorteile hab ich kurz zusammengefasst, aber es gibt auch Nachteile. Der Funktionsumfang der Flat-File-Systeme ist meist eingeschränkt, die Auswahl an Plugins und Themes ist mehr als überschaubar, bei Shop-Systemen wird es dann finster, nur Statamic und Kirby bieten eCommerce-Erweiterungen an. Beide sind mit Kosten verbunden, während die Mehrzahl der Flat-File-Systeme und auch Automad als Opensource-Lizenz kostenfrei zu haben sind.

Fazit

Das Automad CMS ist einfach großartig und könnte durchaus als kleines, schlankes Wordpress bezeichnet werden. Sogar eine Suchfunktion gibt es, das haben zT nicht mal die bekannteren Vertreter der Flat-File-CMS. Das Backend ist sauber strukturiert und überhaupt wirkt das CMS aufgeräumt und, nach einigen Stunden Einarbeitungszeit, recht leicht verständlich. Leicht ist relativ, wer schon einmal mit einem CMS gearbeitet hat, wird schneller vorankommen, Neueinsteiger brauchen wahrscheinlich länger.

In Automad scheint alles dem Thema Gestaltung untergeordnet zu sein, was sich in allen Details bemerkbar macht. Ob Dashboard, die Themes-Auswahl oder Bedienungselemente, nichts wirkt aus dem Rahmen gefallen, alles passt in das Design-Konzept Automad. 

Der Funktionsumfang von Automad dürfte (geschätzt) für 95% aller Websites ausreichend sein. Ich finde die Filterfunktion für Artikel äusserst praktisch, basierend auf Tags. Die Blog-Darstellung (nach dem Text) und ebenso am Ende der Blogpost-Seiten die "Dazupassenden Inhalte" (sofern welche vorhanden sind) werden dynamisch erzeugt, ohne dass händisch eingegriffen werden muss. Das leitet Besucher, die sich für ein Thema speziell interessieren, gleich zum nächsten dazupassenden Artikel weiter. Es sollte nur beachtet werden, dass die Tags bewusst gesetzt werden. Da ist, wie so oft, weniger mehr.

Gibt es auch einen Nachteil von Automad?

Ja, bei meiner Version wird die Spracheinstellung, die im Dashboard eingetragen wird, nicht übernommen. Das bedeutet, dass im Quellcode "en" steht, statt "de":

Ein Tipp dazu: Gehe zu > Packages > Standard > template > post.php und öffne diese Datei in einem geeigneten Editor. In der zweiten Zeile kannst du die Sprache ändern. In neueren Versionen ist dieser Bug sicher längst behoben.