Bildmanagement

Es ist nicht notwendig, für kleine, mittlere und große Bilder unterschiedliche Dateien zu verwenden.
Das war in älteren Zen Cart Versionen sinnvoll.
Wenn Sie natürlich dezidiert unterschiedliche Bilder für die verschiedenen Ansichten verwenden wollen, dann arbeiten Sie weiterhin mit den Ordnern images/medium und images/large und benennen die Bilder entsprechend mit dem Suffix _MED bzw. _LRG
Seit Zen Cart 1.5.3 deutsch ist der Image Handler integriert, der ein Caching der verschiedenen Bildgrößen vornimmt.
Die Bilder werden automatisch auf die unter Konfiguration > Bilder eingestellten verschiedenen Bildgrößen gebracht. Ein Ausgangsbild reicht.
Ebenso ist es seit Zen Cart 1.5.3 deutsch nicht mehr nötig, etwaige zusätzliche Artikelbilder per FTP hochzuladen und sie vorher mühsam umzubenennen.

Empfehlungen für Artikelbilder

• Die Dateinamen dürfen keine Leerzeichen, keine Sonderzeichen und keine Umlaute enthalten
• Am besten auch keine Unterstriche (_) im Dateinamen verwenden, da ein Unterstrich ein Erkennungsmerkmal für zusätzliche Artikelbilder sein kann.
• Die Bilder sollten nicht riesig sein, es macht überhaupt keinen Sinn Originalbilder, die man z.B. vom Lieferanten in der Größe 4500×4500 Pixel bekommt unverändert hochzuladen. Als Faustregel kann man 800×800 Pixel verwenden. Eine Dateigröße von mehr als 500 KB macht ladezeitentechnisch wenig Sinn.
• Die Dateinamen sollten nicht zu lang sein. Das Feld products_image in der Tabelle products ist standardmäßig auf 64 Zeichen eingestellt. Wenn längere Dateinamen verwendet werden sollen, dann muss dieses Feld von z.B. varchar 64 auf varchar 128 oder 256 geändert werden.
• Die Bilder werden immer ins Verzeichnis images hochgeladen. Beim Bearbeiten eines Artikels ist dieses Verzeichnis vorausgewählt. Es macht großen Sinn, sich unter dem images Ordner diverse Unterverzeichnisse anzulegen. Das könnten z.B. Unterordner für die verschiedenen Kategorien oder Hersteller sein, je nachdem was im Shop Sinn macht. Es sollten nicht alle Artikelbilder einfach immer in images auf die oberste Ebene hochgeladen werden. Wenn ein Shop viele Artikel hat, dann wird das den Shop verlangsamen, da immer das gesamte images Verzeichnis nach dem Artikelbild durchsucht werden muss. Werden dagegen Unterverzeichnisse verwendet, dann muss immer nur das jeweilige Unterverzeichnis durchsucht werden.
• Statt kunterbunt Hochformate und Querformate zu mischen, macht es Sinn, quadratische Artikelbilder zu verwenden und falls nötig die Bilder eben z.B. mit weiß horizontal oder vertikal aufzufüllen. Vor allem wenn in den Artikellisten mit mehreren Artikeln pro Zeile gearbeitet wird (columns statt rows) sind quadratische Bilder zu empfehlen.

Image Handler

Zen Cart 1.5.7 deutsch enthält bereits das Modul Image Handler in der neuesten Version 5.2.0, hier einige Infos dazu:

Unter Konfiguration > Bilder können Sie alle Einstellungen zum Verhalten von Image Handler vornehmen.

