15 verschiedene Feldtypen im CMS

Custom Fields in Joomla! 3.7

| Autor / Redakteur: Viviana Menzel * / Stephan Augsten

In Joomla! 3.7 sind nunmehr 15 Feldtypen verfügbar, weitere sollen folgen.
In Joomla! 3.7 sind nunmehr 15 Feldtypen verfügbar, weitere sollen folgen. (Bild: Joomla!)

Im Administratorenbereich des Open-CMS Joomla! gibt es eine entscheidende Neuerung. Mit Version 3.7 können nun selbstständig Eingabefelder, sogenannte „Custom Fields“, erstellen und individuell auf der Website anzeigen lassen. Aktuell sind 15 Feldtypen verfügbar, Tendenz steigend.

Entwickler, die mit Joomla! 3.7 arbeiten, arbeiten besonders flexibel. Im Administratorenbereich finden sie ganze 15 Feldtypen vor. Diese lassen sich der Übersicht halber in Feldgruppen zusammenfassen. Zudem können Nutzer ihre eigenen Felder verschiedenen Kategorien oder Zugriffsebenen zuweisen.

Beim Erstellen von Beiträgen werden die Felder dann ausgefüllt. Diese eigenen Felder, oder auch „Custom Fields“, unterstützt Joomla! 3.7 aktuell bei „Inhalten“, „Kontakten“ und „Benutzern“; nach ihnen kann man jetzt auch dediziert suchen.

Wann helfen mir eigene Felder?

Die Möglichkeiten, die eigene Felder eröffnen, sind anhand eines Beispiels besser zu verstehen: Der Autor eines Blogs möchte eine Liste der Bücher, die er gerade liest, auf seiner Website darstellen.

Neben einer kurzen Rezension des Buches sollen Autor, Erscheinungsdatum, Verlag, ISBN und ein Link zur Website des Autors dargestellt werden. Natürlich ließen sich diese Informationen direkt im Text des Beitrags einfügen, aber eine einheitliche, besondere Formatierung wäre mühselig. Hier kommen die eigenen Felder zur Hilfe.

Neue Feldgruppe definieren.
Neue Feldgruppe definieren. (Bild: Joomla!)

Im ersten Schritt ruft der Blogger das Joomla!-Backend auf. Unter „Inhalt“ -> „Kategorien“ legt er die Kategorie „Bücher“ an. Seit Version 3.7 stehen ihm unter „Inhalt“ zwei neue Menüpunkte zur Verfügung: Felder und Feldgruppen. Das bedeutet, eigene Felder lassen sich einzeln anlegen oder in einer Feldgruppe zusammenfassen. Um die Verwaltung der Felder komfortabler zu machen, legt der Blogger die für die Bücherliste benötigten Felder in einer eigenen Feldgruppe „Bücher Infos“ an:

Neues Feld anlegen.
Neues Feld anlegen. (Bild: Joomla!)

Jetzt erstellt der Blogger die einzelnen Felder: unter „Inhalt“ -> „Felder“ -> „Neu“. Das erste Feld ist „Verlag“. Im Reiter „Allgemein“ wird der Feldtyp gewählt; in diesem Fall „Text“, da hier der Name des Verlags eingetragen werden soll. Das Feld ordnet er jetzt der Feldgruppe „Bücher Infos“ und der Kategorie „Bücher“ zu. Das Zuordnen verhindert, dass die Felder in Beiträgen erscheinen, die nicht zur Kategorie „Bücher“ gehören.

Beschriftung des Feldes anzeigen oder verbergen.
Beschriftung des Feldes anzeigen oder verbergen. (Bild: Joomla!)

Im Reiter „Optionen“ lassen sich zudem Platzhalter und CSS-Klassen definieren. Außerdem kann der Blogger das Anzeigen der Beschriftung, den Einsatzbereich und die automatische Anzeige der Felder einstellen.

Wenn die Beschriftung des Feldes angezeigt werden soll, wird die Ausgabe „Verlag: Mein Verlag sein.“ Ohne Beschriftung wird nur „Mein Verlag“ stehen. Der Einsatzbereich dieser Beschriftung kann variieren. Beispielsweise lassen sich die Felder auf der Website, nur im Administratorbereich oder in beiden Bereichen anzeigen.

