Hvordan til at Arbejde med Billeder i Shopify

Når du starter med en ny platform, såsom Shopify, er der meget at lære. Mens væske, den skabelon sprogbrug i Shopify temaer, er meget læsbar og let at komme i gang med, er et område af Shopify udvikling, som ofte kan skabe forvirring hos nye tema udviklere billeder. Jeg tror, ​​at hovedårsagen til dette ligger ved at forstå ''typen'' af det billede, du møder inden for et Shopify tema. I løbet af denne artikel vil vi undersøge hver anden type billede og hvordan du bruger dem i et Shopify tema.

Hvis du er ny til flydende mine tre del serien vil give dig en solid jordforbindelse og vil være nyttigt som du følger. Hvis du er ny til Shopify kan du eksperimentere med nogen af disse teknikker, der anvender en fri udvikling butik. For at skabe en udvikling butik tegn op til gratis Shopify Partner program.

Billed Typer

Der er fire typer af billeder i en Shopify theme. Du vil arbejde med hver af dem på tværs af et tema, så det er vigtigt at forstå forskellene mellem dem. Lad os undersøge hver enkelt igen:

1. Tema billeder: disse er gemt i en tema aktiver mappe og er specifikke for dette tema. Disse er normalt tilføjet til tema ved tema udvikler.
2. Produktbilleder: disse billeder er specifikke for en butik og uploadet via Shopify admin for hvert produkt.
3. Samling billeder: en enkelt billede tilknyttet repræsenterer en samling, som uploades via Shopify admin.
4. Artikel billeder: en enkelt billede tilknyttet repræsenterer en blog artikel, som uploades via artiklen redigere side i Shopify admin.

Det er vigtigt at bemærke, at produktet, samling og artikel billeder er alle forbundet direkte til butikken. Hvis du ændrer butikkens tema disse billeder vil forblive på plads og fungerer sammen med enhver given tema, der refererer til dem.

1. Tema Billeder

Lad os begynde ved at kigge på tema billeder. Når du opretter en Shopify tema kan du tilføje et vilkårligt antal billeder, i ethvert format og på enhver størrelse til mappen aktiver inden for din tema mappe. Typisk kan disse billeder bruges til baggrunde, sprites og branding elementer.

Refererer til disse billeder i et tema er meget ligetil. Lad os antage vi har en logo.png i vores aktiver mappe; Vi kan udsende det i nogen skabelon ved hjælp af følgende flydende syntaks:

1

{{ 'logo.png' | asset_url | img_tag: 'Logo' }}

Denne fremgangsmåde bruger to flydende filtre til at oprette en fuldt dannet HTML img element. Først, asset_url, føjer den fulde sti til mappen aktiver til den aktuelle butik tema. Den anden, img_tag, tager dette og skaber et HTML img element komplet med alt attribut. Hvis den udelades alt attribut bliver tom. Her er det endelige resultat:

1

<img src="//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/logo.png?796" alt="Logo">

Beliggenhed, Beliggenhed, Beliggenhed

Du vil opdage, at attributten src referencer Shopify CDN (Content Delivery Network).  Hvert billede, som du tilføjer, uanset type, vil blive distribueret til CDN. Dette hjælper med at sikre hurtig levering af din butik billeder til kunden.

I modsætning til self hosted billedfiler du har ingen mulighed for at kende den nøjagtige serverplacering for dine billedfiler. Heldigvis behøver du ikke at bekymre dig om dette da Shopify specifikke asset_url flydende filter vil give stien til du når din side er gengivet.

Abstrahere fuld serverstien væk til et filter betyder også, at dine temaer er fuldt overdragelige fra en butik til en anden. Den korrekte webadresse får inkluderet afhængigt af temaet og butikken bliver vist.

Tilføje klasser til img Element

I eksemplet ovenfor tilføjede vi alt attributten via img_tag filteret. Det er også muligt at tilføje en yderligere parameter, som giver dig mulighed for at tilføje klasser til img elementet. Her er vores kode refactored:

1

{{ 'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2' }}

Dette vil resultere i følgende output:

1

<img src="//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/logo.png?796" alt="Logo" class="cssclass1 cssclass2">

Mere Kontrol

Der vil selvfølgelig være situationer hvor du har brug for lidt mere kontrol over dine HTML. Ved at udelade img_tag filter kan vi opbygge vores markup, som vi ønsker.

Her er en tilgang, som vil tillade dig at tilføje dine egne attributter såsom id:

1

