Blog Layout mit Icon im Beitragstitel

Vor einiger Zeit fragte jemand in einem Mattermost-Kanal, wie man ein Symbol zu den Beiträgen in einem Blog-Layout hinzufügen kann. Mein erster Impuls war "mit CSS natürlich!". Aber die Anforderung wurde erweitert mit "jeder Artikel sollte ein eigenes Icon haben". Das ist eine nette Herausforderung, die mit einem Override gelöst werden kann, der das Hinzufügen von Icons für Autoren von Beiträgen einfach macht.

Dies ist die Übersetzung des Artikels How to add an icon to the article title aus dem Joomla Community Magazine 05/24 von Viviana Menzel

Um es den Autoren leicht zu machen, werden wir ein Benutzerdefiniert Feld verwenden, um das Symbol hinzuzufügen. Und weil ja Joomla Fontawesome mit an Bord hat, werden wir diese Icons verwenden.

Benutzerdefiniertes Feld

Je nach den Anforderungen des Projekts können wir entscheiden, welche Art von benutzerdefiniertem Feld besser geeignet ist. Wenn jeder Artikel ein individuelles Icon haben soll, sollten wir ein Textfeld verwenden, in das der Autor / Redakteur die Fontawesome-Klasse schreiben kann (das funktioniert ähnlich wie das Feld "Link Icon Class" in den Menüoptionen, wie wir in einem früheren Artikel beschrieben haben: https://magazine.joomla.org/all-issues/july-2023/style-your-joomla-website-bring-color-to-your-menu).

Wenn die Artikel ein Icon haben sollen, das sich auf das Thema / die Kategorie bezieht (z.B. News, Joomla, Tipps etc.), sollten wir ein Listenfeld mit vordefinierten Fontawesome-Klassen verwenden. Ich werde das zweite Beispiel verwenden, da ich einen Blog mit Nachrichten über Joomla, News und Tipps erstellt habe. Um das benutzerdefinierte Feld zu erstellen, gehen wir zu Inhalt -> Felder -> Neu und wählen den Typ "Liste". Unter "Listenwerte" erstellen wir unsere Liste mit den Themen ( News, Joomla, Tipps etc.) als Text und die entsprechenden Fontawesome-Klassen als Wert. Wir fügen auch ein leeres Element für "Icon wählen" hinzu. Auf diese Weise wird kein Wert vorausgewählt und als Standard für neue Artikel gespeichert.

Bemerkung: Für diesen Artikel wurde auch eine Feldgruppe namens Titel-Icon erstellt, und das Feld Icon wurde dieser zugewiesen. Der Grund dafür ist, dass die Autoren beim Schreiben das Feld leichter finden können, da der Tab entsprechend beschriftet ist.

Da wir das Feld an einer bestimmten Position in einem Override eines Kategorie-Blogs verwenden möchten, setzen wir unter Optionen -> Anzeigeoptionen die automatische Anzeige auf "Nicht automatisch anzeigen":

Beiträge

Wir erstellen nun Beiträge für unseren Blog und wählen auf der Registerkarte "Titel-Icon" das entsprechende Symbol:

Override

Das Symbol sollte im Titel der Artikel in einem Blog-Layout angezeigt werden. Joomla hat eine Layout-Datei für Blog-Titel, sie befindet sich unter layouts/joomla/content und heisst blog_style_default_item_title.php. Natürlich werden wir diese Datei nicht anfassen, sondern einen Override davon in unserem Template erstellen. Am einfachsten geht das, wenn du unter System -> Site Templates auf "Cassiopeia Details and Files" klickst. In der Registerkarte " Overrides erstellen" wählst du Layouts -> joomla -> content.

Das Dumme an dieser Methode ist, dass Joomla Overrides für alle Layouts innerhalb von Content erstellt, und das sind eine Menge. Wir haben einige Möglichkeiten, die überflüssigen Overrides loszuwerden: Wenn du einen FTP-Zugang zu deinem Server hast, kannst du zum Ordner templates/cassiopeia/layouts/joomla/content gehen und alle Dateien ausser blog_style_default_item_title.php löschen. Ohne FTP-Zugang können die nicht benötigten Überschreibungen Datei für Datei unter System -> Site Templates -> Cassiopeia Details and Files einzeln gelöscht werden.

Um das Symbol im Artikeltitel anzuzeigen, müssen wir den Wert unseres Benutzerdefiniert Feldes im Override abrufen. Gehe zu System -> Site Templates -> Cassiopeia Details und Dateien und öffne die Datei blog_style_default_item_title.php (oder öffne sie mit dem Editor deiner Wahl via FTP). Füge nach Zeile 23 den folgenden Code hinzu:

$jcfields = $displayData->jcfields;
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}
$iconClass = implode(',', $jcfields['icon']->rawvalue);

