Contao: Artikel um Hintergrundbild erweitern

Eine neue Datei erstellen in /contao/dca/tl_article.php bzw. diese ergänzen.

Eine neue Palette einfügen

Als erstes soll für das Backend eine neue Palette eingefügt werden. Alternativ kann man auch eine vorhandene Palette erweitern. Dies wird hier aber zunächst nicht gemacht.

Dazu folgenden Code einfügen.

use Contao\CoreBundle\DataContainer\PaletteManipulator;

PaletteManipulator::create()

// add a new "custom_legend" after the "title_legend"
->addLegend('custom_legend', 'title_legend', PaletteManipulator::POSITION_AFTER)

// directly add new fields to the new legend
->addField('bgImage', 'custom_legend', PaletteManipulator::POSITION_APPEND)

// now the field is registered in the PaletteManipulator
// but it still has to be registered in the globals array:
->applyToPalette('default', 'tl_article')
;

Über den PaletteManipulator, den man im ersten Schritt importiert wird die Palette ‚custom_legend‘ hinter (POSITION_AFTER) der Palette ‚title_legend‘ eingefügt.
Wenn man wissen möchte, welche Paletten es z.B. im tl_article gibt, kann man sich den Code von tl_article bei Github hier ansehen.

Anschließend wird der neuen Palette direkt ein neues Feld ‚bgImage‘ hinzugefügt. Im letzten Schritt ‚applyToPalette‘ wird die neue Palette zum Bereich ‚default‘ hinzugefügt.

DCA definieren

Okay die Palette haben wir, fehlt noch das Feld selbst, das wir über einen DCA definieren müssen.

Der Code wird dazu, wie folgt ergänzt:

$GLOBALS['TL_DCA']['tl_article']['fields']['bgImage'] =
[
'inputType' => 'fileTree',
'reference' => &$GLOBALS['TL_LANG']['tl_article'],
'eval' => array(
'mandatory' => false,
'files_only' => true,
'files' => true,
'extensions' => 'svg,png,jpg',
'tl_class' => 'clr',
),
'sql' => "binary(16) NULL"
];

Hier handelt es sich um einen DCA für ein Bild.

Bezeichnungen für das neue Feld einfügen

In der Datei ‚/contao/languages/de/tl_article.php‘ folgenden Code ergänzen bzw. erstellen.
Hinweis: Das ist jetzt hier nur für die deutsche Sprache. Wenn man mehrere Sprachen unterstützen möchte, entsprechend in der jeweiligen Sprachdatei z.B. ‚/contao/languages/en/tl_article.php‘ entsprechend ergänzen.

$GLOBALS["TL_LANG"]["tl_article"]["bgImage"] = [
"Hintergrundbild",
"Bestimmen Sie ein Hintergrundbild des Artikels.",
];

$GLOBALS["TL_LANG"]["tl_article"]["custom_legend"] = "Hintergrundbild für FullSize Artikel";

Contao: Installtool aufrufen

Das Contao Installtool aufrufen um das Feld zur Datenbank hinzuzufügen.

Contao Anwendungscache löschen

Jetzt muss der Anwendungscache von Contao gelöscht werden, damit die Palette und das Feld auch im Backend erscheint. Man hat drei Möglichkeiten:
a) Über den Contao Manager
b) Über die Console/PHP direkt z.B. über

vendor/bin/contao-console cache:clear --env=dev
vendor/bin/contao-console cache:clear --env=prod

c) Die Dateien und Verzeichnisse im Verzeichnis ‚var/cache/‘ z.B. mit rm -R -f * löschen und dann noch mal das Installtool aufrufen (falls man keinen Contao Manager hat und keinen Zugriff via SSH auf PHP)

Frontend Ausgabe – mod_article Template bearbeiten

Im Template für den Artikel ‚mod_article.html5‘ kann man jetzt den Wert des Feldes ausgeben.

$image = FilesModel::findByUuid($this->bgImage);
$imagePath = $image->path;

Wenn alles funktioniert hat, sollte es im Backend z.B. so aussehen.