Anleitung Einstellungen an den Produktbildern

Hallo zusammen,

Bild-Optionen, StyleEdit, Templateeinstellungen.
Ein bisschen durchgedreht sind wir schon und mussten super viel rumprobieren, bis wir "einfache" Anpassungen an unseren Produktbildern vornehmen konnten. Am Ende lief alles darauf hinaus, dass wir im Testshop nur 10 (statt 3300 Bilder im live shop) genommen haben, damit man nicht immer alles von vorne stapelverarbeiten musste.
Daher möchte ich euch einen kurzen Überblick geben, was ihr wo ändern müsst, um bei den Produktbildern exakt das zu erhalten was ihr genau wollt. Gemacht mit jeder Menge Verzweiflung unter GX 3.9.3.0, Honeygrid und StyleEdit3

Zwei Tipps bevor es losgeht:
Wenn ihr eine Änderung über StyleEdit3 macht und keinen Unterschied in der Vorschau seht, setzt einfach mal einen Wert super niedrig respektive hoch an. Wenn der Originalwert z.B. 100px ist, stellt ruhig mal 10px oder 800px ein, um sofort zu sehen ob und sich etwas tut. Einige Einstellungen sind natürlich von der Originalauflösung der Bilder abhängig. Änderungen im Admin Bereich bedürfen hingegen immer einer Cache-Leerung.

Lest erstmal alles einmal durch wenn ihr Arbeiten an den Bildern plant. Wird euch Zeit und Nerven ersparen


Kacheln
Das sind die kleinen Vorschaubildchen der Artikel unter Unsere Empfehlungen, in der Kategorieübersicht, der Suche usw.

Einstellung: StyleEdit3 -> Produkte -> Produktliste -> Höhe des Produktbildes Kachel bzw. Höhe des Produktbildes Kachel mobil


Kacheln Mouseover/Flyover und Galerie
Eigentlich auch Thumbnails, der Name wäre aber etwas irreführend, da es an anderer Stelle auch noch Thumbnails mit anderen Einstellungen gibt. Die Galerie ist der kleine Streifen, der beim Mouseover über die Kacheln erscheint. Logischerweise muss die Galerie breiter sein, als die Kacheln selbst.


Einstellung: StyleEdit3 -> Produkte -> Produktliste -> Höhe des Galeriebildes Flyover bzw. Breite der Galerie


Thumbnails (die Echten )
Hierbei handelt es sich um die gleichen Bilder wie beim Mouseover/Flyover nur innerhalb der Artikeldetailseite!

Einstellung: StyleEdit3 -> Produkte -> Artikelbild -> Breite der Thumbnails bzw. Breite der Thumbnails mobil


Artikeldetailbild
Nun zum Spannenden. Ihr wollt die Hauptbilder der Artikeldetailseite größer haben.
Einstellung: StyleEdit3 -> Produkte -> Artikelbild -> Höhe bzw. Höhe mobil
Ihr werdet sehen, dass der Container um das Bild höher wurde, jedoch das Bild selbst nicht größer angezeigt wird. Desweiteren sind die Thumbnails links nun "gestreckt", da sie sich ebenfalls an die Höhe des Containers anpassen.

Das sollte man bei der Höhenwahl beachten, wenn man weitermacht.

Um das Bild selbst größer zu bekommen:
Admin -> Darstellung -> Bild-Optionen -> Höhe der Artikel-Info Bilder



Die Pixelhöhe der Bilder sollte nicht die des Containers überschreiten, da die Bilder sowieso nur maximal die Höhe des Containers bekommen. Ihr würdet aber ein unnötig großes Bild haben (Ladezeiten) welches optisch kleiner dargestellt wird.


Image processing
Damit bestehende Bilder nun auch die neue Größe erhalten, müssen sie neu berechnet/umgewandelt werden.
Darstellung -> Bild-Optionen -> Oben der Reiter Image Processing
Startwert: 1 (es werden alle Bilder ab dem ersten an verarbeitet).
Der Vorgang kann je nach Bilderzahl locker mal 20+ min dauern.
Wenn ihr außerdem einen Webspace im Shared Hosting habt, kann es bei hoch aufgelösten Bildern auf Grund des fehlenden PHP memory zu Problemen kommen, wie Wilken hier beschreibt.

Sollte das der Fall sein, merkt euch einfach die Nummer oder den Namen der Datei an der alles hängen geblieben ist. Ladet das Backend neu und startet den Vorgang mit dem Startwert der Nummer nochmal.
Ich empfehle den Vorgang gerade bei einer Vielzahl an Bildern zu einer Uhrzeit auszuführen, die nicht der Stoßzeit bei euch im Shop entspricht.


