Bildverwaltung in YES4trade

Zum Verständnis eines Templates: Ein Design beschreibt das Aussehen und Verhalten z.B. eines Webshops. Was passiert beim Klicken auf diesen Button? Wie ist die Seitenaufteilung und welchen Eindruck soll der Shop dem Kunden vermitteln? Sind diese und weitere Fragen geklärt, fließen diese Vorgaben im Rahmen der technischen Umsetzung in einem Template zusammen. Das Template ist also wie ein Kleidungsstück, das beim Wechseln den darin befindlichen Menschen immer wieder anders aussehen läßt.

Das Template sorgt für die Bilddarstellung

Sie haben nun beim Hochladen Ihre Bilder automatisch in verschiedene Größen abgelegt. Diese haben an verschiedenen Stellen im Shop unterschiedliche Aufgaben. Ein Template hat für Texte, Buttons, etc. und eben auch Bilder Platzhalter (Variablen), die vom YES4trade-System mit den richtigen Inhalten gefüllt werden. Sie kennen das vielleicht von einem Word-Serienbrief her.

Das Template sorgt also für die richtige Platzierung (Funktion) und auch für das richtige Aussehen (Layout). Eine Template besteht aus einer beschreibenden Programmiersprache, die Funktion und Design zusammenbringt.

Das endgültige Erschinungsbild z.B. eines Webshops setzt sich aus mehreren Komponenten zusammen. Wichtiges Bestandteil ist das beschreibene Template.

Beispiel: 10 Bilder hochgeladen, nur 4 Stück sind im Webshop zu sehen

Im Hintergrund versorgt das YES4trade-System das Template mit den richtigen Daten und wertet die Benutzereingaben aus. Nun ist es so, dass das YES4trade-System enorm viele Funktionen anbietet, die durch die meisten Templates gar nicht genutzt werden. So kann es auch vorkommen, dass Sie sich für die Produktpräsentation bis zu 20 Bilder wünschen, diese aber vom Template nicht berücksichtigt werden.

Dort sind dann zwei Dinge zu tun:

1. Einfügen der fehlenden Platzhalter in die Templatedatei, die für die Produktdetailansicht zuständig ist.

2. Vorgeben, wie die Darstellung der Bilder aussehen soll, in der Regel durch Einsatz von CSS.

Grundkonfiguration der Artikelmaße

Die Artikelmaße müssen in der YES4trade-Grundkonfiguration festgelegt werden. Dieses sollten Sie unbedingt machen, bevor sie Mengen von Bildern zu neuen Artikel hochladen und dann feststellen, dass das Template (z.B. Shop-Layout, Ebay-Präsenz) ganz andere Maße haben möchte.

Diese Maße müssen für alle 4 Bilder angegeben werden (Thumbnail, Infobild, Popup und Ebay-Galeriebild). Für Breiten und Höhenangaben gelten folgende Regeln:

• Wird die Höhe und die Breite angegeben, so werden beide Voreinstellungen nur erreicht, wenn das Seitenverhältnis des Originalbildes identisch mit den Konfigurationsdaten ist. Andernfalls bestimmt das Maß die Größe des neu erzeugten Bildes, was zuerst erreicht wird. Verzerrt wird das Bild nicht.

• Wird nur die Höhe oder nur die Breite eingegeben, so ist diese maßgeblich. Das die andere Kantenlänge wird proportional angepaßt.

Vor dem Hochladen von Bildern die Grundkonfiguration erledigen!

Zum Vermeiden doppelter Arbeit muss die Bildergrundkonfiguration vor dem Hochladen weiterer Artikelbilder vorausschauend festgelegt werden.

Das Hochladen der Artikelbilder

Die üblichen Grafikformate wie JPG, GIF oder PNG können auf den YES4trade-Server hochgeladen werden. Zwar werden die Bilder im Hochladevorgang auch gleichzeitig in die oben genannten Formate umgerechnet und erhalten dadurch eine optimale Dateigröße. Aber trotzdem sollten die Originalbilder, die sie ins System hochladen, nicht zu groß sein.

Wenn z.B. das größte im Template benötigte Bild 800 Pixel (px) breit sein soll, dann entspricht dies max. ca. 200KByte Dateigröße. Wenn aber die Produktbilder mit einer Digitalkamera selbst aufgenommen wurden oder Herstellerbilder in einer besonders guten Qualität vorliegen, dann sind die Bilder selten weniger als 3000px breit und bringen somit einen Speicherbedarf von 2-4Mbyte pro Bild mit. Da sollte man aufpassen:

1. Der Upload auf den Server dauert auch bei einer DSL-Verbindung mehrere Minuten pro Bild. Im Zweifel unterbricht der Browser irgendwann die Verbindung.

2. Bei derart großen Dateien ist der verfügbare Speicherplatz auf dem Server bald voll.