Automatische Anzeige.
Automatische Anzeige. (Bild: Joomla!)

Mit einer automatischen Anzeige definiert der Blogger die Position der Felder im Beitrag. Zur Auswahl stehen „Nach Beitragstitel“, „Vor Beitrag“, „Nach Beitrag“ und „Nein“. Nach dem gleichen Prinzip kann der Anwender die Felder „Erscheinungsdatum“, „Autor“ und „ISBN“ anlegen.

Felder befüllen.
Felder befüllen. (Bild: Joomla!)

Um jetzt die Felder befüllen zu können, müssen die Beiträge angelegt werden. Unter „Inhalt“ -> „Beiträge“ -> „Neu“ erstellt man das erste Buch. „Titel“ ist natürlich der Titel des Buches. Im Inhalt schreibt der Blogger seine Rezension. Da die neuen Felder nur in Beiträgen der Kategorie „Bücher“ angezeigt werden, muss der Beitrag der entsprechenden Kategorie zugeordnet werden. Erst dann erscheint zusätzlich zu den üblichen Reitern im Beitrag ein Tab „Bücher Infos“. Hier sind auch die zuvor erstellten Felder ersichtlich. Die Felder können jetzt passend befüllt werden.

Menüpunkt ergänzen.
Menüpunkt ergänzen. (Bild: Joomla!)

Um die Ergebnisse sichtbar zu machen, legt der Blogger im Anschluss einen Menüpunkt „Bücher“ als Bloglayout der Kategorie „Bücher“ an. Auf der Website sieht man jetzt die Bücherliste mit den zusätzlichen Infos.

Wie positioniere ich die Felder?

Felder positionieren.
Felder positionieren. (Bild: Joomla!)

Bei allen Feldern wählte der Blogger die automatische Anzeige auf „Vor Beitrag“. Jetzt betrachtet er die anderen Möglichkeiten näher: Das Feld „Autor“ wird auf „Nach Beitragstitel“ und das Feld „ISBN“ auf „Nach Beitrag“ gestellt. Im vorangestellten Bild sehen wir das Ergebnis. Die Inhalte lassen sich mit wenig Nacharbeit deutlich strukturierter und übersichtlicher darstellen.

Ausgabeklasse zuweisen.
Ausgabeklasse zuweisen. (Bild: Joomla!)

Jetzt kommen noch die zuvor erwähnten CSS-Klassen ins Spiel. Dem Feld „Autor“ wird die Ausgabeklasse „b-autor“ zugewiesen. Für die anderen Felder verwendet man dementsprechend die Klassen „b-datum“, „b-verlag“ und „b-isbn“. Das folgende Code-Snippet zeigt eine mögliche Formatierung mit zentriertem Autorenfeld, gefetteten Details und kursiver Ausgabe der ISBN.

.b-autor {
   text-align: center;
}
.b-datum .field-label, b-verlag .field-label {
   font-weight: bold;
}
.b-isbn {
   font-style: italic;
}

Feldtyp URL und entsprechende Optionen.
Feldtyp URL und entsprechende Optionen. (Bild: Joomla!)

Wie verwende ich weitere Feldtypen?

Bis jetzt hat unser Blogger nur Textfelder verwendet. Für die Website des Autors benötigt er aber ein Feld, das automatisch eine Verlinkung erstellt. Dafür gibt es den Feldtypen „URL":

Das Endergebnis mit eingeblendeter URL.
Das Endergebnis mit eingeblendeter URL. (Bild: Joomla!)

Die CSS-Definition wird anschließend passend ergänzt:

.b-datum .field-label, .b-verlag .field-label, .b-url .field-label {
   font-weight: bold;
}

Hier gibt es eine automatisch erstellte Verlinkung zur Website des Autors bzw. des Buches.

Der Quellcode zeigt die Listenansicht.
Der Quellcode zeigt die Listenansicht. (Bild: Joomla!)

Automatische Anzeige ausschalten

Ein Blick auf den Quellcode zeigt, dass die Felder in der folgenden Abbildung als Definitionsliste eingefügt wurden.

Der Button „Felder“ im Editorbereich.
Der Button „Felder“ im Editorbereich. (Bild: Joomla!)

Es gibt jedoch eine Möglichkeit, die Felder anders anzuzeigen. Dafür muss der Anwender die automatische Anzeige ausschalten und die Felder direkt im Beitrag einfügen. Dafür gibt es in Joomla! 3.7 einen neuen Button im Editorbereich des Beitrages.

Manuell erstelltes Autorenfeld.
Manuell erstelltes Autorenfeld. (Bild: Joomla!)

Das Feld wird in diesem Fall als Absatz im Text eingefügt:

<p>
   <span class="field-label">Autor: </span>
   <span class="field-value">Estelle Weyl</span>
</p>

Es wäre auch möglich, andere Formatierungen dafür zu verwenden, z.B. „Überschrift“, „Liste“, „Tabelle“ o.Ä.

Overrides verwenden

Override (also Überschreiben) für eine alternative Darstellung.
Override (also Überschreiben) für eine alternative Darstellung. (Bild: Joomla!)

Eine weitere Möglichkeit, Felder anders darzustellen, sind sogenannte „Overrides“. Die dazugehörige Komponente „com_fields“ bietet zwei Layouts: „field/render.php“ und „fields/render.php“. Diese lassen sich nach dem bekannten Weg der Overrides-Erstellung überschreiben: über „Erweiterungen“ -> „Templates“ -> „Templates“ -> „MeinTemplate“ -> „Overrides erstellen“ -> „Layouts“ -> „com_fields“.

Der Layout-Override.
Der Layout-Override. (Bild: Joomla!)

Hier lässt sich die Struktur des Feldes verändern, z.B. eine nummerierte Liste statt einer Definitionsliste.

Welche weiteren Darstellungsmöglichkeiten gibt es?

Eine andere Art von „Overrides“ definiert das Aufrufen der Felder direkt im Template. Wie das funktioniert, wird in einem weiteren Anwendungsbeispiel deutlich: Unser Blogger will für seinen Blog eine News-Seite erstellen. Die dargestellten Nachrichten sollen einen Untertitel bekommen. Außerdem sollen die Quelle, eine Zusammenfassung sowie Links zu sozialen Netzwerken angezeigt werden.

