Größe der Artikelbilder einstellen

Hallo allerseits, derzeit habe ich noch ein Problem mit der Zuordnung der gewünschten Artikelbildgrößen auf der Artikeldetailseite. Im Wiki gibt es eine Beschreibung, wie man die Bildgrößen in den Artikellisten ändern kann. Nun dachte ich mir, das müsste ja auf den Detailseiten recht ähnlich zu machen sein. Also habe ich mir die /frontend/detail/images.tpl geschnappt (d.h. als Quelldatei des „emotion“-Templates in meinen Templateordner kopiert und angepasst) und überall dort, wo standardmäßig die Bildgröße „5“ steht, meine „6“ eingetragen. Ziel ist es FullHD-Bilder, also mit einer Auflösung von 1920x1080 anzuzeigen. Nun habe ich im betreffenden Template alle 5er auf 6 umgestellt, den Cache gelöscht und: keine Änderung! Was habe ich vergessen? Das habe ich geprüft: > Bilder sind - per Medienmanager - in meiner Größe angelegt worden > Templatedatei auf dem Server ist up-to-date > Caches gelöscht und neu geladen Theoretisch sollte jetzt sowohl das Zoombild als auch das vergrößerte Lightbox-Popup mit der Bildgröße „6“ arbeiten. Tut es aber nicht. Hat vielleicht jemand eine Idee?

hi, du musst noch die /frontend/detail/image.tpl anpassen. diese musst du dir aus dem _default holen da sie im _emotion nicht drin ist. viele Grüße,

Hallo hbee, [quote=“hbee”]hi, du musst noch die /frontend/detail/image.tpl anpassen. diese musst du dir aus dem _default holen da sie im _emotion nicht drin ist.[/quote] vielen Dank für den Hinweis. Das ist ja verwirrend - eine images.tpl aus dem Quelltemplate und eine image aus dem Mastertemplate. Tztztz… :shock: Hast Du vielleicht noch einen Tipp? Kann man die Zoom-Popups dynamisch an den aktuellen Viewport anpassen? Also können sicher, aber wie? :wink:

hi, das _emotion leitet ja vom _default ab. da sich das imag.tpl aber nicht unterscheidet ist es auch nicht nötig ein image.tpl im _emotion anzulegen. Wenn du es modifizieren/überschrieben willst aber schon. Zum Zoom: ich denke dazu musst du die entsprechende Funktion in jquery.shopware.js überschreiben. dazu gibt es einen Artikel: http://wiki.shopware.de/jQuery-Funktion … l_600.html hier die nötigen Infos zum verwendeten CloudZoom-Plugin: http://www.starplugins.com/cloudzoom hoffe das hilft dir. viele Grüße,

1 „Gefällt mir“

Herzlichen Dank für Deine Tipps!

Hallo, @Zoom-Größe dynamisch anpassen: neben der Zoomlupe gibt es auch noch die Slimbox (Lightbox). Die jQuery-Plugins müssen in beide angepasst werden, wenn beide Funktionen benutzt werden. Wobei die Zoom-Lupe unsinnig ist, wenn man den ganzen Viewport für das Bild ausnutzen möchte. Die Slimbox benutzt ein Background-Image für das Overlay. Damit ist das Bild nicht problemlos über CSS-skalierbar (Browserabhängig). Eigentlich ist die Overlay-Größe über die Größe des hinterlegten Thumbnails festgelegt. Dort eine flexible Anpassung vorzunehmen ist relativ viel Aufwand. Am einfachsten dürfte es sein, für das Overlay-Fenster eine eigene jQuery-Funktion zu schreiben. Wenn das Ziel ist, das Bild immer im gesamten Viewport ohne Scrollen darzustellen, dann kann man die Overlay-Größe beim Aufruf berechnen und lässt das Bild über CSS skalieren. Voraussetzung ist natürlich für das Overlay einen View zu schreiben, der den -Tag anstatt background-image im “style=” verwendet. Viele Grüße HTH