Bitte beachten Sie zunächst die generellen Zen-Cart Einstellungen unter „Kleine Bilder – Höhe“, „Artikelliste – Höhe der Artikelbilder“, usw.
Also alle Höhenangaben für die kleinen Artikelbilder, die hier standardmäßig auf 100 gesetzt sind.
Sie können diese Werte auf einen anderen Wert als 100 setzen, nur tun Sie das konsistent, z.B. alle auf 160.
Nur dann wird Image Handler korrekt funktionieren
Es ist generell nicht nötig Breite UND Höhe zu definieren.
Entscheiden Sie sich für Breite oder Höhe, Image Handler macht den Rest.
Falls Sie den Hover-Effekt für die kleinen Bilder nutzen wollen (IH – Kleine Bilder – Zoom steht voreingestellt auf yes), beachten Sie, dass für die Vergrößerung die Größe genommen wird, die Sie für die mittleren Artikelbilder eingestellt haben (Artikelbeschreibung: Breite der Artikelbilder bzw. Artikelbeschreibung: Höhe der Artikelbilder)
Mittlere Artikelbilder werden nicht von einem Hover-Effekt vergrößert!

Tipp:
Stellen Sie immer nur die Bildbreite ein und stellen Sie die Höhe auf 0.
Die korrekte Höhe wird errechnet, wenn Sie folgende Einstellungen aktiv haben:
Bildgröße berechnen: true
Proportionale Bilder für Artikel & Kategorien verwenden: 1

Auch bei IH – Große Bilder – Maximale Breite oder Höhe stellen Sie am besten nur die Breite ein und stellen die Höhe auf 0.
Außer natürlich, Sie bereiten Ihre Bilder ohnehin vorher in einem Bildbearbeitungsprogramm auf die exakt passenden proportionalen Größen vor.

Bildgrößen

Es werden nicht nur numerische Werte akzeptiert, sondern auch Parameter mit einem angefügten „!“ (Ausrufezeichen), was einen force canvas size Modus anzeigt. Die Bildgrösse wird damit angepasst und zentriert im vorgegebenen Bereich positioniert, anstatt das Bild an nur eine der Dimensionen anzupassen sobald es nicht das selbe Seitenverhältnis wie die Grundeinstellung aufweist. Das klingt zu kompliziert? Probieren Sie es aus: Erstellen Sie einen hübschen, bunten Hintergrund und testen beide Werte mit und ohne das angefügte Ausrufezeichen.

Es gibt verschiedene Vorgehensweisen, um die Dimensionen von Bildern festzulegen.
Sie können dies auf dem üblichen Weg tun und einfach Breite (width) und Höhe (hight) in Pixels angeben. Setzen Sie beispielsweise width auf 100 und height auf 80. Wenn Ihr Bild Abmessungen von 200×200 Pixel hat, wird es auf 80×80 Pixel verkleinert, da die Höhe ja 80 Pixel nicht übersteigen darf.
Sie können auch nur entweder die Breite oder die Höhe angeben, beispielsweise mit 100, und die andere Dimension leer lassen (oder auf 0 stellen). Nun haben Sie eine Breite oder Höhe festgelegt, in der das Bild angezeigt werden soll. Dabei wird das Seitenverhältnis beibehalten.
Sie können die Abmessungen auch wie im ersten Beispiel angeben, jedoch ein „!“ (Ausrufezeichen) an eine der Dimensionen anhängen (beispielsweise 80! für die Höhe kleiner Bilder). Die angepaßten Bilder werden auf einem Feld, das genau über die angegebenen Masse verfügt, mittig angezeigt. Wenn Sie also 100×80! festgelegt haben, wird Ihr 200×200 Pixel Bild von vorhin auf 80×80 Pixel reduziert und zentriert in einem 100×80 Pixel Feld mit der angegebenen Hintergrundfarbe angezeigt. Betrachten Sie es als eine Art erzwungene Bildgrösse ohne durcheinandergebrachte Seitenverhältnisse.

Watermarks

Wenn Sie Ihre Bilder mit einem Wasserzeichen schützen wollen, können Sie das unter Konfiguration > Bilder für die kleinen, mittleren und großen Artikelbilder separat aktivieren. Benötigt werden dazu folgende Bilddateien für die Wasserzeichen:

• images/watermark.png
• images/medium/watermark_MED.png
• images/large/watermark_LRG.png

In dieser Installation sind bereits Beispielwasserzeichen in Form eines Zen-Cart Logos enthalten. Überschreiben Sie diese Beispieldateien mit Ihrem eigenen Wasserzeichen. Die Position des Wassezeichen können Sie ebenfalls unter Konfiguration > Bilder einstellen: IH – Wasserzeichen – Position. Voreingestellt ist zentriert.

GD libraries und Image Magick

Um Bilder und ihre Grösse anzupassen, muss zusätzlich zu Image Handler 5.1.4 entweder GD libraries (ab Version 2) oder ImageMagick (ab Version 6) installiert sein. Um herauszufinden, ob Ihre PHP-Version GD libraries anbietet, suchen Sie im Admin unter Tools -> Server Info nach „GD“. Ob eine ImageMagick-Installation vorhanden ist, erfähren Sie von Ihrem Hostinganbieter.
Standardmäßig wird mit GD libraries gearbeitet. Wenn Sie stattdessen Image Magick verwenden wollen, dann müssen Sie in folgender Datei eine Änderung vornehmen:
includes/extra_configures/bmz_image_handler_conf.php

Hier ist standardmäßig folgender Eintrag:

$ihConf['im_convert'] = '';

Das bedeutet, dass Image Magick nicht verwendet wird.

Um ImageMagick zu verwenden, geben Sie hier den Pfad zu Image Magick an, üblicherweise ist das:

$ihConf['im_convert'] = '/usr/bin/convert';

Je nach Provider könnte der Pfad auch anders lauten, bitte im Zweifel mit Ihrem Webhoster abklären

Gewünschte Dateitypen

Sie können für jede Bildgröße wählen zwischen .png, .jpg, .gif oder no_change (keine Änderung). Heraufgeladene Bilder werden so belassen wie sie sind, aber die generierten Dateien simulieren den Dateityp, den Sie hier angeben. GIF ist gut für kleine Vorschaubilder geeignet und kann Transparenz simulieren. Mit JPG ist keine Transparenz möglich, es bietet jedoch ein sehr gutes Dateiqualität/Druck Verhältnis, insbesondere für Fotografien. Für größere und mittlere Bilder ist dieser Dateityp am ehesten geeignet. PNG Dateien simulieren alpha Transparenz und ebenso viele Farben wie jpg, haben jedoch eine größere Dateigröße als jpg und gif. Internet Explorer hat in älteren Versionen Schwierigkeiten, alpha Transparenz anzuzeigen, so daß Sie besser mit gif arbeiten, sofern Sie Transparenz benötigen.

Druckqualität

Sie können die Qualität für die Ausgabe als jpg für kleine, mittlere und große Bilder vorgeben. Diese Einstellung ist auf einer Skala von 0 bis 100 für alle drei Bildgrössen auf 85 festgesetzt und ist sehr gut, außer wenn Sie entweder außerordentlich genauen Druck oder extrem kleine Bilder benötigen. Ein höherer Wert bringt bessere Qualität größerer Dateien.

Hintergrundfarbe

Sie können die Hintergrundfarbe jeder Bildgrösse durch Eingabe der RGB-Farbwerte aller drei Farbkomponenten (rot, grün und blau), getrennt durch Doppelpunkte, festlegen. Die Werte der Farbkomponenten bewegen sich zwischen 0 und 255. Die folgenden Beispiele sollen zeigen, wie die Hintergrundfarbe eingestellt werden kann:

• 255:255:255 (weiss)
• 255:0:0 (rot)
• 255:200:200 (hellrot)
• 0:255:0 (grün)
• 0:0:255 (blau)
• 255:0:255 (violett)
• 255:255:0 (gelb)