Um diesen Bereich darzustellen, legt der Nutzer die Kategorie „News“ und die nötigen Felder in der Feldgruppe „News Infos“ an und weist die Feldgruppe der entsprechenden Kategorie zu. Das Feld „Untertitel“ ist ein Textfeld mit automatischer Anzeige auf „Nein“. „Quelle“ ist auch vom Typ „Text“ und wird nach dem Beitrag angezeigt. Für „Zusammenfassung“ wird ein Textbereich verwendet und vor dem Beitrag positioniert. Der Link zu Twitter soll als Icon erscheinen. Dafür wird ein Textfeld mit einem Standardwert (z.B. https://twitter.com/drmenzelit) ohne Beschriftung und ohne automatische Anzeige angelegt. Der Standardwert bringt den Vorteil, dass der Blogger den Wert nicht für jeden Beitrag ausfüllen muss.

Die News der Seite werden nun als Bloglayout angezeigt. Für die richtige Darstellung der Felder wird die Datei „com_content/category/blog_item.php“ als Override angelegt. Nach dem Titel:

<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>

soll der Untertitel angezeigt werden. Um das zu erreichen, werden einige Zeilen Code darunter eingefügt:

<?php if (!empty($this->item->jcfields[8]->value)) : ?>
   <h3 class="n-utitel">
      <?php echo $this->item->jcfields[8]->value; ?>
   </h3>
<?php endif; ?>

Der Wert „8“ bei jcfields ist die ID des Feldes, das angezeigt werden soll. Diese ID findet man im Backend in der Liste der Felder.

Am Ende der Datei wird noch der Code für das Twitter-Icon eingefügt.

<?php if (!empty($this->item->jcfields[12]->value)) : ?>
   <a href="https://<?php echo $this->item->jcfields[12]->value; ?>" target="_blank"><i class="fa fa-twitter fa-2"></i></a>
<?php endif; ?>

Hier ist „12“ wieder die ID des Feldes.

Die nötigen CSS-Definitionen werden ergänzt:

.n-utitel {
   text-align: center;
   text-transform: none;
   margin-top: 5px;
   margin-bottom: 20px;
}
.n-quelle {
   font-style: italic;
}
.fa-2 {
   font-size: 2em;
}

Die fertige News-Seite.
Die fertige News-Seite. (Bild: Joomla!)

Jetzt ist die Newsseite fertig.

Content flexibel zur Seite hinzufügen

Ein letztes Beispiel soll die enorme Flexibilität der neuen „Custom Fields“ in Joomla! 3.7 verdeutlichen: Der Blogger möchte seinen Blog mit einer Sammlung von Kochrezepten ergänzen. Wie in den anderen Beispielen wird zunächst eine Kategorie „Rezepte“ erstellt.

Beispiel eines alternativen Layouts.
Beispiel eines alternativen Layouts. (Bild: Joomla!)

Für die Rezeptbeiträge speichert er die Feldgruppe „Rezept-Infos“ mit den Feldern „Portionen“ und „Arbeitszeit“ als Textfelder ohne automatische Anzeige. Um die Rezepte korrekt darzustellen, wird ein Override von der Artikelansicht („com_content/views/article/tmpl/default.php“) als alternatives Layout „rezept.php“ unter „meinTemplate/html/com_content/article/“ angelegt. Die Rezept-Infos sollen als Spalte neben dem Rezept erscheinen. Dafür wird der Bereich innerhalb von <div itemprop="articleBody"> umgestaltet:

<div itemprop="articleBody">
   <div class="col-md-8">
      <?php echo $this->item->text; ?>
   </div>
   <div class="col-md-4">
      <div class="well r-infos">
         <dl class="dl-horizontal">
            <?php foreach ($this->item->jcfields as $field) : ?>
            <dt>
               <?php echo $field->label; ?>:
            </dt>
            <dd>
               <?php echo $field->value; ?>
            </dd>
            <?php endforeach ?>
         </dl>
      </div>
      <?php if (isset($images->image_fulltext) && !empty($images->image_fulltext)) : ?>
      <?php $imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext; ?>
      <div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
      <?php if ($images->image_fulltext_caption):
         echo 'class="caption img-responsive"' . ' title="' . htmlspecialchars($images->image_fulltext_caption) . '"';
      endif; ?>
      src="<?php echo htmlspecialchars($images->image_fulltext); ?>“ class="img-responsive“ alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>“ itemprop="image"/> </div>
      </div>
   </div>
</div>

Somit ist die Positionierung der Felder auch außerhalb der vordefinierten Plugin-Events („afterDisplayTitle“, „beforeDisplayContent“ und „afterDisplayContent“) möglich.

Die 15 Feldtypen von Joomla! 3.7 im Überblick

  • 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 von einem mehrzeiligen Text.
  • 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.

Weitere Informationen zu den „Custom Fields“ in Joomla! finden sich auf der offiziellen Dokumentationsseite

* Viviana Menzel arbeitet bei Joomla! Deutschland.

Kommentare werden geladen....

Kommentar zu diesem Artikel

Der Kommentar wird durch einen Redakteur geprüft und in Kürze freigeschaltet.

Anonym mitdiskutieren oder einloggen Anmelden

Avatar
Zur Wahrung unserer Interessen speichern wir zusätzlich zu den o.g. Informationen die IP-Adresse. Dies dient ausschließlich dem Zweck, dass Sie als Urheber des Kommentars identifiziert werden können. Rechtliche Grundlage ist die Wahrung berechtigter Interessen gem. Art 6 Abs 1 lit. f) DSGVO.
  1. Avatar
    Avatar
    Bearbeitet von am
    Bearbeitet von am
    1. Avatar
      Avatar
      Bearbeitet von am
      Bearbeitet von am

Kommentare werden geladen....

Kommentar melden

Melden Sie diesen Kommentar, wenn dieser nicht den Richtlinien entspricht.

Kommentar Freigeben

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

Freigabe entfernen

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

copyright

Dieser Beitrag ist urheberrechtlich geschützt. Sie wollen ihn für Ihre Zwecke verwenden? Infos finden Sie unter www.mycontentfactory.de (ID: 44730113 / Web Apps)