<img src="{{ 'logo.png' | asset_url }}" alt="Logo" class="cssclass1 cssclass2" id="logo">

Referencing billeder i CSS og JavaScript

Det er også ret nemt at bruge disse aktiver i både CSS og JavaScript filer. Gøre dette skal du føje .liquid (f.eks. styles.css.liquid) til en CSS eller JavaScript fil i mappen aktiver og reference billede, i din CSS fil, ved hjælp af den samme flydende kode vi brugte ovenfor:

1

body { background: url({{ 'logo.png' | asset_url }}) repeat-x top left; }

Tema billeder er relativt ligetil. Så længe du forstår at bruge asset_url kan du vælge at tilføje ekstra img_tag filter eller bygge elementet img selv eller ej.

Produkt, Samling og Artikel Billeder

Mens vi har fuld kontrol over vores tema billeder er vi prisgivet af opmagasinere ejere, når det kommer til produktbilleder. Heldigvis går Shopify en lang vej at hjælpe os genvinde denne kontrol. Lad os først kigge på hvad der sker når en købmand uploader et billede i Shopify admin.

Hver gang et produkt, samling eller artikel billede er uploadet Shopify tager dette billede og tilpasser automatisk det i et antal foruddefinerede størrelser. Disse billeder er "namespaced", så vi kan nemt henvise til dem i vores temaer.

Her er listen over størrelser med deres tilsvarende billednavne:

Automatisk Resizing

De ovenstående værdier angiver "maksimal" grænserne for en størrelse. Alle mellemstore billeder vil holde deres skærmformat og skaleres i overensstemmelse hermed.

Dette kunne betyde, at en "medium" billede har en bredde på 240px men en højde på kun 190px og ligeledes en højde af 240px men en bredde af 80px. Det er grunden til de fleste tema udviklere anmode om, at deres klienter uploader kvadratiske billeder som de vil være mere forudsigelig.

"Master" billedstørrelse vil altid spore den største størrelse tilgængelig fra serveren. Dette er i øjeblikket 2048px × 2048px. Hvis du uploader et billede større end 2048px bred plejer du har adgang til sin oprindelige form.

Det er også værd at bemærke, at den oprindeligt uploadede produktbillede aldrig vil være skaleres op i størrelse. Hvis du uploader et lille billede, vil det fortsat være lille. Du kan selvfølgelig henvise billedet ved hjælp af nogen af de ovenstående billednavne. Bemærk dog, at hvis du anmoder om en størrelse, der ikke var muligt at skabe så du vil blive serveret den nærmeste tilgængelige størrelse.

Også bare huske at hvis manipuleret med CSS (f.eks. bredde: 100%) billedet kan skaleres og kan blive pixeleret (afhængigt af dens format). Når du arbejder med klienter tilskynde dem til at uploade kvadratiske billeder i høj opløsning, hvor det er muligt.

Endelig er det værd at huske på, at vi ikke har adgang til produktbilleder i vores tema mappe. De er gemt på Shopify CDN og forbliver knyttet til butikken uanset det tema, der er anvendt.

2. Vise Produkt Billeder

I modsætning til tema billeder produktbilleder ikke gør brug af asset_url. For at udskrive et produktbillede, vi kan gøre brug af img_url flydende filter i stedet. Dette er at produktbilleder er relateret til butik og ikke en del af temaets aktiver.

img_url returnerer Webadressen på et billede og accepterer en størrelse som en parameter. Det kan bruges på følgende Flydende objekter:

• produkt
• variant
• lin jepost
• samling

Ved hjælp af filteret img_url er som følger:

1

{{ product | img_url: 'small' }} {{ variant | img_url: 'small' }} {{ line_item | img_url: 'small' }} {{ collection | img_url: 'small' }}

Hver af disse vil returnere den fuldt kvalificerede URL til billedet lagres på CDN Shopify.

At vise, lad os få et kig på nogle eksempel flydende kode fra en typisk product.liquid skabelon. Da dette bestemt skabelon har adgang til variablen produkt vil alle disse eksempler arbejde. Vær dog opmærksom på, at de ikke fungerer som forventet i andre skabeloner.

I dette første eksempel vil værdien af billede repræsenterer hvert billede i samlingen og har en anden værdi gennem hver iteration af vores flydende loop. Denne variabel kan navngives men du finder det passende; Jeg bruger billede som det kontekstuelt det fornuftigt.

1

{% for image in product.images %} <img src="{{ image | img_url: 'grande' }}"> {% endfor %}

Når du har arbejdet med måske vil temaer for engang du bemærke andre filtre anvendes i forhold til produktbilleder. Her er nogle alternativer, der kunne bruges i eksemplet ovenfor, hvoraf hver ville have den samme output:

1

<img src="{{ image.src | img_url: 'grande' }}"> <img src="{{ image | product_img_url: 'grande' }}">

Det er helt op til dig, som du vælger at bruge. Hvis du foretrækker en metode frem for den anden kan du altid efterlade en kommentar ved hjælp af {% kommentar %}... {% endcomment %} forklarer din beslutning. Dette er især nyttigt, når samarbejder om temaer.

Vise produktbilleder variant

Ud over produktbilleder er det også muligt at vise billeder vedrørende produkter varianter. En variant kan forklares som en variation af produktet. Lad os sige vi har en t-shirt med en bestemt print på det. Denne t-shirt kan komme i grøn, blå og rød. Mens print forbliver den samme er farve af t-shirt, selv forskellige. Det er stadig det samme produkt, men vi har valgt for at give kunden til at vælge fra bestemte indstillinger. Ofte vil disse være størrelse og farve.

Varianter kan også have deres egen pris og lager niveau. Det er muligt at knytte en bestemt billede til hver variant–i tillæg til de vigtigste produktbilleder. Hvis dit tema bruger variantbilleder, kan du vise dem på følgende måde i product.liquid skabelonen:

1

{% for variant in product.variants %} {% if variant.image %} <img src="{{ variant | img_url: 'small' }}"> {% endif %} {% endfor %}

alt Attribut

Hvis du ønsker at føje alt attributten til din output kan du gøre det som følger:

1

{% for image in product.images %} <img src="{{ image | img_url: 'grande' }}" alt="{{ image.alt }}"> {% endfor %}

Dette vil output alt tekst indtastet i Shopify admin, eller være tomt, hvis intet er angivet. Alternativt kan du gøre følgende, hvis du vælger at bruge img_tag filteret:

1

{{ image | img_url: 'grande' | img_tag: image.alt }}

Fremhævede Billeder

I ovenstående eksempel anvendte vi en væskesløjfe for at få adgang til hver af de billeder, der er forbundet med et produkt igen. Hvis produktet havde et billede vi ville udsende et billede, hvis det havde ti tilknyttet ville loop output ti billeder.

I Shopify er det første billede i admin også kendt som "udvalgt billede". Heldigvis udsende "udvalgt billede" er pæn og enkel og kræver ikke en løkke. Her er et eksempel, der ville fungere i produkt.lidende skabelon:

1

<img src="{{ product.featured_image | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">

Som altid er der alternative måder kan du opnå dette, herunder:

1

<img src="{{ product | img_url: 'grande' }}"> <img src="{{ product.images.first | img_url: 'grande' }}"> <img src="{{ product.images[0] | img_url: 'grande' }}">

Du kan også udvide syntaks for at medtage attributten alt i de anden og tredje eksempler:

1

<img src="{{ product.images.first | img_url: 'grande' }}" alt="{{ product.images.first.alt }}"> <img src="{{ product.images[0] | img_url: 'grande' }}" alt="{{ product.images[0].alt }}" >

3. Samling Billeder

Jeg beskriver ofte en samling i Shopify som en logisk gruppering af produkter. For eksempel kunne det være t-shirts, jeans og kjoler til en tøj butik. Et produkt kan sidde i nul, en eller mange samlinger, giver mulighed for nem kategorisering og opdagelse.

Ofte vil købmænd ønske at inkludere en side på deres butik, der beskriver alle deres tilgængelige samlinger. Den skabelon, der gør det muligt i Shopify er liste-collections.liquid. Her er et eksempel på, hvordan du kan løkke over hver samling og udføre det billede der er forbundet med det fra den pågældende skabelon:

1

{% for collection in collections %} {{ collection.image | img_url: 'compact' | img_tag: alt: collection.title }} {% endfor %}

Du kan udvide dette eksempel yderligere for at sikre, at du sørgede for situationen, hvor et samlingsbillede ikke var blevet tilføjet:

1

{% for collection in collections %} {% if collection.image %} {{ collection.image.src | img_url: 'medium'| img_tag: collection.title }} {% else %} {{ 'collection-image-default.png' | asset_url | img_tag }} {% endif %} {% endfor %}

I dette tilfælde bruger vi en temabillede i stedet for samling billede. Dette vil kun gengives, hvis der ikke er en forbundet samling billede. For at dette skal fungere efter hensigten skal du sørge for, at der er et billede med titlen collection-image-default.png i dit temas aktivit etsmappe.

