Admin:Produktbilder

Produktbilder - Verwaltung

Mit der Version 1.0.10 wurde das Handling der Produktbilder komplett überarbeitet.

• Freie Anzahl an Produktbildern, es gibt keine Beschränkung mehr nach oben.
• Aufbrechen der starren 3 Bildvarianten "Thumbnail", "Info" und "Popup". Nun sind beliebig viele Varianten möglich.
• Neue Möglichkeiten der Bildbearbeitung, die in Zukunft auch noch flexibel erweitert werden können.
• Verwendung von "Sprechenden URLs" auch für Bilder. Sehr gut für das Ranking in der Bildersuche!

Grundlagen

Die Bilder werden nun "on the fly" erzeugt. Wenn ein Bild in der angeforderten Variante nicht vorliegt, wird es erzeugt und gespeichert. Dadurch wird zwar der allererste Aufruf des Bildes verlangsamt, aber egal wieviele Bilder ein Shop auch hat, Timeouts wie beim alten Imageprocessing gehören der Vergangenheit an. Wird ein Bild für mehrere Produkte verwendet, wird es trotzdem nur einmal gespeichert.

Die Gestaltung der einzelnen Abzüge erfolgt durch einzelne Bildaktionen. Diese Aktionen wie z. B. Skalieren oder Hintergrund werden im Backend in beliebiger Reihenfolge zusammengeklickt.

Muss die "Definition" einer Variante einmal geändert werden, so könnt Ihr einfach den entsprechenden Bildercache per Button leeren und die Bilder werden beim nächsten Aufruf neu generiert.

Umstieg von einer vorherigen Version

Der Update - Prozess auf die v1.0.10 sorgt dafür, dass alle "originalen Produktbilder" entsprechend an den neuen Ort kopiert werden.

Definieren von Bildvarianten

Im Backend des Shop können beliebig viele Varianten (Abzüge) definiert werden. Unter Artikelkatalog : Bilder sieht man die derzeit existierenden Abzüge. Mit "<Neue Voreinstellung anlegen>" werdet Ihr aufgefordert, einen Namen und einen Code anzugeben. Der Name dient zur Identifizierung im Backend, der Code wird dann im Template verwendet.

Nach dem Speichern erscheint eine Kombobox mit der Liste der möglichen Bildaktionen:

• Schärfen
• Skalieren
• Runde Ecken
• Hintergrund
• Bild-Typ
• Wasserzeichen
• Text

Angenommen, ich möchte Bilder mit einer Größe von 300 x 300 Pixeln. Wenn die Originalbilder nicht quadratisch sind, sollten sie einen weißen Hintergrund bekommen. Dann geht man wie folgt vor:

Die Aktionen werden immer "nacheinander" auf das Originalbild angewendet.

Also starte ich mit "Skalieren" (und "neue Aktion hinzufügen"). Als Breite und Höhe gebe ich 300 ein. => Speichern

Dann "Hintergrund" (und "neue Aktion hinzufügen"). Die Farbe wird FFFFFF (weiß) und als Höhe und Breite wieder 300. => Speichern

Zum Schluß "Schärfen" (und "neue Aktion hinzufügen"). Die Defaultparameter Wert 80, Radius 0.5 und Schwellwert 3 sind ganz brauchbar.

Fertig! Eine neuer Abzug (Bildvariante) steht zur Verfügung. Wie Ihr die Bilder nun im Template schaut Ihr bitte im Webs - Template und in der Smarty - Funktion {img} an.

Bildaktionen

Hier werden die einzelnen Bildaktionen näher beschrieben.

Skalieren

Mit der Bildaktion Skalieren wird ein Bild - unter Beibehaltung des Seitenverhältnisses - verkleinert oder vergrößert. Um ein verpixeln durch das Hochskalieren von kleineren Bildern zu vermeiden, kann das Hochskalieren explizit unterbunden werden.

Hintergrund

Erstellt einen farbigen Hintergrund, in dem das Bild mittig platziert wird. Es wird die Farbe und Größe des Hintergrundes angebenen.

Runde Ecken

Hiermit können dem Bild runde Ecken verliehen werden. Entweder definiert Ihr einen Radius, der für alle vier Ecken verwendet wird, oder Ihr habt auch die Option unterschiedliche Radien zu definieren. Die Ecken werden in der Hintergrundfarbe eingefärbt.

Schärfen

Ein verkleinertes Bild sollte immer nachgeschärft werden. Wir verwenden dafür den Algorithmus von vikjavev.no. Mit den Defaultparameter sollten sich schon recht gut Ergebnisse erzielen lassen.

Bild-Typ

Mit der Aktion Bild-Typ könnt Ihr aus allen Bildern z. B. explizit JPEG - Grafiken machen lassen. Auch der Kompressionsgrad der Bilder (JPG und PNG) kann eingestellt werden.

Wasserzeichen

Ermöglicht das Einblenden von Grafiken als "Wasserzeichen" in den Bildern. Entweder wählt Ihr eine fixe Position, oder definiert eine beliebige Position. Die Bilddatei könnt Ihr dort ebenfalls hochladen.

Text

Es ist auch möglich einen Text in die Bilder einzublenden. Ihr könnt die Position, die Schriftgröße und -Farbe, einen Winkel und eine Schriftart angeben. Die gewünschten Schriften (TrueType oder OpenType) legt Ihr dazu im Ordner /img/fonts/ ab.

DB Tabellen

Mit der Einführung der neuen Bilderverwaltung wurde auch das Speicherkonzept der Bilder in der DB geändert. Bis zur V1.0.9a wurde das erste Produktbild in der Spalte products.products_images (Tabelle.Spalte) gespeichert. Alle weiteren Produktbilder wurde in der Tabelle products_images abgelegt.

Ab der V1.0.10 werden die Produktbilder über die folgenden Tabellen in der DB gespeichert. Wenn über externe Komponenten (Wawis, Daten Im-/Exporte) auf die Produktbilder zugegriffen wird muss die entsprechende Schnittstelle angepasst werden.

image

Diese Tabelle speichert das eigentliche Bild, wobei der Dateiename des Bildes der md5 Summe der Bildinformation entspricht. Unter diesem Namen wird das Bild im Verzeichnis img/originals/??/ gespeichert. Das letzte Verzeichnis entspricht den ersten zwei Zeichen der md5-Summe des Bildes. Das Bild bekommt beim speichern eine img_id, ebenfalls wird der Bildtyp (jpg, gif oder png) in dieser Tabelle gespeichert.

image_product

Über diese Tabelle wird das Bild den Produkten zugewiesen. Ein Bild kann somit mehreren Produkten zugeordnet werden. Versucht man ein Bild mehrfach einem Produkt zuzuweisen so wird dieses vom Backend abgefangen. Neben dem verlinkten Bild (img_id) wird die Sortierung der Bilder über diese Tabelle festgelegt (sort_order), die kleinste Nummer ist hierbei das erste Produktbild.

image_product_description

Hier wird das Bild mit dem Produkt und der Sprache verknüpft. Die Verküpfung wird hierbei über die Spalten

• img_prd_id (image_product.img_prd_id)
• img_lng_id (languages.language_id)

hergestellt. Jedem Bild kann über diese Tabelle eine andere Beschreibung gegeben werden. Die Beschreibung besteht hierbei aus

• ALT
• TITLE
• DESCRIPTION