Zoom-Bild
Die Zoom-Funktion entspricht der Höhen-Einstellung unter
StyleEdit3 -> Produkte -> Artikelbild -> Höhe bzw. Höhe mobil.

Wenn ihr Änderungen hier dran vornehmen wollt, müsst ihr euch an CSS machen. Da uns die Einstellungen über die Bordmittel zufrieden stellen, haben wir dort auch nichts geändert.


Modal Box / alte Lightbox
Jetzt wird es richtig lästig
Ist unter
Darstellung -> Template-Einstellungen -> Bildergalerie als Lightbox einbinden aktiv,
wird das Artikeldetailbild beim Anklicken so groß angezeigt wie es ist bzw. wie es die Bildschirmauflösung hergibt.
An sich die bessere Lösung für die Zukunft, da ansonsten noch einiges mit CSS gemacht werden müsste.

Bei deaktvierter Einstellung seht ihr die "alte" Lightbox/Modal Box. Die Höhe der Lightbox wird hier angepasst:
StyleEdit3 -> Produkte -> Artikelbild -> Höhe Lightbox bzw. Höhe Lightbox mobil

Nun muss aber auch wieder die Bild-Größe innerhalb des Lightbox-Containers angepasst werden (Image processing!).
Darstellung -> Bild-Optionen -> Breite / Höhe der Artikel-Popup Bilder
Hier müsst ihr euch unbedingt vorher Gedanken machen, welche maximalen Höhen und Breiten ihr wollt. Gerade wenn ihr so wie wir auch verschiedene Seitenverhältnisse bei Bildern habt.

Ihr solltet hierbei beachten, dass sich in der Modal Box die Thumbnails am unteren Rand analog zu den Anpassungen von oben (Höhe bzw. Höhe mobil) verhalten. Es bedarf zusätzlicher CSS Anpassungen, da sie ansonsten komisch raushängen können.



Am Ende nicht vergessen alle Änderungen in StyleEdit3 auch wirklich zu speichern und alle Caches zu leeren (auch Browser).

Sollte ich etwas vergessen haben oder wenn Fragen bestehen, freue ich mich auf eure Hinweise

 

Das hast du aber gut erklärt -> Daumen hoch

 

Dazu noch eine Anmerkung:

Der Shop beherrscht seit grob GX3.0 "Imageprocessing on the fly". Das bedeutet wenn ein skaliertes Bild fehlt, aber das Basisbild ("Original Image") vorhanden ist, werden die benötigten Grössen zur Laufzeit erzeugt. Man kann also quasi per FTP alle neu zu berechnenden Bilder löschen und sich darüber freuen, dass die alle "vonselbst" wieder neuberechnet auftauchen. Einziger Nachteil: Der Kunde wird im Shop höhere Ladezeiten sehen solange das läuft.

 

Betrifft das alle Ordner in /images/product_images (außer original_images natürlich)? So könnte man z.B. am späten Abend "thumbnail_images" leeren und hätte am nächsten Morgen alles fertig oder verstehe ich das falsch?

 

Ja, genau.

Unter der Bedingung, dass Kunden durch den Shop surfen. Es werden nicht einfach alle Bilder auf einen Schlag generiert, sondern immer die aktuell gerade nötigen um die jeweilige Seite anzuzeigen.

 

Hm, aber dann verschwinden ja erst einmal alle Bilder bis die Seite/der Artikel neu aufgerufen wird. Ich denke da an langsame Internetverbindungen oder Geräte. Evtl. springt der Kunde dann direkt ab, weil er denkt, dass gar kein Bild vorhanden ist

 

Das ist vielfach ne Frage von Hostingleistung und Kundenfrequenz. Das ist oft kein Problem, kann aber eventuell eins sein.

 

Trifft das auch zu, wenn z.B. die Infoimages händisch heruntergeladen werden und verkleinert wieder hochgeladen werden? Also werden die dann wieder überschrieben?

Zum obigen Beitrag ist noch zu ergänzen, dass man bei den Bildoptionen die Bildqulität verändern kann, bei Werten unter 40 kommen dann Pixel.

Wunsch: Hier wäre eine Verlustfreie max. Reduzierung sinnvoll, da der Anwender nicht falsch machen kann und die Bilder immer maximal reduziert wären. Also z.B. wie JPEGmini.

 

Nein. Das Bild wird nicht auf Einhaltung von Vorgaben geprüft, sondern nur auf Existenz nach Dateinamen.

