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 ?
Ähnlich wie dieser Leitfaden:
( @r8r ?)
@dekoliebe24 - darum gehts, korrekt?
2 Möglichkeiten seh ich hier auf die Schnelle:
LG, Mario
Ich Danke euch, ich werde es mir mal genau ansehen.
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 ??
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.
@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
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
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:
Gerne https://clvrg6nsi3nbitro-58839990467.shopifypreview.com
Dann auf Home drücken das wird meine Startseite
@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
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
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:
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:
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:
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.
@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
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 
@r8r ich weiß nicht genau wie du das meinst ? Wie lösen ? hatte ich da was falsch verstanden ?
@dekoliebe24 – nochmal Step by step 
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.
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 .
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.
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
