FROM CACHE - de_header

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 ?

1 AKZEPTIERTE LÖSUNG

Anerkannte Lösungen
dekoliebe24
Entdecker
19 1 5

Erfolg.

Ok Ich Danke euch beiden und werden mal sehen wie ich es mache. Ich werde es dann hier berichten und dementsprechend auf gelöst kicken .

Klasse von euch ; Danke

Lösung in ursprünglichem Beitrag anzeigen

24 ANTWORTEN 24
Ben310
Pionier
147 10 43
r8r
Shopify Expert
2350 305 835

@dekoliebe24 - darum gehts, korrekt?

039E2C5F-8ECB-44EA-9DE2-2410DBD1162E.jpeg
2 Möglichkeiten seh ich hier auf die Schnelle:

  1. alle Bilder die dort angezeigt werden im selben Seitenverhältnis beschneiden
  2. im Theme (bin grad nur am Tablet, sonst würd ich nachsehen wo sich der Code findet) die Beschneidung per Eingriff in den Quelltext erzwingen

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

Ich Danke euch, ich werde es mir mal genau ansehen. 

dekoliebe24
Entdecker
19 1 5

Ich habe testweise paar Bilder alle in Quadrat und 150 x 150 geschnitten aber es wird leider dann vergrößert dargestellt und das ist dann pixelig, Würde die Bild gerne kleiner anzeigen lassen.

Diese kostenlose Template Simple ist genau das was ich suche und damit habe ich es getestet, nur die Bilder sind mit zu Groß , würde es gerne kleiner haben wollen.

Würde das gehen ?? 

Gabe
Shopify Staff
Shopify Staff
7607 1216 1997

Hey @dekoliebe24 

Gut zu sehen, dass du mehrere Themes testest. Die gratis Themes sind toll, nur haben die ein paar Limitationen wie du wahrscheinlich schon gesehen hast. Diese Limitationen können dazu führen, dass man viel im Code basteln muss um die Lücken zu den bezahlbaren Themes zu füllen. Frage: hast du auch bezahlbare Themes zum Shop hinzugefügt um sie zu testen und zu sehen wie die die Bilder automatisch in den Grössen und Aspekte (mit einen Javascript) ausgleichen?

Wenn man es DIY im Code versucht dann kann das leider das Theme Code etwas destabilisieren oder langsamer machen, wenn es nicht 100% richtig gemacht wird. Um welche Bilder handelt es sich hier genau - um die Produkt- und Variantenbilder oder Miniaturansichten/Thumbnails?

Um die Platzhalter der Bilder zu verkleinern würde es sich somit um so eine Theme-Code Änderung handeln, und zwar im theme.css im Assets Folder und auch im Code der spezifischen Seite und ist somit etwas komplex. Das beste wäre es die Bilder so zu bearbeiten, dass die Pixelgröße nicht zu klein ist sowie dass der Aspekt den Platzhalter richtig angepasst wird. Wenn die Bilder einen Aspekt wie 4:3 oder 1:2 haben dann passen die schlecht in einen Platzhalter der 1:1 ist usw. usw.

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
2350 305 835

@dekoliebe24 – bitte schick doch mal einen Screenshot des Szenarios, in dem die Bilder pixelig werden. Da gibt's bei responsive Layouts einfach zu viele Möglichkeiten dessen, was Du gerade siehst.

Danke, 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 Euch, ja das man man mit den kostenlosen Templates nicht so viel machen kann, hatte ich schon mitbekommen.

Aber dieser Simple Template ist eigentlich genau das was ich brauche, schlicht und einfach. 

Ich möchte, das LInks die Kategorien sind und man gleich auf die Startseite alle Produkte angezeigt bekommt.

Dafür habe ich eine Kategorie gemacht wo alle Artikel drin sind und die lasse ich auf der Startseite anzeigen.

Klappt auch nur so groß .

Hier das Bild 

kleinebilder.jpg

 

Gabe
Shopify Staff
Shopify Staff
7607 1216 1997

@dekoliebe24 

wenn du den "Aktionen" Button klickst und "Vorschau" wählst, kannst du ganz unten einen Preview Share Link erstellen und hier posten so dass ich und Mario das etwas näher anschauen können. Der Share Link verfällt nach einer gewissen zeit, oder du kannst ihn hier im Beitrag danach wieder löschen:

image.png

image.png

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

Gerne   https://clvrg6nsi3nbitro-58839990467.shopifypreview.com

 

Dann auf Home drücken das wird meine Startseite

r8r
Shopify Expert
2350 305 835

@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
Shopify Staff
7607 1216 1997

@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
2350 305 835

@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
2350 305 835

@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
Shopify Staff
7607 1216 1997

@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