Icon-Picker

Möchte man Datensätze mit einem Icon versehen, so kann man das Attribut Datei verwenden oder wenn die Icons per Font eingebunden werden, die entsprechenden CSS-Klassen. Die Auswahl der Icons ist dann aber nicht sehr benutzerfreundlich.

Für Contao gibt es verschiedene Erweiterungen, die einen speziellen Icon-Picker zur Verfügung stellen.

Um diese Funktionalität auch in MM bereit zu stellen, könnte man ein eigenes Attribut erstellen. Die meisten Icon-Picker speichern nur Strings bzw. serialisierte Array, so dass man auch mit kleinen DCA- und Template-Anpassungen das Attribut Text verwenden kann.

Folgend werden die Anpassungen für gängige Picker-Erweiterungen vorgestellt:

Bitte die entsprechenden Lizenzbedingungen der Icons bzw. Fonts beachten!

Voraussetzung

Zunächst muss ein Attribut Text angelegt werden inklusive Migration und Einbindung in der Eingabemaske und bei den Rendereinstellungen.

Für die DCA-Anpassungen ist eine PHP-Datei contao/dca/mm_employees.php anzulegen. Erscheint statt des Labels „LABEL NOT SET“, bitte lt. Anleitung fixen.

Die DCA-Anpassung kann aus den jeweiligen Beispielen übernommen werden - anzupassen sind der Name des MetaModel (mm_employees) und der Spaltenname des Attributs *_icon (z. B. rst_icon).

Für die Ausgabe sind eigene Templates - abgeleitet von mm_attr_text - anzulegen und bei den Rendereinstellungen des Attributs auszuwählen. Dort können auch zusätzliche CSS-Angaben für Größe oder Farbe hinterlegt werden.

RockSolid Icon Picker

Erweiterung auf Github.

Die Erweiterung arbeitet mit einem eigenen Icon-Font - die SVG-Dateien kann man mit dem SVG-Font-Generator umwandeln und ggf. auch eigene SVG-Icons hinzufügen. Wer ein Theme von RST im Einsatz hat, findet die fertigen Font-Dateien im dem entsprechenden Theme-Paket.

DCA-Anpassung:

1<?php
2// contao/dca/mm_employees.php
3$GLOBALS['TL_DCA']['mm_employees']['fields']['rst_icon']['inputType']        = 'rocksolid_icon_picker';
4$GLOBALS['TL_DCA']['mm_employees']['fields']['rst_icon']['eval']['iconFont'] = '/files/themes/iconfont/rocksolid-icons.svg';

Template:

1<?php
2// templates/mm_attr_text_rst_icon.html5
3<span class="<?= $this->additional_class ?>" data-icon="&#x<?= $this->raw ?>;"></span>

CSS:

 1/* files/themes/css/icons.css */
 2/* Icon font */
 3@font-face {
 4  font-family: "RockSolid Icons";
 5  src: url("../iconfont/rocksolid-icons.woff2") format("woff2"), url("../iconfont/rocksolid-icons.svg") format("svg");
 6  font-weight: normal;
 7  font-style: normal;
 8}
 9
10/* Icon attribute */
11*[data-icon]:before,
12*[class^="icon-"]:before,
13*[class*=" icon-"]:before {
14  font: 100%/1 "RockSolid Icons";
15  -webkit-font-smoothing: antialiased;
16  font-smoothing: antialiased;
17  text-rendering: geometricPrecision;
18  text-indent: 0;
19  display: inline-block;
20  position: relative;
21  margin-right: 0.26667em;
22}
23*[data-icon]:before {
24  content: attr(data-icon);
25}
26*[data-icon].after:before {
27  content: none;
28}
29*[data-icon].after:after {
30  font: 100%/1 "RockSolid Icons";
31  content: attr(data-icon);
32  -webkit-font-smoothing: antialiased;
33  font-smoothing: antialiased;
34  text-rendering: geometricPrecision;
35  text-indent: 0;
36  display: inline-block;
37  position: relative;
38  margin-left: 0.26667em;
39}

Ausgabe BE & FE:

img_rst_01.png

img_rst_02.png

Marco Cupic Font Awesome Icon Picker

Erweiterung auf Github.

Ab Version 7 sind für das Widget keine Angaben in der config.yaml notwendig - jedoch werden die Icon-Daten direkt vom Fontawesome-Server abgerufen. Wer das nicht möchte, kann die Dateien auch direkt auf dem Webserver einbinden. Dazu kann man das Iconpaket von der Webseite downloaden und entpacken. Die Ordner js/, metadata/ und webfonts/ müssen auf dem Webserver in einen entsprechenden Ordner in files/.