JPEG ist immer verlustbehaftet, das ist das technische Prinzip von JPEG. Ohne Verlust gibts nicht. Für die letzten 3% Bildgrösse wirds auch technisch unglaublich komplex, langsam oder teuer (wenn man einen spezialisierten Dienstleister hinzuzieht, der das schnell kann). Das lohnt meist nicht. Man stellt die Bildkompression auf einen vernünftigen Wert ein und lebt sorgenfrei. Ich würde den so bei 70-80 ansetzen.

 

Ich habe letztens ein JPG von 1,4 MB auf 0,033 MB ohne Verluste mit JPEGmini verkleinert. Das sind 97 % Übertragungsdaten gespart.

Für Gambio wäre das auch ein Werbevorteil, obgleich die Funktionalität heutzutage selbstverständlich sein sollte. Ich habe es mal als Request geschrieben.

Für die schnelle Antwort für die 1. Frage vielen Dank.

 

zu der Problematik hab ich gerade ein Modul in der Arbeit ... wird aber noch bissel dauern ...

 

Ich habe das Problem, dass im Galeriebild Flyover die Vorschau Bilder plötzlich nicht mehr angezeigt werden (siehe Anhang) sind nur Striche.
Dieses betrifft aber nur die Starseite und in den Kategorien. Bei der Artikelansicht sind diese da. Hat jemand eine Lösung?

 

Nicht ohne einen Link

 

okay
https://www.lange-damenhosen.de/

 

Du hast einen Fehler in der css:

.product-container .gallery > li {
display: block;
margin: 10px 10px 0 10px;
height: 95x;
.....

da fehlt ein "p"
Schau mal im Style Editor.

 

Oh super Hab´s gefunden. Hatte wohl was zu viel gelöscht
Vielen Dank für deine (wie immer) schnelle Hilfe!!!!

 

Sehr gut ist auch https://tinyjpg.com, man kann aber nur bis zu 20 Bilder auf einmal kostenlos hochladen (läuft alles online).
Alternativ gibt es noch den FileOptimizer für alle möglichen Dateitypen als Download. Wurde hier auch schon einmal von einem Gambio-Mitarbeiter als Tipp vorgeschlagen.

 

Kurzes Update: Wer seine skalierten Bilder gelöscht hat und nicht darauf warten möchte, dass die Bilder erst beim erneuten Besuch auf der Seite generiert werden, kann das Script unten verwenden.

Ladet die bilder.html in euer Hauptverzeichnis hoch (shop.de/bilder.html)
Holt euch aus der sitemap.xml alle Links des Shops (Backend -> SEO -> Sitemap generieren).
Hier die XML in CSV umwandeln, CSV öffnen und die URLs aus der Spalte kopieren.
Alle Links ins das Eingabefeld des Scriptes einfügen (pro Zeile eine URL ohne Kommas etc.)
Start drücken.

Das Script ruft alle 4 Sekunden einen Link auf und arbeitet sich durch die Liste. Die Seite wird im iframe geladen, so dass es ein "echter" Seitenabruf wie durch euch selbst ist. Bei Aufruf eines Links erstellt Gambio dann die passenden skalierten Bilder auf dem Server.
Ihr könnt die Dauer in Millisekunden zwischen den Aufrufen auch anpassen. Es handelt sich um die Zahl hier:

Code:

 await sleep(4000);

Das Script arbeitet im Hintergrund, ihr könnt euch als zurücklehnen und einen Tee genießen

 

Und warum sollte ich mir so viel arbeit machen, statt in den Bildoptionen einmal das Image-Processing laufen zu lassen?
(Gut, wenn man im Ordner original_images alles gelöscht hat, geht das Processing nicht, aber sonst....)

 

Weil das Image Processing die einzelnen Bilder nur generiert, wenn Änderungen in den Bild-Optionen vorgenommen wurden.
Bilder (abgeleitet von original_images) werden jedoch nicht neu erstellt, falls sich das originale Bild verändert und der Dateiname gleich bleibt.
Beispiel: Wir haben fast alle/viele unserer originalen Bilder bearbeitet. Komprimiert, teilweise mit Logos versehen usw. Wir laden dann alles wieder nach /original_images, die ganzen anderen abgeleiteten Bildchen werden aber nicht neu generiert. In unserem Fall war es also einfacher die ganzen Ordner wie gallery_images, info_images usw. zu leeren und das Script über Nacht auf einem PC laufen zu lassen. Bei aktuell mehr als 4200 Bildern kann man auch mit dem Responsive File Manager nichts wirklich regeln.