Bildgröße auf eine Seite alle gleich groß darstellen

Gelöst
dekoliebe24
Entdecker
19 1 5

Hallo zusammen, brauche nochmal eure HIlfe, bin noch nicht ganz zufrieden wie es optisch aussieht.

Wenn ich eine Kategorie auf der Startseite anzeigen lassen will, dann sind alle Produkt Bilder verschieden groß.

Ich habe die schon auf 150 x 150 px verkleinert aber dann bleibt die Größe wie vorher und es wird pixelig dargestellt.

Wie kann ich es ändern, das alle Bilder gleich groß z.b in 150 x150 px dargestellt werden ?

24 ANTWORTEN 24
r8r
Shopify Expert
2216 284 755

@dekoliebe24 – ich hab's so verstanden, dass Du die Originalbilder in 150x150px hochgeladen hast – was passiert, wenn Du die bspw. als 600x600px Version hochlädtst?

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
dekoliebe24
Entdecker
19 1 5

Nein, ich habe ein paar im Editor beschnitten auf 150x150  . Aber die werden trotzdem großangezeigt.

Wie man hier sieht   https://tty2fnvha63lg77b-58839990467.shopifypreview.com

Gabe
Shopify Staff
5389 934 1278

@dekoliebe24 

Super danke. Du möchtest also mehr Produkte auf der Collection Page im Grid anzeigen, alle mit der gleichen Größe und dem Seitenverhältnis, und viel kleiner, ist das richtig? Sollen auch mehr Produkte pro Zeile auch angezeigt werden?

Die Bildgrößen reduzieren (wie z. B. auf 150x150) wird aber nicht empfohlen, da dies die Bildqualität stark beeinträchtigt - wie du bereits festgestellt hast. Aber mit etwas DIY Coding kannst du das selber probieren (siehe Code Snippets unten die man aber für das Simple Theme anpassen müsste). 

Unser Theme Team sollte aber in der Lage sein, die Größe des Bildcontainers oder das Raster für diese Seite anzupassen. Wolltest du auch mehr Produkte pro Zeile anzeigen oder die gleiche Anzahl beizubehalten und nur die Bilder kleiner zu machen?

Wenn man das DIY (do-it-yourself) machen möchte

Hier ein Codebeispiel, dass man im theme.css einpflegen kann, aber ggf. dem eigenen Theme anpassen (und mit einem Experten wie Mario) und bitte zuerst in einer Theme Kopie testen!

.grid-view-item__image-wrapper {max-width: 100% !important;}
.grid-view-item__image-wrapper div {padding-top: 150% !important;}
.grid-view-item__image-wrapper .grid-view-item__image {
max-width: 100% !important;
   max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
}

Bzgl. dem unterschiedlichen Aspekt der Bilder, hier wird es komplizierter. Es ist auch eine häufige Beschwerde, die wir sehen, dass Produktbilder nicht wie gewünscht angezeigt werden oder auf Sammlungsseiten nicht richtig ausgerichtet sind, wie folgendes Beispiel:

image.png

Damit Bilder gleich groß erscheinen, müssen sie ein einheitliches Seitenverhältnis oder ein Verhältnis von Höhe zu Breite haben (dies gilt auch für Werbebilder).

Im obigen Beispiel sieht man, dass alle Produktbilder unterschiedlich groß sind, und da die Bildcontainer so aufgebaut sind, dass sie Responsive sind, passen sich die Container automatisch an die richtige Größe des Bildes an. Die Container "flexen" sich auch, um das längste Bild im Höhenverhältnis unterzubringen, so dass die Produkttitel alle in einer einzigen Zeile angezeigt werden können. Wie gesagt, die bezahlbaren Themes haben alle einen speziellen Javascript dafür mit eingebaut, und die kann man jederzeit zum Shop hinzufügen um das zu testen.

Man kann auch eine Ausrichtung wie das folgende Beispiel betrachten, die durch dasselbe Problem verursacht wird, mit einem etwas anderen Ergebnis:

image.png

Problembehebung

Man kann die Bildgrößen überprüfen, indem man in die einzelne Produkte im Admin geht, zum Abschnitt Bilder navigieren und auf das betreffende Bild klicken:

image.png

image.png

image.png

Es ist zwar technisch möglich, Bilder per Code zur Ausrichtung zu zwingen, aber das Theme-Support-Team rät dringend davon ab, da dies dazu führen kann, dass Bilder an seltsamen Stellen abgeschnitten werden und die Flexibilität der Container beeinträchtigt wird, was für die Benutzerfreundlichkeit auf allen Bildschirmgrößen wichtig ist.
Stattdessen wird empfohlen, die Produktbilder so zu bearbeiten, dass sie alle im gleichen Seitenverhältnis angezeigt werden. Obwohl die Bildbearbeitung nicht in den Zuständigkeitsbereich des Theme-Support-Teams fällt, gibt es in unserem App-Store eine Reihe von tollen Bildbearbeitungs-Apps, die dabei helfen können.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

r8r
Shopify Expert
2216 284 755

@dekoliebe24 – du veränderst damit im Editor die Ausgangsdatenbasis – die werden dann im Frontend wieder hochskaliert und letztenendes pixeln die bei kleinen Bildern aus. Wie gesagt – gleiches Seitenverhältnis aller Bilder bei hinlänglich großer Abmessung (i.e. mindestens die größte verwendete Abmessung) sollte das Thema lösen.

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
dekoliebe24
Entdecker
19 1 5

Danke für die Ausführliche erklärung. habe soweit alles verstanden und wie gesagt ein paar Bilder habe ich im Editor Quadratisch geschnitten und dann auf 150 150 . Wie deine letzten Bilder.

Ich würde ja gerne eins kaufen aber ich habe nciht so ein Template gefunden, der die Navileiste dann links hat wie hier. Oder ik bin blind :)

dekoliebe24
Entdecker
19 1 5

@r8r ich weiß nicht genau wie du das meinst ? Wie lösen ? hatte ich da was falsch verstanden ?

r8r
Shopify Expert
2216 284 755

@dekoliebe24 – nochmal Step by step ;)

  1. Bilder quadratisch (bzw. zumindest alle mit demselben Seitenverhältnis) lokal auf Deinem Rechner vorbereiten – bevor Du sie zu Shopify hochlädst – am besten "groß" – also zumindest sowas in der Richtung von 600x600px
  2. Bilder hochladen und verwenden

Macht Sinn so?

LG, Mario

PS: Navileiste links lässt sich auch bei anderen Themes einbauen – je nach Basis geht das dann einfacher oder ist komplexer.

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
dekoliebe24
Entdecker
19 1 5

Danke Mario, ja macht sind. habe jetzt alle auf dem PC geändert und als erstes Bild hochgeladen.  Sieht auch gut aus, wenn es mehr Bilder sein könnten in eine Reihe 2 mehr z.b .

Und dann die Bilder etwas kleiner darstellen wäre perfekt .

Gabe
Shopify Staff
5389 934 1278

@dekoliebe24 

Das Simple Theme ist nicht schlecht. Es gibt auch ein paar bezahlbare die das Menü wie das Simple theme haben, wie z. B. das Kingdom Theme hier. Es ist aber für große Bilder optimiert. Einfach zum Shop hinzufügen und testen.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

dekoliebe24
Entdecker
19 1 5

Genau so meinte ich es. Vielen Dank 

Nun bin ich am überlegen ob es mir diese 180 $ wert ist nur weil es 4 Bilder in eine reihe sind.

Sonst fast so wie diese Simple.  Vielen Dank dafür