Wenn Sie die Transparenz eines hochgeladenen Bildes beibehalten möchten, müssen Sie den Wert der Hintergrundfarbe auf transparent stellen.
Mit gif Bildern können Sie beispielsweise transparent 255:255:255 anstelle von absoluter Transparenz festlegen, so daß die halbdurchsichtigen Bildpunkte mit der angegebenen Hintergrundfarbe verbunden werden. Bildpunkte mit einer Transparenz-Schwelle von mehr als 90% (dies ist der Standard) werden volltransparent dargestellt. Wenn Sie die besagte Farbe auf den Wert der Hintergrundfarbe Ihrer Webseite einstellen, erhöht dies infolge einer Reduktion des „Treppeneffekts“ die sichtbare Qualität der gifs beträchtlich.

Ein Beispiel

Sie haben mit Ihrer Digitalkamera ein Bild von einem netten Produkt geschossen und den Hintergrund mit Ihrem Lieblings-Fotoprogramm entfernt. Sie speichern diese Datei als Portable Network Graphic (png), um den alpha channel beizubehalten, der die transparenten Zonen festlegt, durch die hindurch Sie Ihre Webseite betrachten wollen. Nehmen wir an, das Bild ist 600 Pixel breit und 800 Pixel hoch (600×800). Für die kleinen Bilder haben Sie einen Wert von 100×80 eingegeben und für die mittleren 150×120.
Da die Produktliste-Ansicht verschiedene Farben für die Anzeigereihen hat, möchten Sie wenigstens für die kleinen Bilder die Transparenz erhalten. Internet Explorer kann in älteren Versionen nicht png Bilder mit Transparenz anzeigen, also verwenden Sie besser gifs. Sie wählen also .gif als Dateityp für kleine Bilder und transparent für den Hintergrund der kleinen Bilder.
Nun denken Sie an die mittleren und großen Bilder. Sie möchten sie nicht im gif Format haben, da sie nicht sehr gut gedruckt werden, und Sie möchten auch gerne mehr als nur 256 Farben in den hochauflösenden Bildern zur Verfügung haben. Ausserdem brauchen Sie keine Transparenz, da Sie nur eine Hintergrundfarbe auf den Produkt-Infoseiten und im Popup-Fenster haben, also benutzten Sie .jpg. Dieses Format wählen Sie also für Ihre mittleren und großen Bilder aus. Nehmen wir an, Sie haben sowohl auf den Produkt-Infoseiten als auch im Popup-Fenster einen weißen Hintergrund, deshalb geben Sie 255:255:255 in die Felder für den Hintergrund der mittleren und großen Bilder ein.

Benutzen von Image Handler

Da Image Handler meistens im Hintergrund arbeitet, ohne dass ihn jemand bemerkt, gibt es nicht viel dazu zu sagen. Sie können Image Handler auf zwei Arten aufrufen:
1)
Admin → Webshop → Kategorien & Artikel
Klicken Sie beim jeweiligen Artikel auf das kleine Icon zwischen dem Kopieren- und dem Attribute-Icon klicken, um die Image Handler Bildverwaltung für den jeweiligen Artikel aufzurufen.
2)
Admin → Tools → Image Handler 5
Bietet eine eigene Oberfläche , um Kategorien und Artikel anzuzeigen und die Bilder hochzuladen
Natürlich können Sie auch weiterhin Artikelbilder über die Produktinfoseiten hochladen.

Wichtige Info zu den zusätzlichen Artikelbildern

Wenn Sie zu einem Artikel zusätzliche Artikelbilder hochladen, dann achten Sie darauf, dass die zusätzlichen Bilder, denselben Dateityp wie das Hauptbild haben!
Wenn das Hauptbild zu einem Artikel z.B. ein gif ist, dann müssen auch die zusätzlichen Artikelbilder dieses Artikels gifs sein. Würden Sie stattdessen ein .jpg hochladen, dann wird das dieses zusätzliche Artikelbild nicht angezeigt werden. In der Image Handler Maske sehen Sie dann auch einen rot unterlegten Hinweis auf den falschen Dateityp.

Artikel als pdf downloadenArtikel ausdrucken