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“.

00_screenshot_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.
01_screenshot_felder_typen

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.

02_screenshot_felder_tab 02_screenshot_feldergruppe_tab 04_screenshot_feldergruppe_zuweisung

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.

05_screenshot_feld_editor

Wenn wir uns jetzt den Beitrag auf der Seite anschauen, sieht es nicht so aus wie erwartet:

06_screenshot_feld_editor_standard

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:

07_screenshot_feld_editor_html

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“.

08_screenshot_feld_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.

09_screenshot_feld_optionen_klasse

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:

10_screenshot_feld_optionen_platzhalter

Wir können im Backend Template diese Klassen ergänzen (z.B. administrator/templates/isis/css/custom.css):

11_screenshot_feld_optionen_klassen_backend

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)

12_screenshot_feld_optionen_klasse_ausgabe1_frontend

Mit den Klassen „label label-success“ für das Feldlabel sieht der Code im Frontend so aus:

und das Feld wird dementsprechend angezeigt:

13_screenshot_feld_optionen_klasse_frontend

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.

14_screenshot_feld_optionen_klasse_ausgabe2_frontend

15_screenshot_feld_optionen_klasse_frontend2

„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

16_screenshot_feld_beitrag

ein Modalfenster öffnet sich, wo man das Feld auswählen kann

17_screenshot_feld_beitrag2

das Feld wird als Kürzel {field FIELDID} eingefügt

18_screenshot_feld_beitrag3

Das Ergebnis im Frontend sieht dann so aus:

19_screenshot_feld_beitrag4

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:

20_screenshot_feld_override

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:

21_screenshot_feld_optionen_layout

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:

22_screenshot_feld_beitrag_adresse

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.

23_screenshot_feld_beitrag_farbe

24_screenshot_feld_beitrag_farbe1

25_screenshot_feld_beitrag_farbe2

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;
}

26_screenshot_feld_beitrag_farbe3

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

Bildnachweis: Bild von ivke32 auf Pixabay

Dr. Viviana Menzel

One thought on “Custom Fields für Fortgeschrittene: Parameter und alternative Layouts für Custom Fields

  1. sehr wertvoller bericht, danke dafür.
    aber da muss man schon ein fortgeschrittener Profi sein um alles zu verstehen. sehr tiefgründig 🙂
    liebe grüße
    franzi von powder brows

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/