Ersetze dabei ‘icon’ durch den Namen deines Benutzerdefiniert Feldes.

Wenn du ein Text Feld verwendest, ersetze die Zeile, die mit $iconClass beeginnt wie folgt:

$iconClass = $jcfields['icon-2']->rawvalue;

Ersetze wiederum 'icon-2' durch den Namen deines Benutzerdefiniert Fileds.

Innerhalb des <h2>-Elements füge diesen Code hinzu:

<?php if(!empty($iconClass)) : ?>
<span class="<?php echo $iconClass; ?>" aria-hidden="true"></span>
<?php endif; ?>

Und so sieht es nun in unserem Blog aus:

Bonus Tip 1

Auf Mattermost hat jemand darum gebeten, die Icons auch in einem Modul anzuzeigen. Dazu erstellen wir nun einen Override für das Modul "Beiträge - Neueste". Wieder gehen wir zu System -> Site Templates -> Cassiopeia Details and Dateien -> Overrides erstellen und klicken auf mod_articles_latest. Wir gehen auf die Registerkarte "Editor" und öffnen die Datei default.php unter html/mod_articles_latest und ersetzen den Code durch diesen:

<?php

/**
* @package Joomla.Site
* @subpackage mod_articles_latest
*
* @copyright (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;

if (!$list) {
return;
}

?>
<ul class="mod-articleslatest latestnews mod-list">
<?php foreach ($list as $item) : ?>
<?php
$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}
$iconClass = implode(',', $jcfields['icon']->rawvalue);
?>
<li >
<?php if(!empty($iconClass)) : ?>
<span class="<?php echo $iconClass; ?>" aria-hidden="true"></span>
<?php endif; ?>
<a href="/<?php echo $item->link; ?>" >
<span >
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
</ul>;

 Auch hier ersetze "icon" durch den Namen des Benutzerdefiniert Feldes. Und wenn du ein Textfeld erstellt hast, ersetze die Zeile $iconClass mit:

$iconClass = $jcfields['icon-2']->rawvalue;

Modul ohne Icons:

Modul mit Icons:

Bonus Tip 2

Möchtest du auch noch wissen, wie du den Titeln nur mit CSS Icons hinzufügen kannst?

Dies wäre eine einfache CSS-only-Alternative für einen Blog-Layout, ganz ohne die ganze Override Geschichte. Nachteil: Alle Blog-Beiträge haben dasselbe Icon. Du trägst ganz einfach folgendes in deine user.css ein (sie liegt unter /media/templates/site/cassiopeia/css - wenn sie noch nicht existierst, musst du sie anlegen):

.blog-item .page-header h2::before {
content: '\f1ea';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
};

Fontawesome

Wie findet man nun aber ein Symbol, zur Verwendung? Auf der Fontawesome-Website kann nach Symbolen gesucht werden. Aber nicht alle Icons können in Joomla verwendet werden. Man kann nach kostenlosen Icons und Brand-Icons in Solid oder Regular suchen:

Wenn du nun auf ein Icon klickst, öffnet sich ein modales Fenster:

Der Code in der oberen rechten Ecke (z. B. f015) ist übrigens der Verweis auf das Element, wie es in eine CSS-Datei eingefügt werden muss (vergiss nicht das \):

.blog-item .page-header h2::before {
content: '\f1ea';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
};

Die font-weight hängt von der Art des Symbols ab: 900 ist für einfarbige Icons und 400 für normale Icons.

Für die Verwendung im Benutzerdefiniert Feld kannt du die Klasse des Symbols kopieren (z. B. fa-solid fa-house).

Zusammenfassung

Mit ein paar Zeilen Code in Overrides kannst du viel an deiner Website ändern. Der in diesem Artikel vorgestellte Code kann auch für andere Joomla-Ansichten und Module angepasst werden. Sei kreativ und peppe deine Titel auf!

Damit nicht die ganzen Codes mühsam abgetippt werden müssen, habe ich (Chris) ein kleines ZIP zum herunterladen vorbereitet. Die Datei enthält die 3 Dateien, die in diesem Artikel modifiziert werden, sowie eine kleine Anleitung, was wohin gehört.