Guten Morgen! Ja, ich gebe zu da wird evtl. der ein oder andere mit den Augen rollen... Nichtsdestotrotz lege ich wert auf ein optimales Erscheinungsbild. Benutzt ein Kunde ein iPad 3 oder höher, oder ein anderes Gerät mit hochauflösendem Display so werden Bilder ja bekanntermaßen schwammig angezeigt. Ich löse das Problem in meinen Projekten grundsätzlich z.B. durch die Hinterlegung eines Bildes mit den doppelten Maßen. Z.B. Wenn ein Logo 100x100 Pixel groß ist, hinterlege ich das Bild mit 200x200 Pixeln und beschränke dann mittels html oder css auf width: 100px; und height:100px; Das funktioniert für mich bestens und Grafiken sehen immer gestochen scharf aus. Gleiches würde ich nun gerne mit allen Produktbildern im Shop machen (Thumbnails, Produktseiten etc.) An welche Datei müsste ich hier ran um die Breite und Höhe der Bilder manuell zu definieren? PS: erhöhte Ladezeiten und Mehrtraffic sind mir bewusst. Allerdings geht es hier nicht um 10.000 Artikel sondern nur um insgesamt 20-30 Danke für Eure Vorschläge! LG
Hallo, wenn Du Bilder in deinem Shop als Upload einpflegst, egal welcher Größe, werden die doch automatisch auf die richtige Größe geeigt. Sagen wir mal Du lädst ein Bild im Format 800x600 hoch so wird das Bild in folgenden Dateien abgelegt auf die entsprechende Größe --> .../images/product_images hier sind die Bilder untergebacht. LG Jörg
Das ist richtig: sagen wir aber ich möchte das Bild, welches ich in 800x600 hochlade in dieser Auflösung behalten, es aber in 400x300 (Bilddatei soll nicht runtergerechnet werden) anzeigen lassen. In welcher Datei könnte ich die Höhe und Breite editieren? EDIT: Oder meinst Du ich sollte nach dem Upload einfach nochmal die Bilder in dem von Dir genannten Ordner gegen die größeren Daten austauschen?
Hast Du schon einmal unter Bild Optionen unter Konfiguration geschaut? Dort kannst Du solche einstellungen soweit wie möglich vornehmen. LG Jörg
Habe dort folgendes eingestellt: Bildgröße berechnen: Nein Höhe Thumbnails: 300 Breite Thumbnails: 75 Nun lade ich ein Bild mit den doppelten Maßen (um Retina tauglich zu sein) im Format 600x150 Pixel hoch. Man sollte meinen dass das nun funktioniert da man ja Bildgröße berechnen auf Nein gestellt hat. Nichtsdestotrotz macht der aus meinem 600x150 Px Bild wieder ein 300x75 Px Bild. Schon schaut es auf dem iPad wieder schwammig aus. Die Engine müsste einfach nur das Bild in der Größe belassen, wie es hochgeladen wird und nur die Ansicht, bzw. den Bildcontainer auf width: 300px und height: 75px begrenzen.... Welche Datei ist denn für die Bildberechnung bzw. die Thumbnail Container zuständig?
Mit den Bildoptionen ändert sich aber auch die Anzeige im Frontend auf die neue Größe. Folge ist, dass das Bild nicht mehr komplett angezeigt wird. Du müsstest dann noch an allen Stellen an denen Bilder vorkommen per Usermod CSS die Anzeigegröße der Bilder auf die alten Werte runtersetzen. Das setzt aber Firebug-Kenntnisse voraus. In die Dateien einzugreifen würd ich hier wenns geht vermeiden. Das dürfte über einige Dateien verstreut liegen, besser zentral mit Usermod CSS steuern.
Danke, werde mal versuchen mir die entsprechenden IDs und classes zu fischen und die in meiner usermod css anzupassen. Melde mich dann wieder wenns schiefgelaufen ist ;-)
Ich werds mal ausprobieren und berichten. Shop ist noch nicht live und backup frisch erstellt. Sollte also nicht viel schiefgehen können.
Hallo Henriks, ich hatte mich letztens auch oberflächlich mit diesem Thema beschäftigt. Nur leider fehlt mir im Moment die Zeit, da tiefer einzusteigen. Schau Dir doch mal http://imulus.github.io/retinajs/ an. Wie gesagt, habs aus Zeitgründen noch nicht ausprobieren können. Gruß, Marcus
Was meinst Du damit genau? Bilder sollen bei mir in einer Größe von 75x300 Px angezeigt werden. Hinterlegte Bilder sollen aber Größe von 150x600 Px haben. Meine Idee war zwischenzeitlich folgende: Konfiguration -> Bildgröße: 150Px Breite und 600Px Höhe angeben in USERMOD CSS: .article-list-item-image {width: 75Px; height: 300px;} Funzt nur leider nicht so wie ich mir das vorgestellt habe. Die Class sollte m.E. die richtige sein, allerdings zwingt er das Bild nicht kleiner sondern zeigt es in seiner vollen Größe von 150x600 an... EDIT: mit transform funktioniert es immerhin von der Bildgröße, allerdings verschiebt sich die Position dann auch entsprechend... -webkit-transform: scale(0.5); /* chrome & safari*/ -moz-transform: scale(0.5); /* firefox */ -o-transform: scale(0.5); /* opera */ -transform: scale(0.5); /* explorer > 9 */
na mit Smarty den Pfad der Bildaufrufe verbiegen, danach kannst Du wie Du willst per USERMOD.css deine Bilder, größer, kleiner machen. Die Bilder werden doch im Shop in verschiedenen Größen hinterlegt, die Originalgrößen bleiben doch erhalten. Kategoriebilder werden nicht verkleinert, etc. Ergo den Bildaufruf im TPL mit Smarty replace abändern und Rest per CSS. Das js Script kannst Du auch einsetzen ist aber auch Pflegeaufwand.
Oha, klingt zwar sehr gut, leider kann ich Dir hier nicht mehr ganz folgen. Bin leider kein Code-As :-/ Wie müsste ich hier vorgehen? Über eine kurze Anleitung wäre ich (und bestimmt noch einige andere hier im Forum die bei Smarty an Süßigkeiten denken) wahnsinnig dankbar!
Kann verstehen, wenn eine (spezifische) Erklärung hier den Rahmen sprengt. Hast Du evtl. einen Link für mich, damit ich mich selber in das Thema einlesen kann? LG
Sry, ich muss auch noch bisserl arbeiten ... Beispiel Produktbild, dort existieren ja mehrere Bildgrößen HTML: <img id="gallery_inside_main_1" class="img-responsive" src="{$images.0.IMAGE}" alt="{$images.0.IMAGE_ALT|default:$images.0.PRODUCTS_NAME}" title="{$images.0.IMAGE_ALT|default:$images.0.PRODUCTS_NAME}" /> das ist das normale {$images.0.IMAGE} TAG in der standard.html das holt das Bild aus dem Ordner: Code: SHOPROOT/images/product_images/info_images Willst Du dieses komprimierte Bild nicht nutzen, veränderst Du den Smarty TAG entsprechend in dem Du info_images, gegen popup_images, oder original_images austauschst. Was dann so aussehen sollte HTML: <img id="gallery_inside_main_1" class="DEINE_CSS" src="{$images.0.IMAGE|replace:'info_':'original_'}" alt="{$images.0.IMAGE_ALT|default:$images.0.PRODUCTS_NAME}" title="{$images.0.IMAGE_ALT|default:$images.0.PRODUCTS_NAME}" /> dazu wird der Smarty Modifier replace genutzt.
Haha, so war das nicht gemeint. Wollte nicht stressen Vielen Dank erstmal! Werde das in Ruhe testen und berichten!