Seit der Version 3.7.0 sind Custom Fields aus Joomla nicht mehr wegzudenken. Damit können Beiträge, Kategorien, Kontakte und Benutzer erweitert werden. In Kombination mit Overrides (Dazu mehr in meinem Artikel: Overrides und Custom Fields – Ein Dreamteam) erlauben sie das Erstellen von besonderen Websites, ohne auf Erweiterungen zurückgreifen zu müssen. Seit Joomla 3.9.0 besteht auch die Möglichkeit, den Custom Fields alternative Layouts zuzuweisen. In diesem Artikel werde ich auf die Parameter von Custom Fields eingehen und zeigen, wie man die Darstellung der Felder verändern kann.
Wo findet man die Custom Fields?
Seit Joomla 3.7.0 gibt es zwei neue Untermenüpunkte für Custom Fields, nämlich „Felder“ und „Feldgruppen“ und zwar für Beiträge (Inhalt -> Beiträge), Kategorien (Inhalt -> Kategorien), Kontakte (Komponente -> Kontakte) und Benutzer. Was macht man, wenn man diese Menüpunkte in der eigenen Joomla Seite nicht hat? Da sind wahrscheinlich die Custom Fields deaktiviert. Um sie sichtbar zu machen klickt man auf den Optionen Button und unter „Integration“ auf „Eigene Felder aktivieren“.
Welche Custom Fields gibt es?
In der aktuellen Version von Joomla (3.9.15) gibt es 16 Typen von Felder:
- Kalender: Textfeld zum Eintragen eines Datums. Ergänzender Pop-up-Kalender zum Auswählen des Datums.
- Kontrollkästchen: Ein oder mehrere Werte können eingetragen werden.
- Farbe: Farbauswahl-Box (Color picker).
- Editor: Eine Auswahlliste der vorhandenen WYSIWYG-Editoren. Ergebnis ist ein Textbereich mit dem ausgewählten Editor.
- Zahlen: Auswahlliste von Zahlen zwischen einem Minimum und einem Maximum.
- Listen: Auswahlliste von selbstdefinierten Werten.
- Bilder hinzufügen: Auswahlliste von Bildern aus einem definierten Ordner.
- Medien: Bietet Zugriff auf den Media Manager, um Bilder auszuwählen oder hochzuladen.
- Radio: Radio-Buttons zur Auswahl von verschiedenen Optionen.
- SQL: Auswahlliste von Ergebnissen einer SQL-Abfrage der Joomla!-Datenbank.
- Text: Textfeld für die Eingabe von Daten.
- Textbereich: Textbereich für die Eingabe eines mehrzeiligen Textes.
- URL: Eingabe-Feld für URLs.
- Benutzer: Auswahlliste für Benutzer. Das Feld zeigt den Benutzernamen und speichert die Benutzer-ID.
- Benutzergruppe: Auswahlliste der verfügbaren Joomla!-Benutzergruppen.
- Wiederholbar (repeatable): Erlaubt das Erstellen von Subforms, es unterstützt die Typen Medien, Editor, Text, Textbereich und Zahlen.
Das Feld „Media JCE“ im Screenshot ist ein Plugin, was vom JCE Editor mitgeliefert wird
Verwalten von Custom Fields
Wenn man neue Felder anlegt, werden diese in einem neuen Tab namens „Felder“ bei den Beiträgen (Kategorien, Kontakte, Benutzer) angezeigt. Das kann unübersichtlich werden, wenn man viele Felder hat. Eine bessere Alternative ist die Felder zu gruppieren. Dafür legt man zuerst eine neue Feldgruppe an und weist die Felder zu. So bekommnt man einen neuen Tab mit einem eindeutigen Namen und es ist auch möglich, mehrere Tabs zu haben, je nachdem wie viele Feldgruppen es gibt.
Es sollte nicht vergessen werden, dass nach dem Anlegen eines Feldes nicht mehr möglich ist den Typ zu ändern. Wenn statt Text ein Textbereich benötigt wird, muss das angelegte Feld des Typs Text gelöscht und ein neues mit Typ Textbereich erstellt werden.
Parameter – Allgemein
Bei den Feldern gibt es je nach Typ unterschiedlich viele Parameter. Ein Teil davon sind allgemeine Parameter, die bei allen Feldtypen vorkommen:
– Typ
– Name
– Beschriftung
– Beschreibung
– Pflichtfeld
– Standardwert
Weitere Parameter, die unter dem Tab „Allgemein“ angezeigt werden, sind abhängig vom Feldtyp.
In bestimmten Fällen kann der Parameter „Filter“ eine wichtige Rolle spielen. Nehmen wir an, wir möchten eine spezielle Beschreibung als extra Feld in einem Beitrag haben. Wir erstellen eine Feldgruppe namens „Weitere Infos“ und ein Feld von Typ „Editor“ mit standard Einstellungen. In unserem Beitrag sehen wir jetzt im Tab „Weitere Infos“ einen Texteditor. Wir können hier Text einfügen und formatieren wie wir möchten.
Wenn wir uns jetzt den Beitrag auf der Seite anschauen, sieht es nicht so aus wie erwartet:
Dass die Formatierung des Textes nicht angezeigt wird, liegt an der Einstellung vom Parameter „Filter“. Wir gehen wieder zum Feld und ändern diese Einstellungen. Wir können folgendes wählen:
– Plugin-Einstellung
– Nein
– Ungefiltert
– Sicheres HTML
– Text
Plugin-Einstellung bedeutet, dass die Einstellung, die direkt im Plugin gewählt ist, verwendet wird. Es ist vergleichbar mit den globalen Einstellungen für z.B. Beiträge. Standardmäßig steht der Filter im Plugin für das Feld „Editor“ auf „Text“. Das bedeutet, dass alle Formatierungen, die wir im Text vornehmen, gelöscht werden. Um die Formatierung sichtbar zu machen, muss man am besten „Sicheres HTML“ wählen. „Nein“ und „Ungefiltert“ würden auch die Formatierung anzeigen, aber dadurch können sich eventuell unerwünschte HTML Tags einschleichen. Und so sieht unser Text jetzt aus:
Wenn der Filter auf „Text“ (oder „Plugin-Einstellung“) stand, geht die Formatierung des Textes beim Speichern des Beitrags verloren. Deswegen muss man nach der Änderung in der Einstellung des Feldes, im Beitrag den Text wieder formatieren. Also am besten die Einstellung richtig wählen, bevor man viele Beiträge angelegt hat.
Parameter – Optionen
Außer den Parameter im Tab „Allgemein“ gibt es eine Reihe von wichtigen Einstellungen im Tab „Optionen“.
Im Bereich „Eingabemaske-Optionen“ sind die Einstellungen, die die Anzeige des Feldes im Backend, also dort wo das Feld befüllt wird. (ÜBERPRÜFEN FALL EINREICHEN) Man kann einen Platzhalter definieren, dem Feld und dem Label eine Klasse (oder mehrere) vergeben.
Wenn man im Beitrag sich das Feld anschaut, sieht man jetzt den Platzhalter. Und im Code sieht man die Klassen für das Label und das Input-Feld:
Wir können im Backend Template diese Klassen ergänzen (z.B. administrator/templates/isis/css/custom.css):
Natürlich können irgendwelche Klassen verwendet werden, die schon im Template vorhanden sind.
Mit dem Parameter „Einsatzbereich“ wird definiert, wo das Feld letztlich angezeigt wird: Website (Frontend), Administrator (Backend) oder beide.
Im Bereich „Ausgabe-Optionen“ sind die Einstellungen für die Anzeige des Feldes auf der Website (Frontend). Hier findet man wieder die Optionen „Feldklasse“ und „Labelklasse“, diesmal aber für die Darstellung auf der Website. Hier kann man schon existierende Klassen des Templates verwenden (z.B. aus Bootstrap, wenn man mit dem Standard Protostar Template arbeitet)
Mit den Klassen „label label-success“ für das Feldlabel sieht der Code im Frontend so aus:
und das Feld wird dementsprechend angezeigt:
Weitere Parameter in diesem Bereich sind „Beschriftung“, „Automatische Anzeige“, „Layout“ und „Anzeigen wenn schreibgeschützt“.
Mit „Beschriftung“ kann man definieren, ob das Label eines Feldes angezeigt werden soll. Wenn es auf „Verbergen“ steht, verschwindet auch die Möglichkeit eine Klasse für das Label zu setzen.
„Automatische Anzeige“ definiert wo das Feld in einem Beitrag angezeigt wird:
– Nach Titel (After Title)
– Vor Inhalt (Before Display)
– Nach Inhalt (After Display)
– Keine automatische Anzeige
Die ersten drei Möglichkeiten sind im Joomla View festgelegt. Wenn man sich die Datei components/com_content/views/article/tmpl/default.php anschaut, die die Darstellung eines Beitrags steuert, anschaut, findet man in Zeile 78 folgende Anweisung:
hier wird das Feld gerendert, wenn man in den Optionen „Nach Titel (After Title)“ ausgewählt hat.
Dementsprechend sind auf Zeile 92 und Zeile 169 die Anweisungen für „Vor Inhalt (Before Display)“ und „Nach Inhalt (After Display)“ zu finden:
Die Option „Keine automatische Anzeige“ ist wichtig, wenn man die Felder an einer bestimmten Stelle im Beitrag anzeigen möchte. Eine Möglichkeit wäre, wenn man die Felder direkt im Text des Beitrags einfügen möchte: So wie man ein Modul oder ein Bild im Beitrag laden kann, gibt es auch ein Button für das Einfügen von Felder
ein Modalfenster öffnet sich, wo man das Feld auswählen kann
das Feld wird als Kürzel {field FIELDID} eingefügt
Das Ergebnis im Frontend sieht dann so aus:
Damit lassen sich verschiedene Darstellungen der Felder erzeugen (z.B. in einer Tabelle). Das ist sehr individuell und kann / muss bei jedem Beitrag von Neuem definiert werden. Eine andere Möglichkeit ist, ein Override vom Beitrag zu machen und sich dort die Felder nach einem bestimmten Muster ausgeben zu lassen. In einem früheren Artikel hier im Blog habe ich die Darstellung von Custom Fields in einem Override schon beschrieben (https://www.hosteurope.de/blog/joomla-overrides-und-custom-fields-ein-dreamteam/).
Die Option „Anzeigen wenn schreibgeschütz“ ist vor allem interessant, wenn man die Felder in einem Formular (Beitrag einreichen / bearbeiten im Frontend, Kontaktformular) verwendet möchte. Damit kann man Felder die nur für „interne Zwecke“ gedacht sind und nicht von Benutzer verändert werden sollen, ausblenden.
Neue Option: Layouts
Seit es Custom Fields gibt ist es möglich, ein Override für die Felder zu erstellen:
Die Overrides liegen dann unter:
\templates\mein-template\html\layouts\com_fields\fields\render.php
und
\templates\mein-template\html\layouts\com_fields\field\render.php
Die erste Datei ist dafür verantwortlich den Container des Feldes zu rendern und zwar standardmäßig als eine Definitionsliste (dl):
Mit einem Override dieser Datei kann man die Darstellung verändern. Die Datei kommt zum Einsatz, wenn die Felder automatisch angezeigt werden.
Die zweite Datei kontrolliert die Anzeige von Beschriftung (Label) und Wert (Value) des Feldes:
Es war auch möglich, alternative Layouts zu definieren (z.B. myrender.php) und beim Einfügen des Feldes in einem Beitrag zu verwenden:
{field 4,myrender}
Das wird das Feld mit der ID 4 und das Layout aus der Datei myrender.php anzeigen.
Neu seit Joomla 3.9.0 ist, dass man dieses alternative Layout einem einzelnen Feld zuweisen kann, und zwar über den Parameter „Layout“ unter Ausgaben-Optionen:
Ein Beispiel: Wir möchten am Ende eines Beitrags eine Adresse anzeigen. Damit wir nicht immer an der Formatierung des Textes achten müssen, erstellen wir ein alternatives Layout „adresse.php“ und weisen es dem Feld „Adresse“ zu.
Die Adresse möchten wir in einem div Container mit der Klasse „well“ anzeigen lassen. Das Label des Feldes soll als h3 ausgegeben werden und die Adresse an sich soll ein „location“ Icon davor haben. Der Code von adresse.php würde dann so aussehen:
Das Ergebnis sieht es so aus:
Die Methode hat mehrere Vorteile:
– Man muss kein HTML Code im Beitrag manuell einfügen,
– die Darstellung des Feldes wird in allen Beiträgen gleich sein,
– man kann dann zentral das Layout ändern und
– wenn das Feld leer ist, wird es im Frontend nicht gerendert
Noch ein Beispiel
Wir haben eine Liste von Produkten und möchten neben der Beschreibung auch die Farbe darstellen. Dafür erstellen wir ein Feld des Typs „Farbe (color picker)“ und die passende alternative Layout Datei (farbe.php):
Wir haben ein Container definiert, darin wird das Label als
ausgegeben und die Farbe (Wert des Feldes) als Text in einem
mit der passenden Hintergrundfarbe.
Wir können diesem
eine Breite und eine Höhe geben, oder eine spezielle Klasse vergeben, die wir dann in unserem Template ergänzen:
.meineFarbe {
display: flex;
padding: 20px;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
}
Zusammenfassung
Mit den richtigen Einstellungen und die Nutzung von Overrides / alternative Layouts stellen Custom Fields eine wunderbare Möglichkeit dar Joomla an verschiedenen Stellen zu erweitern. Die Grenze ist die eigene Fantasie 😉
Nützliche Links
- https://docs.joomla.org/J3.x:Adding_custom_fields/Overrides/de
- https://magazine.joomla.org/item/3365-custom-fields-episode-3-all-the-parameters-one-can-wish-for
- https://www.regularlabs.com/guides/1360-how-to-create-an-alternate-layout-for-custom-fields-in-joomla
- https://www.web-eau.net/developpement/joomla-overrides/introduction
- Responsive Bilder in Joomla – Was kann man machen? - 12. Mai 2020
- Custom Fields für Fortgeschrittene: Parameter und alternative Layouts für Custom Fields - 3. April 2020
- Joomla! – Muss immer eine Joomla-Erweiterung sein? - 12. Februar 2019
