Contao: Artikelbild für die Produktliste

von Patrick Froch (Kommentare: 3)

Es kam in den Kommentaren unter einem Artikel hier in meinem Blog die Frage auf, wie man ein Produktbild in der Liste anzeigen lassen kann. Da dies doch etwas umfangreicher ist, als ich zu erst dachte, widme ich dem Thema hier einen eignen Artikel.

Vielen Dank an Sebastian für die Anregung. Wenn auch ihr Wünsche für weitere Theme habt, lasst es mich einfach wissen. Ich kann nicht versprechen, dass ich zu jedem Vorschlag einen Artikel schreibe, aber was mir möglich und sinnvoll erscheint, werden ich gerne aufnehmen.

Der Beitrag baut auf die letzten letzten Posts zum Theme auf und ich werde hier nicht mehr auf die Grundlagen eingehen. Es ist daher sinnvoll erst die anderen Beiträge der Reihe zu lesen:

Grundlagen

Die Struktur des DCAs und der Sprachdateien ist aus dem Artikel Contao: Bild für den eigenen Menüpunkt bekannt. Hier sind keine Änderungen nötig.

Ausgabeklasse

Die Datei für die Ausgabeklasse heißt system/modules/easy_extension/classes/elements/ContentProduct.php und ist ähnlich bereits aus Contao: Bild für den eigenen Menüpunkt bekannt.

In der Methode insertImage werden die Pfade (Zeile 76) und die Bildgrößen (Zeile 77) gesetzt. Sie wird in Zeile 48 aufgerufen. Da ich es einfacher finde, wandle ich gleich die Daten in ein Array um (Zeile 73). Dies ist nicht zwingent erforderlich, macht die Verarbeitung aber leichter.

Template

Nun müssen wir noch das Template für die Ausgabe der Bilder anpassen. Wir bearbeiten die Datei templates/ce_product.html5, sie ist aus Contao: Bild für den eigenen Menüpunkt bekannt. Ich verwende hier bewusst nicht die Version mit den Links zur Detailseite aus Contao: Detailseite für eigenen Menüpunkt), es würde dort aber genauso funktionieren.

Nun sollte das Bild in der Liste angezeigt werden. Es fehlt nur noch die Anpassung der Bildgröße, damit nicht immer die Bilder in der Originalgröße geladen werden. Da dies aber ebenfall ein umfangreicheres Thema ist, werde ich es weider in einem extra Artikel behandeln.

Zurück

Einen Kommentar schreiben

Kommentar von Sebastian Schreier |

Hallo Patrick,

vielen Dank für den Artikel. Ich habe es mit den Tipps des anderen Artikels dann auch so ähnlich umgesetzt wie du. Ich wollte nur vorher bei dir nachfragen, ob das wirklich der "Best Practice"-Weg ist, den ich da versucht habe.

Mein Verbesserungsvorschlag für Zeile 16 der Datei "ce_product.html5" wäre:
<?php
echo $this->generateImage($product['singleSRC'], $product['alt'], (($product['imgtitle']; != "")?'title = "'.$product['imgtitle'];.'"':""));
?>

So erzeugt Contao selbst das Bild und man muss sich nicht selbst darum kümmern.

Beste Grüße

Sebastian

Antwort von Patrick Froch

Hallo Sebastian,

ich würde nicht $this->generateImage(); verwende, da es deprecate ist. Besser ist \Contao\Image::getHtml(). Bei dieser Methode wird das Bild aber immer in Originalgröße eingefügt. Dies kann bei größeren Bildern ein Problem sein.

Viele Grüße,
Patrick

Kommentar von Znrl |

Man könnte auch

addImageToTemplate()

nehmen, das wird auch in den Contao-Modulen genutzt und bietet im Template vermutl. die größte Flexibilität.

Antwort von Patrick Froch

Hallo Znrl,

da muss ich Dir widersprechen: addImageToTemplate() funktioniert nur solange Du pro Element nicht mehr als ein Bild hast und Deine DB-Felder genauso heißen, wie die Contao-Standardfelder. Flexibel finde ich das nicht gerade. Auch finde ich es unschön, das addImageToTemplate() als Parameter eine Instanz des Templates erwartet und die Daten dann direkt ins Template einfügt. Ich nutze addImageToTemplate() im Inhaltselement der Detailseiten, weil es dort nur ein Bild gibt und es nicht im Template aufgerufen werden muss. Das ist aber sicher Geschmackssache. In meinem nächsten Artikel zeige ich eine wirklich flexible Lösung, für das Einfügen beliebiger Bilder inkl. Anpassung der Größe.

Viele Grüße,
Patrick

Kommentar von Znrl |

Klar gehts das sogar die Gallerie nutzt die Funktion.
Die Fexibilität, die ich meine ist auch spätere Templateanpassungen von dritten zu ermöglichen.
Bei Image::getHtml z.B. habe ich im Template nur einen String.

Antwort von Patrick Froch

In Bezug auf die Flexibilität im Vergleich mit \Image::getHtml() stimme ich Dir vollkommen zu. 

Bei der Galerie aber nicht. Die Galerie nutzt hier einen unschönen Workaround, in dem kein Templateobjekt, sondern eine Standardklasse übergeben wird um die Daten zu erhalten. Dies wird dann in das Array der Daten eingefügt und dieses wiederum ans Template übergeben. Das ist schon ziemlich grenzwertig. (Wie gesagt, nur meine persönliche Meinung)

Außerdem liegen die Bilder in der Galerie in einem MultiSRC, also im einem DB-Feld vor. Wenn man aber zwei komplette Sets an Feldern inklusive aller Einstellungen hat, oder aus irgendwelchen Gründen andere Namen nutzen muss, funktioniert es auch nicht mehr.

Viele Grüße,
Patrick