Die Konfiguration sieht dann z. B. wie folgt aus:

1# config/config.yaml
2markocupic_fontawesome_icon_picker:
3  fontawesome_source_path: 'files/themes/fa7_icons/js/all.min.js'
4  fontawesome_allowed_styles:
5    - fa-regular
6    - fa-solid
7    - fa-brands
8  fontawesome_meta_file_path: 'files/themes/fa7_icons/metadata/icons.yml'

Bei den Icons stehen je nach Konfiguration von fontawesome_allowed_styles und vorhandenen Icons die Label R Regular, S Solid, B Brands usw. als Auswahlbutton zur Verfügung - die Reihenfolge bestimmt den angezeigten Iconstyle im Widget.

Benutzer einer FA-Pro-Variante orientieren sich an der Beschreibung der Readme.

Es ist für beide Varianten zu beachten, dass man die Icon-Fonts für das FE selbst per CSS einbinden muss.

DCA-Anpassung:

1<?php
2// contao/dca/mm_employees.php
3$GLOBALS['TL_DCA']['mm_employees']['fields']['mcfa_icon']['inputType'] = 'fontawesomeIconPicker';

Template:

Da die Speicherung als serialisiertes Array erfolgt, muss sowohl das Template für html5 als auch für text angelegt werden.

 1<?php
 2// templates/mm_attr_text_mcfa_icon.html5
 3/** Nach Deserialisierung steht ein Array mit drei Angaben zur Verfügung z. B.
 4* Array
 5* (
 6*     [0] => circle-check
 7*     [1] => fa-regular
 8*     [2] => f058
 9* )
10*/
11
12$mcfaData = \Contao\StringUtil::deserialize($this->raw, true);
13?>
14<i class="<?= $mcfaData[1] ?? '' ?> fa-<?= $mcfaData[0] ?? '' ?><?= $this->additional_class ?>"></i>

1<?php
2// templates/mm_attr_text_mcfa_icon.text
3<?php
4$mcfaData = \Contao\StringUtil::deserialize($this->raw, true);
5?>
6<?= $mcfaData[1] ?? '' ?> fa-<?= $mcfaData[0] ?? '' ?>

Ausgabe BE & FE:

img_mcfa_01.png

img_mcfa_02.png

NetGroup IconToolkit

Erweiterung auf Github.

Die Erweiterung ist für Font Awesome konzipiert und liefert diese in der Version 7.1 mit. Es ist aber auch möglich, eigene Iconfonts zu laden oder einen aktuelleren Iconsatz. Für die Einbindung des Fonts, gibt es ein FE-Modul.

DCA-Anpassung:

1<?php
2// contao/dca/mm_employees.php
3use NetGroup\IconToolkit\Classes\Contao\Widgets\IconPickerWidget;
4
5$GLOBALS['TL_DCA']['mm_employees']['fields']['ng_icon']['inputType'] = IconPickerWidget::TYPE;

Template:

1<?php
2// templates/mm_attr_text_ng_icon.html5
3<i class="<?= $this->raw ?><?= $this->additional_class ?>"></i>

CSS:

1// /* Klassen 'fa-2x fa-green' in Rendersettings */
2.fa-green {
3  color: #6bb710;
4}

Ausgabe BE & FE:

img_ng_01.png

img_ng_02.png

Lukas Bableck SVG Icon-Picker

Erweiterung auf Github.

Die Erweiterung ist für Font Awesome konzipiert - es ist aber auch möglich, eigene SVG-Icons wie z. B. Lucide oder Bootstrap zu laden.

Die Icons werden als „echte“ SVGs ausgespielt, so dass Anpassungen an Farbgebung usw. möglich sind.

DCA-Anpassung:

1<?php
2// contao/dca/mm_employees.php
3$GLOBALS['TL_DCA']['mm_employees']['fields']['lbsvg_icon']['inputType']                 = 'svgIconPicker';
4$GLOBALS['TL_DCA']['mm_employees']['fields']['lbsvg_icon']['eval']['sourceDirectory']   = '/files/themes/svg-icons/svgs-full/regular';
5$GLOBALS['TL_DCA']['mm_employees']['fields']['lbsvg_icon']['eval']['metadataDirectory'] = '/files/themes/svg-icons/metadata';