Beim Hochladen der Bildes wird dies automatisch entsprechend der Grundkonfiguration für die verschiedenen Zwecke mehrfach kopiert.

Die Bilder werden sofort nach der Auswahl der Datei hochgeladen. Der Vorgang muss also nicht extra durch „Speichern“ bestätigt werden. Ist das Bild hochgeladen wird direkt im Anschluss das Bild angezeigt. Die Anzahl max. verfügbarer Bilder pro Artikel wird in der YES4trade-Grundkonfiguration eingestellt. Allerdings gibt das Design (also das Template) vor, wieviel Bilder tatsächlich angezeigt werden können und wie.

Das Bild Nr. 1 dient künftig zusätzlich im Backend bei Produktauflistungen der Wiedererkennung auch für MitarbeiterInnen, die sich nicht so gut mit den Produkten auskennen. Bei allen anderen Bildern kann per Hakenmarkierung bestimmt werden, ob diese innerhalb einer Shoppräsenz angezeigt werden dürfen. Bei anderen Marktplätzen wie z.B. Ebay wird dies bei Bedarf direkt bei der Konfiguration des für Ebay vorbereiteten Sammlerartikels individuell eingestellt.

Das Löschen des jeweiligen Bildes erfolgt über das Mülleimersymbol. Das Herunterladen des urspünglichen Originalbildes erfolgt über das Downloadsymbol.

YES4trade kennt 5 Bildergrößen. Zusätzlich zum Originalbild werden beim Hochladen in Ihr System vier Bilder automatisch im Hintergrund neu berechnet und in verschiedenen Ordnern gespeichert.

1. Artikel-Thumbnail: wird verwendet in Listendarstellungen
2. Artikel-Info-Bild: wird verwendet auf den Produktdetailseiten
3. Artikel-Popup-Bild: wird verwendet beim Klick auf das Produktdetailbild
4. Ebay-Kategorie-Bild: wird verwendet bei Ebay-Listungen

Die genannten Verwendungszwecke sind üblich. Es bleibt aber der kreativen Templategestaltung überlassen, diese Bilder auch anders zu verwenden.

Produktbilder sind ein wesentlicher Bestandteil der Produktdarstellung und sie entscheiden wesentlich mit, ob ein Interessent sich für Ihr Produkt entscheidet. Es lohnt sich also, die Bilderverwaltung von YES4trade genauer anzuschauen.

Es ist zudem wichtig, zu einem sehr frühen Zeitpunkt die zukünftigen Maße der Produktbilder festzulegen. Das Template (das Design des Webshops) verlangt je nach Ausführung nach bestimmten Bildgrößen. Die Vorgaben des Templates entscheidet darüber, wie das Bild dargestellt wird.

Bildgröße und Seitenverhältnis

Eine Bildgröße hat eine Breite und eine Länge, die in Pixeln (Bildpunkten) definiert wird. Daraus ergibt sich ein Seitenverhältnis. Dabei meint ein Seitenverhältnis von 1:1 eine identische Höhe und Breite (z.B. 100 x 100 Pixel (px). Bei 4:3 passt eine identische Menge an Bildpunkten 4x in die Breite und 3x in die Höhe (z.B. 4 x 100px zu 3 x 100px, also 400 x 300px).

Bild 100 x 100 Pixel / Seitenverhältnis 1:1

Bild 400 x 300 Pixel / Seitenverhältnis 4:3

Bildinformation, Bilddarstellung und Ladezeiten

Bilder können durch ein Template in ihrer Größe anders dargestellt werden als sie wirklich sind. So kann ein Bild mit 300px Breite nur mit 100px dargestellt werden. Es werden also mehr Bildinformationen in den Browser geladen als dargestellt werden soll, und diese müssen dann zusätzlich noch vom Webbrowser in die kleinere Darstellung heruntergerechnet (skaliert) werden. Dieses kostet Zeit und sorgt bei mehreren Bildern schnell für lange Seitenladezeiten. Zudem leidet die Bildqualität bei einer zu starken Skalierung.

Verzerrte Bilder

Wird durch ein Template die Höhe und die Breite vorgegeben, so wird ohne Rücksicht auf das Seitenverhältnis der eigentlichen Bilddatei das Bild durch den Browser neu berechnet. Gibt das Template z.B. 400 x 300px vor und das Bild ist 400 x 400px, dann ist das Ergebnis ein in der Höhe gestauchtes Bild.

Strenge Templatevorgaben können Bilder mit falschem Seitenverhältnis verzerren

Unscharfe oder pixelige Bilder

Durch eine Vorgabe in einem Template können Bilder auch größer dargestellt werden, als sie eigentlich sind. Weil in diesem Fall nicht genügend Bildinformationen vorhanden sind, wird das Bild unscharf bzw. pixelig.

Unscharfes Bild durch Vergrößern von zu kleinen Bildern. Aus "zu wenig Bildinformation" wird nicht "mehr Bildinformation" durch einfaches Vergrößern.