Artikel
von Patrick Froch

Heute komme ich zum vorerst letzten Teil der kleinen Produktdatenbank. In diesem Artikel wird sie so angepasst, dass man pro Produkt ein Bild hinterlegen kann, dies wird dann im Frontend ausgegeben. Der Beitrag baut auf die letzten letzten Posts auf und ich werde hier nicht mehr auf die Grundlagen eingehen. Es ist daher sinnvoll erst die anderen Beiträge der Reihe zu lesen:

DCA

Als erstes erweitern wir das DCA für die Produktdaten um die Felder für die Bilder. Zu Erinnerung, die Datei heißt system/modules/easy_extension/dca/tl_products.php.

In Zeile 20 wird die Palette erweitert und ab Zeile 34 werden die neuen Felder definiert. Es ist unbedingt darauf zu achten, dass die Einträge an der richtigen Stelle eingefügt werden.

Es müssen für das Bild eine ganze Reihe von Felder einfügt werden. Neben dem Feld für die Bildauswahl (singleSRC), werden noch die Felder für die alternativ Bezeichnung (alt), den Titel (imgtitle), die Größe (size), den Abstand (imagemargin), die Anzeige in einer Lightbox (fullsize) und die Bildunterschrift (caption) angelegt.

Leider gibt es an dieser Stelle eine kleine Abweichung vom Standard. Da wir in unserer Tabelle bereits ein Feld titel mit dem Namen des Produkts haben, müssen wir das Feld für den Title des Bildes imgtitle nennen. Wir müssen dies nachher in der Ausgabeklasse berücksichtigen. Ich werde später genauer darauf eingehen.

Da wir neue Felder angelegt haben, müssen wir nun die Datenbank aktualisieren!

Sprachdatei

Nun geben wir die Bezeichnungen für die Felder in die Datei system/modules/easy_extension/languages/de/tl_products.php ein.

Hier wurden einfach die Standardbezeichnungen aus dem Contao-Core verwendet.

Nun können wir im Backend die Produktbilder einpflegen.

Backend

Ausgabeklasse

Jetzt müssen wir noch die Ausgabeklasse überarbeiten. Ich beschränke mich in diesem Beispiel darauf, das Bild auf der Detailseite auszugeben. Die entsprechende Datei heißt system/modules/easy_extension/classes/elements/ContentProductDetails.php

Die Methode genFeOutput wurde ab Zeile 54 etwas angepasst. Das Laden des Produkts wurde geändert und ein Aufruf für unsere neue Methode ergänzt (Zeile 56). Am Ende wurde dann die Methode für das Einfügen des Bildes in das Template erstellt (insertImage). In dieser Methode wandeln wir in Zeile 80 das Objekt vom Typ \Database\Result in ein Array um. In Zeile 82 erzeugen wir aus der Uuid des datenbankgestützten Dateisystems den Pfad zur Originaldatei.

Die Methode aus dem Contao-Core, die wir in Zeile 83 aufrufen, um das Bild ins Template einzufügen, erwartet den Titel zwingend im Feld title. In Zeile 81 speichern wir aus diesem Grund den Inhalt des Feldes imgtitle in das Feld title. Da es sich bei dem Array um eine lokale Kopie der Daten handelt, hat dies keinen Einfluss auf den übrigen Programmablauf.

Das Umspeichern des Titels ist nur nötig, weil wir im DCA bereits ein Feld mit diesem Namen hatten. Wir hätten ebenso gut das Feld "title" in "name" (o.ä.) umbenennen können.

Template

Hier bearbeiten wir das Template für die Detailseite system/modules/easy_extension/templates/ce_product_details.html5.

Auch hierbei handelt es sich um die normale Ausgabe aus dem Contao-Core. In Zeile 22 beginnt der Image-Container. Das eigentliche Bild wird in Zeile 24 ausgegeben. In Zeile 27 wird die Bildunterschrift ausgegeben (falls vorhanden).

Nun wird das Bild im Forntend ausgegeben und kann in einer Lightbox vergrößert werden.

Backend

Fazit

Die Bildverarbeitung gehört sicher schon zu den etwas anspruchsvolleren Themen in Contao, weshalb dieses Tutorial auch schon um einiges fordernder war, als die ersten Teile der Serie. Die nächsten Beiträge zum Thema Contao werden vermutlich wieder etwas leichter verdaulich.

Zurück

Kommentare

Aufgrund der unklaren Rechtslage durch die DSGV habe ich mich entschlossen, die Kommentare bis auf Weiteres zu deaktivieren.