Template:

 1<?php
 2// templates/mm_attr_text_lbsvg_icon.html5
 3use Contao\System;
 4use Lukasbableck\ContaoSVGIconPickerBundle\Twig\Extension;
 5
 6$rootDir = System::getContainer()->getParameter('kernel.project_dir');
 7$svgTool = new Extension($rootDir);
 8
 9$svg = \str_replace('class="', 'class="' . \trim($this->additional_class) . ' ', $svgTool->renderSVG($this->raw));
10?>
11
12<?= $svg ?>

CSS:

1/* Klassen 'lbsvg_icon lbsvg_green' in Rendersettings */
2svg.lbsvg_icon {
3  width: 33px;
4  height: 33px;
5}
6
7svg.lbsvg_green {
8  color: #6bb710;
9}

Ausgabe BE & FE:

img_lbsvg_01.png

img_lbsvg_02.png

Hinweise zu Fontawesome

Das Fontawesome-Iconpack kann man von der Webseite downloaden. Die „Free-Variante“ enthält die Regular, Solid und Brands. Will man die SVG-Icons einsetzen, empielt sich den Ordner svg-full/ einzubinden - hier sind alle Icons quadratisch mit entsprechendem Rand.

Wird im FE das CSS von Fontawesom mit ausgespielt wie z. B. bei NG IconToolkit, dann können die entsprechenden Stylingklassen wie fa-2x für doppelte Größe bei den Rendersettings angegeben werden. Eine Übersicht dieser Angaben ist in der FA-Dokumentation zu finden.

Hinweise zu Lucide-Icons

Contao setzt ab Version 5.5 im Backend Icons aus dem Paket Lucide ein. Um diese auch im FE zu verwenden, gelingt dies am einfachsten mit der Erweiterung SVG Icon-Picker.

Das gesamte Paket kann man sich von Github über „Code > Download ZIP“ downloaden und entpacken. Der Ordner icons/ enthält alle SVG-Icons und muss auf den Webserver in einen geeigneten Ordner unter files.

Anschließend muss der Ordner in der Konfiguration angegeben werden - z. B.

1<?php
2// contao/dca/mm_employees.php
3$GLOBALS['TL_DCA']['mm_employees']['fields']['lbsvg_icon']['inputType']                 = 'svgIconPicker';
4$GLOBALS['TL_DCA']['mm_employees']['fields']['lbsvg_icon']['eval']['sourceDirectory']   = '/files/themes/lucide-icons';
5//$GLOBALS['TL_DCA']['mm_employees']['fields']['lbsvg_icon']['eval']['metadataDirectory'] = '/files/themes/svg-icons/metadata';

Lucide stellt die Icons nicht automatisch als Font zur Verfügung. Die Dateien können aber in einen Font überführt werden. Die SVG-Dateien müssen vorher von Strichen in Füllungen umgewandelt werden - z. B. mit Hilfe des Iconly-Tools „Convert SVG Strokes to Fills” oder dem npm-Paket „svg-outline-stroke“. Anschließend kann die Lucide-Icon-Schriftart mit IcoMoon oder npm-Paket „fantasticon“ generiert werden.

Hinweise zu Bootstrap-Icons

Bootstrap 5 beinhaltet eine eigenes Icon-Paket mit SVG-Dateien und einem Font als woff und woff2.

Man kann sich das Paket von der Bootstrap-Webseite downloaden, entpacken und in einen geeigneten Ordner unter files ablegen.

Für die Verwendung der SVG-Dateien kann man die Erweiterung SVG Icon-Picker einsetzen - in der DCA-Konfiguration für sourceDirectory den Pfad entsprechend anpassen.

Möchte man im FE lieber die Ausgabe als Font, so kann man bei Verwedung der Erweiterung SVG Icon-Picker die SVG-Icons für die Auswahl im Backend verwenden und für das FE das Template anpassen - z. B.

1// templates/mm_attr_text_lbsvg_bs5_icon.html5
2<i class="bi bi-<?= basename($this->raw, '.svg') ?><?= $this->additional_class ?>"></i>

Zusätzlich muss die BS-CSS bootstrap-icons.min.css für das FE entsprechend eingebunden werden - die Datei ist im Downloadpaket mit enthalten.

Eine Anpassung des Styling der Icons ist z. B. mit den Klassen „text-*“ oder Klassen „fs-*“ möglich; die Klassen können bei den Rendersettings des Attributs eintragen werden. Dafür muss zusätzlich die „normale“ Bootstrap-CSS eingebunden sein.