Erste Schritte mit ContentBlocks von Modmore

ContentBlocks sind ein mächtiges, kostenpflichtiges Extra für das CMS Modx von modmore, der niederländischen Pluginschmiede.

• 1 Benutzerkonto auf Modmore anlegen
• 2 API Key anlegen
• 3 Lizenz kaufen oder ContentBlocks nur testen, dies aber nur auf einer erlaubten Testdomain nach dieser Liste der erlaubten Top-level- oder Subdomains
• 4 Bookmarklet speichern
• 5 In der MODX-Installation > Package Management öffnen
• 6 Anbieter wechseln und modmore auswählen
• 7 ContentBlocks herunterladen
• 8 Installieren
• 9 Bei der Installation auswählen ob man A ein CSS-Framework herunterladen möchte und B ob man ein paar Dummy-Fields laden möchte. Ich habe NEIN zu A geklickt und JA zu B.

Es ist lustig, dass dies der zweite Schritt ist. Warum CB installieren und dann als erstes Testen, ob ich es deaktivieren kann? Weil ich auch kein Schweizer Taschenmesser benutze, um ein Brötchen zu schneiden. Das große Standard-MODX-Contentfenster zur Eingabe von langen Texten ist für Seiten wie dem Impressum definitiv am Besten geeignet. Deshalb möchte ich direkt testen, ob ich CB auf speziellen Seiten deaktivieren kann.

JA, eins kann CB auf jeder Seite individuell aktivieren und deaktivieren.

Screenshot:

Ich habe in meiner Testumgebung zwei Sprachen, dort lassen sich mit ContentBlocks angelegte Inhalte einfach übersetzen.

JA, dem ersten Anschein nach funktioniert ContentBlocks mit Babel.

JA, das geht und es ist ziemlich einfach.

Es müssen nur für jedes Icon 2 Dateien angelegt werden, jeweils einmal

• 80 px x 80 px - iconname.png
• 160 px x 160 px - iconname@2x.png

Diese werden dann nach: assets/components/contentblocks/img/icons/ hochgeladen.

Beispiel:

Quelle: Modmore ContentBlocks Icons

JA, das geht und fast Fullscreen.

Hier hatte ich direkt die erste Fehlermeldung, da ich noch kein Default Layout angelegt habe, bzw kein Default-Layout existiert. Dazu

• Extras > ContentBlocks öffnen
• Reiter Layouts anwählen
• Layout hinzufügen und ein erstes Basislayout anlegen

Es ist kein Layout vorinstalliert, d.h. der erste Schritt ist der Button 'Layout hinzufügen'. Und während die Anleitung eher abschreckend auf mich wirkte, ist es in der Praxis kinderleicht. Was mir auch hier wieder gegenüber Lösungen in Drupal oder Wordpress gefällt: Wenn eins will, wird Null=Zero=kein eigener HTML-Code von CB generiert. Ein Traum für lean Coder.

Zur Original-Dokumentation

5 Reiter müssen ausgefüllt werden, das scheint viel, ist aber für ein einfaches Headline / Content-Layout schnell erledigt.

• Name > Ein prägnanter kurzer Name, kurze prägnante Begriffe, keine langen Wörter, im Ergebnis werden nur 5 Zeilen angezeigt
• Kategorie > CB hat ein eigenes Kategorie-System, das unabhängig von der Installation/Elementen ist. Kategorien eignen sich sehr gut, um Layouts im Frontend zu sortieren und den Redakteuren die Arbeit zu erleichtern. Bei der Inhaltsbearbeitung werden die Kategorien bei der Layout-Auswahl in Zeilen angezeigt.
• Icon > Für das Layout ein passendes Icon erstellen
• Sortier-Reihenfolge > Niedrigere Nummern werden zuerst angezeigt, ich arbeite immer in 10er-Schritten, das habe ich mir bei der Basic-Programmierung angewöhnt

Vielleicht der wichtigste Reiter, denn hier wird das eigentliche Markup eingegeben, dass später im Frontend erscheint. Im Templatecode werden die Platzhalter der Spalten eingegeben, an diesen Stellen erscheint später der Inhalt, der vom Redakteur durch die Auswahl verschiedener Eingabefelder zusammengestellt wird.

Beispielcode für ein einspaltiges Layout, mit dem Spaltenplatzhalter +col_1

<div class="row">
    <div class="col-xs col-lg-12">
    [[+col_1]]
    </div>
</div>

Templates von Layouts dürfen nicht mit den Templates für ContentBlocks (eine Ebene höher) verwechselt werden.

Ich persönlich finde den Begriff Spalten etwas verwirrend, weil sie einerseits das sind, was die Redakteur*innen nachher sehen, andererseits aber so etwas wie ein Container sind, der bei Template in das HTML eingebettet wird.

Es sind nur 2 Angaben zu machen:

• Referenz: ein eindeutiger maschinenlesbarer Begriff z.B. col_1, siehe oben
• Eine Breitenangabe. Sollen die Spalten nachher nebeneinander angeordnet sein, dann sollte die Summe der Spaltenangaben 100 % sein. Die Angabe erolgt ohne %.

Es können mehrere Spalten angelegt werden.

Es wird interessant. Für jedes Layout kann eine Regel erstellt werden, wo es angewendet werden darf. Dabei stehen unter dem Button „Bedingung diese Felder zur Verfügung:

• Ressourcen ID (ID nur genau einer speziellen Ressource, oder mehreren durch Komma getrennt eingeben)
• Klassen-Schlüssel (z.B. nur für
• Template (ID)
• ID der Eltern-Ressource
• ID der obersten Eltern-Ressource
• Kontext
• Benutzergruppe (Name)

Damit lässt sich die Arbeit mit den Layouts extrem auf Bereiche beschränken, einengen und /oder flexibilisieren.

1. Zusätzlich lässt sich die Gesamtmenge eines Elementes auf einer Seite beschränken.
2. Es kann eingestellt werden, dass das Layout nur als verschachteltes Layout eingefügt werden darf.

Ebenfalls ein sehr mächtiges Tool. Hier kann das Layout zusätzlich noch weiter definiert werden.

Vielleicht noch ein wenig früh, für diese Sammlung, aber ich vergesse ungerne Lesezeichen

• Linkable Headlines with ID
• Layouteinstellungen im Feld nutzen
• FAQ
• Outputmodifier in ContentBlocks