Share
Als je begint met een nieuw platform, zoals Shopify, is er veel te leren. Terwijl Liquid, de sjabloontaal die wordt gebruikt in Shopify-thema's, zeer leesbaar is en gemakkelijk om mee te beginnen, is een gebied van Shopify-ontwikkeling dat vaak verwarring kan veroorzaken voor nieuwe thema-ontwikkelaars afbeeldingen. Ik denk dat de belangrijkste reden hiervoor ligt in het begrijpen van het "type" beeld dat je tegenkomt binnen een Shopify-thema. In de loop van dit artikel zullen we elk type afbeelding bekijken en gebruiken in een Shopify-thema.
Als je nieuw bent in Liquid, geeft mijn driedelige serie je een goede basis en zal het je helpen als je meegaat. Als je nieuw bent bij Shopify, kun je met een van deze technieken experimenteren met een gratis ontwikkelingswinkel. Om een ontwikkelingswinkel aan te maken, kunt u zich aanmelden voor het gratis Shopify Partner-programma.
Vijf eenvoudige stappen maken gebruik van themabeelden om hun startpagina held afbeeldingEr zijn vier soorten afbeeldingen in een Shopify-thema. Je werkt met elk thema over een thema, dus het is belangrijk om de verschillen ertussen te begrijpen. Laten we ze allemaal een voor een bekijken:
Accentsconagua
middelen map en zijn specifiek voor dat thema. Deze worden meestal door een thema-ontwikkelaar aan het thema toegevoegd.Het is belangrijk op te merken dat product-, collectie- en artikelafbeeldingen allemaal rechtstreeks aan de winkel zijn gekoppeld. Als u het thema van de winkel wijzigt, blijven deze afbeeldingen op hun plaats en werken ze met elk willekeurig thema dat naar hen verwijst.
Laten we beginnen met het bekijken van themabeelden. Bij het maken van een Shopify-thema kunt u een willekeurig aantal afbeeldingen toevoegen, in elk formaat en op elke grootte aan de middelen map binnen uw themamap. Meestal kunnen deze afbeeldingen worden gebruikt voor achtergronden, sprites en merkelementen.
Het verwijzen naar deze afbeeldingen in een thema is heel eenvoudig. Laten we aannemen dat we een hebben logo.png in onze middelen map; we kunnen het in elke sjabloon uitvoeren met behulp van de volgende Liquid-syntaxis:
'logo.png' | asset_url | img_tag: 'Logo'
Deze benadering gebruikt twee vloeistoffilters om een volledig gevormde HTML te maken img element. De eerste, ASSET_URL, prepends het volledige pad naar de map met items voor het thema van de huidige winkel. De seconde, img_tag, neemt dit en creëert een HTML img element compleet met alt attribuut. Indien weggelaten zal het alt-attribuut leeg zijn. Dit is het eindresultaat:
Greats zetten hun schoenen slim uit met productafbeeldingen op de startpagina van hun winkel Je zult merken dat het src kenmerk verwijst naar de Shopify CDN (Content Delivery Network). Elke afbeelding die u toevoegt, ongeacht het type, wordt gedistribueerd naar de CDN. Dit zorgt voor een snelle levering van de afbeeldingen van uw winkel aan de klant.
In tegenstelling tot zelf gehoste afbeeldingsbestanden, kunt u de exacte serverlocatie voor uw afbeeldingsbestanden niet kennen. Gelukkig hoef je je hier geen zorgen over te maken omdat de Shopify specifiek is ASSET_URL Vloeistoffilter biedt het pad voor u wanneer uw pagina wordt weergegeven.
Als u het volledige serverpad wegslaat naar een filter, betekent dit ook dat uw thema's volledig overdraagbaar zijn van de ene winkel naar de andere. De juiste URL wordt opgenomen, afhankelijk van het thema en de winkel die wordt bekeken.
img ElementIn het bovenstaande voorbeeld hebben we de alt attribuut via de img_tag filter. Het is ook mogelijk om een extra parameter toe te voegen waarmee u klassen aan de. Kunt toevoegen img element. Hier is onze code gerefactored:
'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2'
Dit zou resulteren in de volgende uitvoer:
Er zullen natuurlijk gelegenheden zijn waar je wat meer controle over je HTML nodig hebt. Door het weglaten van de img_tag filter kunnen we onze markup opbouwen zoals we willen.
Hier volgt een benadering waarmee u uw eigen kenmerken kunt toevoegen, zoals ID kaart:
Het is ook vrij eenvoudig om deze items te gebruiken in zowel CSS- als JavaScript-bestanden. Om dit te doen, voeg je toe .vloeistof (bijv. styles.css.liquid) naar een CSS- of JavaScript-bestand in uw middelen map en verwijs naar de afbeelding, in uw CSS-bestand, met behulp van dezelfde Liquid-code die we hierboven hebben gebruikt:
body background: url ('logo.png' | asset_url) repeat-x links bovenaan; Themabeelden zijn relatief eenvoudig. Zolang je begrijpt hoe te gebruiken ASSET_URL je kunt kiezen of je de extra toevoegt img_tag filter of bouw de img element zelf.
Hoewel we volledige controle hebben over onze themafoto's, zijn we overgeleverd aan de winkeleigenaren als het gaat om productafbeeldingen. Gelukkig kan Shopify ons helpen om die controle terug te krijgen. Laten we beginnen met kijken naar wat er gebeurt als een verkoper een afbeelding uploadt in de Shopify-beheerder.
Studio Nette productafbeelding op de Neat Ice Kit-productpagina Telkens wanneer een product, verzameling of artikelafbeelding wordt geüpload, neemt Shopify die afbeelding en wordt deze automatisch aangepast in een aantal vooraf gedefinieerde formaten. Deze afbeeldingen zijn "namespaced", zodat we ze gemakkelijk kunnen terugvinden in onze thema's.
Hier is de lijst met maten met de bijbehorende afbeeldingsnamen:
| 16 × 16 | pico |
| 32 × 32 | icoon |
| 50 × 50 | duim |
| 100 × 100 | klein |
| 160 × 160 | compact |
| 240 × 240 | medium |
| 480 × 480 | groot |
| 600 × 600 | grande |
| 1024 × 1024 | 1024x1024 |
| 2048 × 2048 | 2048x2048 |
| Grootste afbeelding | meester |
De bovenstaande waarden specificeren de "maximale" grenzen van een beeldformaat. Alle afbeeldingen met een nieuwe grootte behouden hun beeldverhouding en worden dienovereenkomstig geschaald.
Dit kan betekenen dat een "medium" afbeelding een breedte heeft van 240 px maar een hoogte van slechts 190 px en eveneens een hoogte van 240 px maar een breedte van 80 px. Het is om deze reden dat de meeste thema-ontwikkelaars vragen dat hun klanten vierkante afbeeldingen uploaden omdat ze meer voorspelbaar zijn.
De "master" -afbeeldingsgrootte volgt altijd de grootste beschikbare grootte van de server. Momenteel is dit 2048 px × 2048 px. Als u een afbeelding groter dan 2048 px breed uploadt, hebt u geen toegang tot het oorspronkelijke formulier.
Het is ook vermeldenswaard dat de oorspronkelijk geüploade productafbeelding nooit in omvang zal worden opgeschaald. Als u een kleine afbeelding uploadt, blijft deze klein. Je kunt de afbeelding natuurlijk wel gebruiken door een van de bovenstaande afbeeldingsnamen te gebruiken. Houd er echter rekening mee dat als u een formaat aanvraagt dat niet mogelijk was om te maken, u de dichtstbijzijnde beschikbare grootte krijgt.
Houd ook in gedachte dat als gemanipuleerd met CSS (bijv. breedte: 100%) de afbeelding kan worden opgeschaald en kan worden gepixeld (afhankelijk van het formaat). Wanneer u met klanten werkt, moedig ze dan aan om waar mogelijk vierkante afbeeldingen van hoge resolutie te uploaden.
Ten slotte is het de moeite waard te onthouden dat we geen toegang hebben tot productafbeeldingen in de map van onze thema's. Ze worden opgeslagen op de Shopify CDN en blijven verbonden aan de winkel, ongeacht het thema dat wordt toegepast.
In tegenstelling tot themabeelden maken productafbeeldingen geen gebruik van ASSET_URL. Voor het uitvoeren van een productafbeelding kunnen we gebruik maken van de img_url Vloeibare filter in plaats daarvan. Dit komt door het feit dat productafbeeldingen gerelateerd zijn aan de winkel en geen deel uitmaken van de items van het thema.
img_url retourneert de URL van een afbeelding en accepteert een afbeeldingsgrootte als een parameter. Het kan worden gebruikt op de volgende Liquid-objecten:
De ... gebruiken img_url filter is als volgt:
product | img_url: 'klein' variant | img_url: 'small' line_item | img_url: 'klein' verzameling | img_url: 'klein'
Elk hiervan retourneert de volledig gekwalificeerde URL naar de afbeelding die is opgeslagen op de Shopify CDN.
Laten we eens kijken naar een voorbeeld van een vloeibare code van een standaard product.liquid sjabloon. Omdat deze specifieke sjabloon toegang heeft tot de artikel variabele al deze voorbeelden zullen werken. Houd er echter rekening mee dat ze niet werken zoals verwacht in andere sjablonen.
In dit eerste voorbeeld de waarde van beeld vertegenwoordigt elk beeld in de verzameling en heeft een andere waarde door elke iteratie van onze Liquid-loop. Deze variabele kan naar eigen inzicht worden benoemd; ik gebruik beeld omdat het contextueel zinvol is.
% voor afbeelding in product.images%% endfor%
Als u enige tijd met thema's hebt gewerkt, merkt u mogelijk dat andere filters worden gebruikt met betrekking tot productafbeeldingen. Hier zijn enkele alternatieven die in ons bovenstaande voorbeeld zouden kunnen worden gebruikt, die elk dezelfde output zouden hebben:
Het is geheel aan jou wat je kiest om te gebruiken. Als u de voorkeur geeft aan één methode boven een andere, kunt u altijd een opmerking achterlaten met % comment% ... % endcomment% uw beslissing toelichten. Dit is vooral handig bij het samenwerken aan thema's.
Naast productafbeeldingen is het ook mogelijk om afbeeldingen weer te geven met betrekking tot de productvarianten. Een variant kan worden uitgelegd als een variatie op het product. Laten we zeggen dat we een t-shirt met een bepaalde afdruk erop hebben. Dit t-shirt kan groen, blauw en rood zijn. Hoewel de afdruk hetzelfde blijft, is de kleur van het T-shirt zelf anders. Het is nog steeds hetzelfde product, maar we hebben ervoor gekozen om de klant te laten kiezen uit bepaalde opties. Vaak zijn dit maat en kleur.
Varianten kunnen ook hun eigen prijs- en voorraadniveau hebben. Het is mogelijk om een specifieke afbeelding aan elke variant te koppelen, naast de afbeeldingen van het hoofdproduct. Als uw thema afwijkende afbeeldingen gebruikt, kunt u deze op de volgende manier weergeven in de product.liquid sjabloon:
% voor variant in product.variants% % if variant.image%% endif% % endfor%
% endfor%
% endif% % endfor%alt AttribuutAls u de alt attribuut aan uw uitvoer kunt u dit als volgt doen:
% voor afbeelding in product.images%
Dit zal de alt tekst ingevoerd in de Shopify-beheerder, of blanco als niets is ingevoerd. Als alternatief kunt u het volgende doen als u ervoor kiest om de img_tag filter:
afbeelding | img_url: 'grande' | img_tag: image.alt
In ons bovenstaande voorbeeld gebruikten we een Liquid-loop om achtereenvolgens toegang te krijgen tot elk van de afbeeldingen die aan een product zijn gekoppeld. Als het product één afbeelding zou hebben, zouden we één afbeelding uitvoeren, als er tien geassocieerd zouden zijn zou de lus tien afbeeldingen uitvoeren.
In Shopify staat de eerste afbeelding in de beheerder ook wel bekend als de "Uitgelichte afbeelding". Gelukkig is het uitvoeren van de "afgebeelde afbeelding" prettig en rechtlijnig en heeft het geen lus nodig. Hier is een voorbeeld dat zou werken in de product.liquid sjabloon:
Zoals altijd zijn er alternatieve manieren om dit te bereiken, waaronder:
U kunt ook de syntaxis uitbreiden met de alt attribuut in het tweede en derde voorbeeld:
Ik beschrijf een verzameling in Shopify vaak als een logische groepering van producten. Het kunnen bijvoorbeeld t-shirts, jeans en jurken voor een kledingwinkel zijn. Een product kan in een of meerdere collecties zitten, zodat categoriseren en ontdekken eenvoudig is.
Helm Boots maakt gebruik van verzamelafbeeldingen om klanten naar verschillende delen van hun winkel te leidenVerkopers willen vaak een pagina in hun winkel opnemen waarin alle beschikbare collecties worden beschreven. De sjabloon die dit mogelijk maakt in Shopify is list-collections.liquid. Hier is een voorbeeld van hoe u elke collectie kunt doorlopen en de bijbehorende afbeelding kunt uitvoeren vanuit die sjabloon:
% voor verzameling in collecties% collection.image | img_url: 'compact' | img_tag: alt: collection.title % endfor%
U kunt dit voorbeeld verder uitbreiden om ervoor te zorgen dat u zorgde voor de situatie waarin geen verzamelafbeelding was toegevoegd:
% voor verzameling in collecties% % if collection.image% collection.image.src | img_url: 'medium' | img_tag: collection.title % else% 'collection-image-default.png' | asset_url | img_tag % endif% % endfor%
In dit geval gebruiken we een themabeeld in plaats van het verzamelbeeld. Dit wordt alleen weergegeven als er geen gekoppelde verzamelafbeelding is. Om ervoor te zorgen dat dit werkt zoals bedoeld, moet u ervoor zorgen dat er een afbeelding met de naam is collection-image-Default.png binnen je thema's middelen map.
Artikelafbeeldingen werken op dezelfde manier als product- en afbeeldingsafbeeldingen. Hier is een voorbeeld:
% if article.image% article | img_url: 'medium' | img_tag: article.title % endif%
Het Shopify Partner-blog gebruikt artikelafbeeldingen om heldenafbeeldingen voor elk bericht te leverenAls het artikel een bijbehorende afbeelding heeft, wordt het weergegeven en gegeven alt kenmerk van de titel van het artikel. Er zijn een paar manieren waarop verzameling en artikelafbeeldingen handig kunnen zijn:
Het laatste stukje van de puzzel betreft afbeeldingen die zijn geüpload via de optie "Thema aanpassen".
Elk thema heeft een config map. Hierin vind je een bestand met de naam settings_schema.json. Met dit bestand kunnen we een beheerdersinterface genereren waarmee verkopers gegevens zoals tekst, booleaanse waarden (waar / onwaar), lettertypen, afbeeldingen uploaden en nog veel meer kunnen toevoegen. We kunnen deze interface-elementen definiëren met behulp van JSON.
Om een afbeelding te kunnen uploaden, moet u een nieuw element toevoegen aan de settings_schema.json bestand in de volgende indeling:
"type": "image", "id": "logo.png", "label": "Text", "max-width": 480, "max-height": 200, "info": "Text"
Hier is een voorbeeld gebaseerd op het toevoegen van een logo voor de winkel:
"type": "image", "id": "shop_logo.png", "label": "Winkellogo", "max. breedte": 480, "max-hoogte": 200,
Afbeeldingen die zijn geüpload via de pagina "Thema aanpassen" worden toegevoegd aan de thema's middelen map. Als zodanig nam ik ze niet op als een afzonderlijk afbeeldingstype aan het begin van het artikel.
Het afbeeldingsbestand wordt opgeslagen met een naam en indeling die overeenkomt met de ID kaart attribuut ongeacht de oorspronkelijke naam of het bestandsformaat van het bestand. Bijvoorbeeld image.jpg bestand zou worden opgeslagen als shop_logo.png. Shopify zal proberen het geüploade bestand naar het juiste formaat te converteren (.png) voordat u het opslaat. Als Shopify het bestand niet kan converteren naar een .png bestand, krijgt de gebruiker een foutmelding in de admin.
U zult merken dat het invoertype is beeld wat resulteert in een uploadknop die in de browser verschijnt. U kunt ook een maximale hoogte en breedte opgeven voor het uploaden van een afbeelding met behulp van gegevensattributen. Shopify behoudt vervolgens de beeldverhouding van de geüploade afbeelding terwijl deze wordt beperkt tot die maximale dimensies.
Het verwijzen naar afbeeldingen die via "Customize Theme" zijn toegevoegd, gebeurt op dezelfde manier als alle andere themabeelden:
'logo.png' | asset_url | img_tag: 'Logo'
Een ding dat je misschien zou willen overwegen is het gebruik van de ID kaart attribuut aan "namespace" uw uploads van themainstellingen. Op deze manier zijn ze gemakkelijk te herkennen in de middelen map omdat ze worden gegroepeerd. Het helpt ook bij het per ongeluk overschrijven van bestanden die u aan uw thema toevoegt.
Ik gebruik vaak de ct- voorvoegsel als volgt:
"type": "image", "id": "ct-shop_logo.png", "label": "Winkellogo", "max. breedte": 480, "max-hoogte": 200,
Midden 2015 zag Jason Bowman dat de Shopify-uitbetaling vierkante afbeeldingen bijsnijdt. Je kunt over zijn ontdekking lezen op zijn Freak Design-blog.
Jason's onderzoek leidde ertoe dat hij ontdekte dat alle uitcheckbeelden waren bijgevoegd _cropped. Hier is een voorbeeld:
product-bijsnijden test-001_1024x1024.png
wanneer bijgesneden wordt:
product-bijsnijden test-001_1024x1024_cropped.png
Het bijsnijden werkt voor alle formaten behalve Meester. Om bijgesneden afbeeldingen toe te voegen, voegen we toe _cropped naar onze img_tag filter. Hier is een voorbeeld voor een afbeelding met een product:
product.featured_image | product_img_url: "medium_cropped"
Op het moment van schrijven is dit zonder papieren, dus er is altijd de mogelijkheid dat het kan veranderen, maar ik wilde het opnemen.
We hebben veel aandacht besteed aan dit artikel, maar hopelijk laat het zien hoe flexibel Shopify is als het gaat om het werken met afbeeldingen in een thema.
Afbeeldingen zijn een integraal onderdeel van elke e-commerce winkel. Inzicht in hoe afbeeldingen worden beheerd en gemanipuleerd in een Shopify-thema is een belangrijk onderdeel van het leren van het Liquid- en het Shopify-platform.
Hopelijk ben je het ermee eens dat de tools binnen het Shopify-platform en Liquid je veel flexibiliteit bieden als het gaat om het werken met afbeeldingen in je thema's.