Hallo hth, [quote=„hth“]Hallo, @Zoom-Größe dynamisch anpassen: neben der Zoomlupe gibt es auch noch die Slimbox (Lightbox). Die jQuery-Plugins müssen in beide angepasst werden, wenn beide Funktionen benutzt werden. Wobei die Zoom-Lupe unsinnig ist, wenn man den ganzen Viewport für das Bild ausnutzen möchte. Die Slimbox benutzt ein Background-Image für das Overlay. Damit ist das Bild nicht problemlos über CSS-skalierbar (Browserabhängig). Eigentlich ist die Overlay-Größe über die Größe des hinterlegten Thumbnails festgelegt. Dort eine flexible Anpassung vorzunehmen ist relativ viel Aufwand. Am einfachsten dürfte es sein, für das Overlay-Fenster eine eigene jQuery-Funktion zu schreiben. Wenn das Ziel ist, das Bild immer im gesamten Viewport ohne Scrollen darzustellen, dann kann man die Overlay-Größe beim Aufruf berechnen und lässt das Bild über CSS skalieren. Voraussetzung ist natürlich für das Overlay einen View zu schreiben, der den -Tag anstatt background-image im „style=“ verwendet.[/quote] da habe ich mich wohl missverständlich ausgedrückt. Ich wollte nicht das Zoomfenster (Overlay) vergrößern bzw. dynamisch an den Viewport anpassen, sondern das Popup (Lightbox), welches man per Klick öffnet! Das Zoomfenster weiter zu vergrößern wäre Unsinn, das ist mir klar. :wink:

Die Lightbox ist ja die Slimbox auf die sich der Rest des Posts von mir bezog. Zoomlupe ist das CloudZoom-Plugin. Unter dem angegebenen Link gibt es auch die Erklärungen zum aktuellen CloudZoom-Plugin. Ich würde von Anpassungen der Slimbox wirklich die Finger lassen. Diese ist nicht auf eine Skalierung von Images an den Viewport ausgelegt. Einfach den Click-Handler an eine eigene jQuery-Funktion setzten und ggf. den Aufruf der Slimbox vorab durch eine leere jQuery-Funktion überlagern. Dann hat man freie Bahn beim eigenen Plugin. Man kann natürlich auch ein fertiges Plugin einbinden, dass einen Ganzseitenmodus mit Thumbnails hat und responsive arbeitet. Gerade wenn man mehr als ein Bild pro Artikel hat und schon HD Bilder anbietet, scheint mir das eine optisch ansprechende Lösung zu sein.

Hallo, schönes Beispiel von hbee. Um das Ganze abzurunden: Man kann das neue CloudZoom-Plugin auch sehr schön mit fancybox kombinieren. Der Nachteil ist allerdings, dass man für beide ggf. eine Lizenz erwerben muss. Bei einem Shop wohl auf jeden Fall. Man kann aber auch „Lightbox“-Style Bilddarstellungen mit Thumbnails und responsive mit freien Plugins darstellen. Dann braucht man auch nur das View (Artikeldetailseite) anpassen.

Hallo hbee, [quote=“hbee”]ich verwende hierfür eine modifizierte fancybox die sich dem Viewport anpasst und habe dafür einen eigene controller/view angelegt. die standard zoom-funktion habe ich auch vollständig überlagert. Beispiel: http://www.bastein.de/instrumente/saxop … djx?c=3790[/quote] das sieht schick aus. Dazu fallen mir spontan folgen Fragen ein 1. Werden alle Bilder gleich beim Aufruf der Seite geladen? Trotz VDSL dauerte es einige Sekunden, bis ich etwas zu sehen bekam. 2. Wie sieht es mit der Browserkompatibilität aus? 3. Gibt’s das gleich fertig für Shopware? :wink:

[quote=„TomBOX“] 1. Werden alle Bilder gleich beim Aufruf der Seite geladen? Trotz VDSL dauerte es einige Sekunden, bis ich etwas zu sehen bekam. 2. Wie sieht es mit der Browserkompatibilität aus? 3. Gibt’s das gleich fertig für Shopware? ;)[/quote] zu 1. die Bilder werden vorgeladen. Hier werden aber auch zum ziemlich große Bilder verwendet. Das kann man sicher noch optimieren. Ich denke aber wer Detailfotos sehen will kann auch etwas warten. Die Bilder auf der Detailseite sind ja auch nicht klein… zu 2. aktuelle Browser sollten damit umgehen können. zu 3. nein :wink: