Share
Wenn Sie mit einer neuen Plattform wie Shopify beginnen, müssen Sie viel lernen. Während Liquid, die in Shopify-Themes verwendete Vorlagensprache, sehr gut lesbar und leicht zu erlernen ist, ist ein Bereich der Shopify-Entwicklung, der für neue Theme-Entwickler oft Verwirrung stiften kann Bilder. Ich glaube, der Hauptgrund dafür liegt im Verstehen des „Bildtyps“, den Sie in einem Shopify-Thema finden. Im Verlauf dieses Artikels werden wir die verschiedenen Bildtypen und ihre Verwendung in einem Shopify-Design untersuchen.
Wenn Sie neu bei Liquid sind, bietet Ihnen meine dreiteilige Serie eine solide Grundlage und ist hilfreich, wenn Sie ihnen folgen. Wenn Sie neu bei Shopify sind, können Sie mit einer dieser Techniken in einem kostenlosen Entwicklungsshop experimentieren. Um einen Development Store anzulegen, melden Sie sich beim kostenlosen Shopify Partner-Programm an.
In fünf einfachen Schritten werden Motivbilder verwendet, um das Bild der Homepage Ihres Helden bereitzustellenEs gibt vier Arten von Bildern in einem Shopify-Design. Sie arbeiten mit jedem von ihnen über ein Thema hinweg. Daher ist es wichtig, die Unterschiede zwischen ihnen zu verstehen. Untersuchen wir jeden nacheinander:
Accentsconagua
Vermögenswerte Ordner und sind spezifisch für dieses Thema. Diese werden in der Regel von einem Entwickler des Designs zum Design hinzugefügt.Es ist wichtig zu wissen, dass Produkt-, Sammlungs- und Artikelabbildungen direkt mit dem Geschäft verbunden sind. Wenn Sie das Thema des Stores ändern, bleiben diese Bilder erhalten und funktionieren mit jedem Thema, das sie referenziert.
Beginnen wir mit dem Betrachten von Motivbildern. Beim Erstellen eines Shopify-Designs können Sie eine beliebige Anzahl von Bildern in jedem Format und in beliebiger Größe hinzufügen Vermögenswerte Ordner innerhalb Ihres Design-Verzeichnisses. Normalerweise können diese Bilder für Hintergründe, Sprites und Branding-Elemente verwendet werden.
Das Referenzieren dieser Bilder in einem Thema ist sehr einfach. Nehmen wir an, wir haben eine logo.png in unserer Vermögenswerte Mappe; Wir können es in jeder Vorlage mit der folgenden Liquid-Syntax ausgeben:
'logo.png' | asset_url | img_tag: 'Logo'
Bei diesem Ansatz werden zwei Flüssigkeitsfilter zum Erstellen eines vollständig geformten HTML-Codes verwendet img Element. Der Erste, asset_url, fügt den vollständigen Pfad zum Ordner "Bestände" für das Thema des aktuellen Geschäfts hinzu. Der Zweite, img_tag, übernimmt dies und erstellt ein HTML img Element komplett mit alt Attribut. Wenn nicht angegeben, bleibt das alt-Attribut leer. Hier ist das Endergebnis:
Greats präsentieren ihre Schuhe auf der Startseite ihrer Filialen anhand von Produktbildern Sie werden feststellen, dass die src Attribut verweist auf das Shopify-CDN (Content Delivery Network). Jedes von Ihnen hinzugefügte Bild wird unabhängig von seinem Typ an das CDN verteilt. Dies gewährleistet eine schnelle Lieferung der Bilder Ihres Shops an den Kunden.
Im Gegensatz zu selbst gehosteten Image-Dateien haben Sie keine Möglichkeit, den genauen Serverstandort für Ihre Image-Dateien zu kennen. Zum Glück müssen Sie sich keine Sorgen machen, da Shopify spezifisch ist asset_url Der Flüssigkeitsfilter stellt den Pfad für Sie bereit, wenn Ihre Seite gerendert wird.
Wenn Sie den gesamten Serverpfad von einem Filter abstrahieren, bedeutet dies auch, dass Ihre Designs vollständig von einem Geschäft zum anderen übertragen werden können. Je nach Design und Store wird die richtige URL eingefügt.
img ElementIm obigen Beispiel haben wir das hinzugefügt alt Attribut über die img_tag Filter. Es ist auch möglich, einen weiteren Parameter hinzuzufügen, mit dem Sie Klassen hinzufügen können img Element. Hier ist unser Code überarbeitet:
'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2'
Dies würde zu folgender Ausgabe führen:
Es gibt natürlich Gelegenheiten, bei denen Sie etwas mehr Kontrolle über Ihren HTML-Code benötigen. Durch das Auslassen des img_tag Filter können wir unsere Markierungen nach Belieben aufbauen.
Hier ist ein Ansatz, mit dem Sie Ihre eigenen Attribute wie hinzufügen können Ich würde:
Es ist auch ziemlich einfach, diese Assets in CSS- und JavaScript-Dateien zu verwenden. Um dies zu tun .Flüssigkeit (z.B. styles.css.liquid) zu einer CSS- oder JavaScript-Datei in Ihrem Vermögenswerte Ordner und referenzieren Sie das Bild in Ihrer CSS-Datei mit demselben Liquid-Code, den Sie oben verwendet haben:
body Hintergrund: URL ('logo.png' | asset_url) repeat-x oben links; Themenbilder sind relativ unkompliziert. Solange Sie verstehen, wie man es benutzt asset_url Sie können wählen, ob Sie das Extra hinzufügen möchten oder nicht img_tag filtern oder aufbauen img Element dich selbst.
Obwohl wir die vollständige Kontrolle über unsere Themenbilder haben, sind wir den Ladenbesitzern in Bezug auf Produktbilder ausgeliefert. Dankenswerterweise hilft Shopify uns dabei, diese Kontrolle wieder zu erlangen. Beginnen wir mit dem Blick darauf, was passiert, wenn ein Händler ein Bild in den Shopify-Administrator hochlädt.
Produktbild von Studio Neat auf der Produktseite von Neat Ice Kit Jedes Mal, wenn ein Produkt, eine Sammlung oder ein Artikelbild hochgeladen wird, nimmt Shopify dieses Bild und ändert es automatisch in eine Anzahl vordefinierter Größen. Diese Bilder sind "namespaced", so dass wir sie in unseren Themen leicht referenzieren können.
Hier ist die Liste der Größen mit den entsprechenden Bildnamen:
| 16 × 16 | Pico |
| 32 × 32 | Symbol |
| 50 × 50 | Daumen |
| 100 × 100 | klein |
| 160 × 160 | kompakt |
| 240 × 240 | Mittel |
| 480 × 480 | groß |
| 600 × 600 | grande |
| 1024 × 1024 | 1024x1024 |
| 2048 × 2048 | 2048 x 2048 |
| Größtes Bild | Meister |
Die obigen Werte geben die maximalen Grenzen einer Bildgröße an. Alle verkleinerten Bilder behalten ihr Seitenverhältnis bei und werden entsprechend skaliert.
Dies könnte bedeuten, dass ein „mittleres“ Bild eine Breite von 240 Pixeln, aber nur 190 Pixeln, und ebenfalls eine Höhe von 240 Pixeln, aber eine Breite von 80 Pixeln aufweist. Aus diesem Grund fordern die meisten Entwickler von Designs, dass ihre Kunden quadratische Bilder hochladen, da sie vorhersehbarer sind.
Die "Master" -Bildgröße erfasst immer die größte vom Server verfügbare Größe. Derzeit ist dies 2048px × 2048px. Wenn Sie ein Bild hochladen, das größer als 2048 Pixel ist, haben Sie keinen Zugriff auf das Original.
Es ist auch erwähnenswert, dass das ursprünglich hochgeladene Produktbild niemals in der Größe vergrößert wird. Wenn Sie ein kleines Bild hochladen, bleibt es winzig. Sie können das Bild natürlich mit einem der oben genannten Bildnamen referenzieren. Wenn Sie jedoch eine Größe anfordern, die nicht erstellt werden konnte, wird die nächstgelegene verfügbare Größe angezeigt.
Bedenken Sie auch, dass bei Manipulation mit CSS (z. Breite: 100%) das Bild kann vergrößert werden und pixeliert werden (abhängig von seinem Format). Wenn Sie mit Kunden arbeiten, empfehlen Sie ihnen, hochauflösende quadratische Bilder nach Möglichkeit hochzuladen.
Abschließend sei daran erinnert, dass wir keinen Zugriff auf Produktbilder in unserem Themenordner haben. Sie werden im Shopify-CDN gespeichert und bleiben unabhängig von dem angewendeten Thema mit dem Shop verbunden.
Im Gegensatz zu Themenbildern machen Produktbilder keinen Gebrauch asset_url. Um ein Produktbild auszugeben, können wir das verwenden img_url Flüssigkeitsfilter statt. Dies ist auf die Tatsache zurückzuführen, dass Produktabbildungen mit dem Geschäft in Zusammenhang stehen und nicht zu den Vermögenswerten des Themas gehören.
img_url gibt die URL eines Bildes zurück und akzeptiert eine Bildgröße als Parameter. Es kann für folgende Liquid-Objekte verwendet werden:
Verwendung der img_url Filter ist wie folgt:
product | img_url: 'small' Variante | img_url: 'small' line_item | img_url: 'small' collection | img_url: 'small'
Jeder von ihnen gibt die vollständig qualifizierte URL an das auf dem Shopify-CDN gespeicherte Bild zurück.
Zur Veranschaulichung betrachten wir einige Beispiele für den Liquid-Code eines Typicals Produkt.Liquid Vorlage. Da diese bestimmte Vorlage Zugriff auf die Produkt Variable alle diese Beispiele funktionieren. Beachten Sie jedoch, dass sie in anderen Vorlagen nicht wie erwartet funktionieren.
In diesem ersten Beispiel ist der Wert von Bild stellt jedes Bild in der Sammlung dar und hat bei jeder Wiederholung unserer Liquid-Schleife einen anderen Wert. Diese Variable kann beliebig benannt werden; ich benutze Bild wie es inhaltlich sinnvoll ist.
% für Bild in product.images%% endfor%
Wenn Sie einmal mit Motiven gearbeitet haben, werden möglicherweise andere Filter in Bezug auf Produktbilder verwendet. Hier sind einige Alternativen, die in unserem obigen Beispiel verwendet werden könnten, von denen jede dieselbe Ausgabe hätte:
Es liegt ganz bei Ihnen, welches Sie verwenden möchten. Wenn Sie eine Methode einer anderen vorziehen, können Sie jederzeit einen Kommentar hinterlassen % comment%… % endcomment% Ihre Entscheidung erklären. Dies ist besonders nützlich, wenn Sie an Themen zusammenarbeiten.
Neben Produktbildern können auch Bilder zu den Produktvarianten angezeigt werden. Eine Variante kann als Variation des Produktes erklärt werden. Nehmen wir an, wir haben ein T-Shirt mit einem bestimmten Aufdruck. Dieses T-Shirt kann grün, blau und rot sein. Während der Druck gleich bleibt, ist die Farbe des T-Shirts selbst unterschiedlich. Es ist immer noch dasselbe Produkt, aber wir haben uns dafür entschieden, dass der Kunde aus bestimmten Optionen wählen kann. Oft sind dies Größe und Farbe.
Varianten können auch einen eigenen Preis und Lagerbestand haben. Zusätzlich zu den Hauptproduktabbildungen kann jeder Variante ein bestimmtes Bild zugeordnet werden. Wenn Ihr Design variante Bilder verwendet, können Sie diese auf folgende Weise anzeigen Produkt.Liquid Vorlage:
% für Variante in Produkt.Varianten% % wenn Variante.Abbildung%% endif% % endfor%
% endfor%
% endif% % endfor%alt AttributWenn Sie das hinzufügen möchten alt Attribut zu Ihrer Ausgabe können Sie dies wie folgt tun:
% für Bild in product.images%
Dadurch wird die ausgegeben alt Text, der im Shopify-Administrator eingegeben wurde, oder leer, wenn nichts eingegeben wurde. Alternativ können Sie Folgendes tun, wenn Sie sich für die Verwendung von entscheiden img_tag Filter:
image | img_url: 'grande' | img_tag: image.alt
In unserem obigen Beispiel haben wir eine Flüssigkeitsschleife verwendet, um auf jedes der Bilder zuzugreifen, die einem Produkt zugeordnet sind. Wenn das Produkt ein Bild hätte, würden wir ein Bild ausgeben, wenn ihm zehn zugeordnet wären, würde die Schleife zehn Bilder ausgeben.
In Shopify wird das erste Bild, das im Admin aufgeführt ist, auch als "gekennzeichnetes Bild" bezeichnet. Dankenswerterweise ist die Ausgabe des "vorgestellten Bildes" schön und unkompliziert und erfordert keine Schleife. Hier ist ein Beispiel, das in funktioniert Produkt.Liquid Vorlage:
Wie immer gibt es alternative Möglichkeiten, dies zu erreichen, einschließlich:
Sie können die Syntax auch um die Erweiterung erweitern alt Attribut im zweiten und dritten Beispiel:
Ich beschreibe eine Kollektion in Shopify oft als eine logische Gruppierung von Produkten. Zum Beispiel könnten es T-Shirts, Jeans und Kleider für ein Bekleidungsgeschäft sein. Ein Produkt kann in null, einer oder mehreren Kollektionen platziert werden, was eine einfache Kategorisierung und Ermittlung ermöglicht.
Helmstiefel verwenden Sammlungsbilder, um Kunden in verschiedene Bereiche ihres Geschäfts zu führenHäufig möchten Händler in ihrem Shop eine Seite mit allen verfügbaren Kollektionen hinzufügen. Die Vorlage, die dies in Shopify möglich macht, ist listensammlungen.liquid. Hier ein Beispiel, wie Sie jede Sammlung durchlaufen und das zugehörige Bild aus dieser Vorlage ausgeben können:
% für Sammlung in Sammlungen% collection.image | img_url: 'compact' | img_tag: alt: collection.title % endfor%
Sie können dieses Beispiel noch erweitern, um sicherzustellen, dass Sie auf die Situation eingehen, in der kein Sammlungsbild hinzugefügt wurde:
% für Sammlung in Sammlungen% % wenn collection.image% collection.image.src | img_url: 'medium' | img_tag: collection.title % else% 'collection-image-default.png' | asset_url | img_tag % endif% % endfor%
In diesem Fall verwenden wir ein Motivbild anstelle des Sammlungsbildes. Dies wird nur gerendert, wenn kein Sammlungsbild vorhanden ist. Damit dies wie beabsichtigt funktioniert, müssen Sie sicherstellen, dass ein Bild mit dem Titel "Titel" angezeigt wird collection-image-default.png innerhalb deines Themes Vermögenswerte Mappe.
Artikelbilder funktionieren ähnlich wie Produkt- und Sammlungsbilder. Hier ist ein Beispiel:
% if article.image% article | img_url: 'medium' | img_tag: article.title % endif%
Der Shopify-Partner-Blog verwendet Artikelbilder, um Heldenbilder für jeden Beitrag bereitzustellenWenn dem Artikel ein Bild zugeordnet ist, wird dieses angezeigt alt Attribut des Titels des Artikels. Es gibt einige Möglichkeiten, wie Sammlungs- und Artikelbilder nützlich sein können:
Der letzte Teil des Puzzles umfasst Bilder, die mit der Option „Design anpassen“ hochgeladen wurden.
Jedes Thema hat eine Konfig Mappe. Darin finden Sie eine Datei namens settings_schema.json. Diese Datei hilft uns beim Erstellen einer Administrationsoberfläche, mit der Händler Daten wie Text, boolesche Werte (true / false), Schriftarten auswählen, Bilder hochladen und vieles mehr hinzufügen können. Wir können diese Oberflächenelemente mit JSON definieren.
Um einen Bildupload zu aktivieren, müssen Sie ein neues Element hinzufügen settings_schema.json Datei im folgenden Format:
"type": "image", "id": "logo.png", "label": "Text", "max-width": 480, "max-height": 200, "info": "Text"
Hier ein Beispiel zum Hinzufügen eines Logos für den Store:
"type": "image", "id": "shop_logo.png", "label": "Shop logo", "max-width": 480, "max-height": 200,
Bilder, die über die Seite "Design anpassen" hochgeladen wurden, werden dem Theme hinzugefügt Vermögenswerte Mappe. Daher habe ich sie nicht als separaten Bildtyp am Anfang des Artikels aufgeführt.
Die Bilddatei wird mit einem Namen und Format gespeichert, die dem entsprechen Ich würde Attribut unabhängig vom ursprünglichen Namen oder Format der Datei. Zum Beispiel image.jpg Datei würde als gespeichert werden shop_logo.png. Shopify versucht, die hochgeladene Datei in das entsprechende Format zu konvertieren (.png) vor dem Speichern. Wenn Shopify die Datei nicht in eine konvertieren kann .png In dieser Datei erhält der Benutzer eine Fehlermeldung im Admin.
Sie werden feststellen, dass der Eingabetyp lautet Bild Dies führt dazu, dass im Browser eine Schaltfläche zum Hochladen angezeigt wird. Sie können auch eine maximale Höhe und Breite für einen Bildupload angeben, indem Sie Datenattribute verwenden. Shopify behält dann das Seitenverhältnis des hochgeladenen Bildes bei und beschränkt es auf diese maximalen Abmessungen.
Das Referenzieren von Bildern, die über „Motiv anpassen“ hinzugefügt wurden, erfolgt auf dieselbe Weise wie bei allen anderen Motivbildern:
'logo.png' | asset_url | img_tag: 'Logo'
Eine Sache, die Sie in Betracht ziehen möchten, ist die Verwendung der Ich würde Attribut "Namespace" für das Hochladen Ihrer Designeinstellung. Auf diese Weise sind sie leicht zu erkennen Vermögenswerte Ordner, da sie zusammen gruppiert werden. Es hilft auch, versehentlich Dateien zu überschreiben, die Sie Ihrem Design hinzufügen.
Ich benutze oft die ct- Präfix wie folgt:
"type": "image", "id": "ct-shop_logo.png", "label": "Shop-Logo", "max-width": 480, "max-height": 200,
Mitte 2015 stellte Jason Bowman fest, dass in der Shopify-Kasse abgeschnittene quadratische Bilder angezeigt wurden. Sie können über seine Entdeckung in seinem Freak Design-Blog lesen.
Jasons Untersuchungen führten dazu, dass er entdeckte, dass alle Bilder der Kasse mit angehängt waren _cropped. Hier ist ein Beispiel:
Produkt-Cropping-Test-001_1024x1024.png
wenn zugeschnitten wird:
product-cropping-test-001_1024x1024_cropped.png
Das Zuschneiden funktioniert für alle Größen außer Meister. Um zugeschnittene Bilder zu verwenden, fügen wir hinzu _cropped zu unserer img_tag Filter. Hier ist ein Beispiel für ein Bild mit einem Produkt:
product.featured_image | product_img_url: "medium_cropped"
Zum Zeitpunkt des Schreibens ist dies nicht dokumentiert, so dass es immer die Möglichkeit gibt, dass es sich ändert, aber ich wollte es aufnehmen.
Wir haben in diesem Artikel eine ganze Reihe von Themen behandelt, aber hoffentlich zeigt es Ihnen, wie flexibel Shopify ist, wenn es darum geht, mit Bildern in einem Design zu arbeiten.
Bilder sind ein wesentlicher Bestandteil jedes E-Commerce-Shops. Das Verständnis, wie Bilder in einem Shopify-Design verwaltet und bearbeitet werden, ist ein wichtiger Bestandteil des Lernens von Liquid und der Shopify-Plattform.
Hoffentlich stimmen Sie zu, dass die Tools innerhalb der Shopify-Plattform und von Liquid Ihnen viel Flexibilität beim Arbeiten mit Bildern in Ihren Motiven bieten.