4. Artikel Billeder

Artikel billeder funktion i stort set samme måde som produkt og samling billeder. Her er et eksempel:

1

{% if article.image %} {{ article | img_url: 'medium' | img_tag: article.title }} {% endif %}

Hvis artiklen har et tilhørende billede vil så det være vises og givet alt attributten i artiklens titel. Der er et par måder samling og artikel billeder kan komme nyttig:

• At skabe et gitter af billeder i en notering side
• Hvis du vil bruge som baggrund billeder som kan du overlejre tekst

Billeder uploades via "Tilpas tema"

Den sidste brik i puslespillet indebærer billeder uploades via indstillingen "Tilpas tema".

Hvert tema har en config mappe. I den vil du finde en fil kaldet settings_schema.json. Denne fil hjælper os med at generere en admin interface, der tillader handlende at føje data som tekst, booleske værdier (true/false), Vælg skrifttyper, uploade billeder og meget mere. Vi kan definere disse grænsefladeelementer ved hjælp af JSON.

Hvis du vil aktivere en billedupload skal du tilføje et nyt element til settings_schema.json fil i følgende format:

1

{ "type": "image", "id": "logo.png", "label": "Text", "max-width": 480, "max-height": 200, "info": "Text" }

Her er et eksempel, der er baseret på at tilføje et logo til butikken:

1

{ "type": "image", "id": "shop_logo.png", "label": "Shop logo", "max-width": 480, "max-height": 200, }

Billeder uploadet via siden "Tilpas tema" føjes til temaets aktiver mappe. Som sådan gjorde ikke jeg medtage dem som et separat billedtype i begyndelsen af artiklen.

Billedfil er gemt med et navn og format, som svarer til attributten id uanset filens oprindelige navn eller format. For eksempel vil image.jpg fil blive gemt som shop_logo.png. Shopify vil forsøge at konvertere den uploadede fil til det korrekte format (.png) før du gemmer den. Hvis Shopify er i stand til at konvertere filen til en .png fil, får brugeren en fejlmeddelelse i admin.

Du vil opdage, at input typen er billede, som resulterer i en upload-knappen vises i browseren. Du kan også angive en maksimal højde og bredde for en upload af billeder ved hjælp af dataattributter. Shopify vil derefter opretholde uploadede billedformat mens begrænsning det til de maksimale dimensioner.

Referencing billeder tilføjet via "Tilpas tema" sker på samme måde som alle andre tema billeder:

1

{{ 'logo.png' | asset_url | img_tag: 'Logo' }}

Navn Afstand Tilpas Tema Uploads

En ting du måske ønsker at overveje bruger id attribut til "navneområdet" dit tema indstilling uploads. På denne måde de er nemme at spotte i mappen aktiver som de vil blive grupperet. Det hjælper også utilsigtet overskrivning af filer, du føjer til dit tema.

Jeg bruger ofte ct præfiks som følger:

1

{ "type": "image", "id": "ct-shop_logo.png", "label": "Shop logo", "max-width": 480, "max-height": 200, }

Beskåret Kvadratiske Billeder

Midt i 2015 har Jason Bowman bemærket at Shopify kassen var vise beskåret firkantede billeder. Du kan læse om hans opdagelse på hans Freak Design blog.

Jasons undersøgelser førte ham til at opdage, at alle checkout billeder blev tilføjet med _cropped. Her er et eksempel:

produkt-beskæring-test-001_1024x1024.png

Når beskåret bliver:

produkt-beskæring-test-001_1024x1024_cropped.png

Beskæringen virker for alle størrelser undtagen Master. For at bruge beskæres billeder vi føje _cropped til vores img_tag filter. Her er et eksempel på et featured produktbillede:

1

{{ product.featured_image | product_img_url: "medium_cropped" }}

På skrivende stund er udokumenteret så der er altid mulighed for at det kan ændre sig, men jeg ønskede at medtage den.

Afsluttende Tanker

Vi har lagt stor vægt på denne artikel, men forhåbentlig er det vist dig, hvor fleksibel Shopify er, når det kommer til at arbejde med billeder i et tema.

Billederne er en integreret del af enhver e-handels butik. Forståelse af hvordan billeder håndteres og manipuleres i et Shopify-tema er en vigtig del af læring af Liquid og Shopify platformen.

Forhåbentlig er du enig i, at værktøjerne i Shopify platformen og Liquid giver dig stor fleksibilitet, når det kommer til at arbejde med billeder i dine temaer.