Share
Når du starter med en ny plattform, som Shopify, er det mye å lære. Selv om flytende, malingsspråket som brukes i Shopify-temaer, er veldig lesbart og lett å komme i gang med, kan et område av Shopify-utvikling som ofte forårsaker forvirring for nye temautviklere, være Bilder. Jeg tror at hovedgrunnen til dette ligger ved å forstå «type» av bildet du møter i et Shopify-tema. I løpet av denne artikkelen vil vi undersøke hver annen type bilde og hvordan du bruker dem i et Shopify-tema.
Hvis du er ny på Liquid, vil min tre-serie gi deg en solid jording og vil være nyttig når du følger med. Hvis du er ny på Shopify, kan du eksperimentere med noen av disse teknikkene ved hjelp av en gratis utviklingsbutikk. For å opprette en utviklingsbutikk registrer deg det gratis Shopify Partner-programmet.
Fem enkle trinn utnytter temabilder for å gi deres hjemmebilde til hjemmebanenDet finnes fire typer bilder i et Shopify-tema. Du vil jobbe med hver av dem på tvers av et tema, så det er viktig å forstå forskjellene mellom dem. La oss undersøke hverandre i sin tur:
Accentsconagua
eiendeler mappe og er spesifikk for det aktuelle temaet. Disse blir vanligvis lagt til temaet av en temautvikler.Det er viktig å merke seg at produkt-, samlings- og artikkelbilder er koblet direkte til butikken. Hvis du endrer butikkens tema, forblir disse bildene på plass og vil fungere med et gitt tema som refererer til dem.
La oss begynne med å se på temabilder. Når du oppretter et Shopify-tema, kan du legge til et hvilket som helst antall bilder, i hvilket som helst format og i hvilken som helst størrelse til eiendeler mappe i temakatalogen din. Vanligvis kan disse bildene brukes til bakgrunn, sprites og merkevareelementer.
Å referere disse bildene i et tema er veldig grei. La oss anta at vi har en logo.png i vår eiendeler mappe; vi kan sende det ut i en hvilken som helst mal ved å bruke følgende flytende syntaks:
'logo.png' | asset_url | img_tag: 'Logo'
Denne tilnærmingen bruker to flytende filtre for å lage en fullstendig HTML img element. Den første, ASSET_URL, pre-legger hele banen til aktivitetsmappen for den nåværende butikkens tema. Den andre, img_tag, tar dette og lager en HTML img element komplett med alt Egenskap. Hvis utelatt vil alt attributtet være tomt. Her er sluttresultatet:
Greats presentere sine sko godt med produktbilder på butikkens hjemmeside Du vil legge merke til at src Attributt referanser til Shopify CDN (Content Delivery Network). Alle bilder du legger til, uavhengig av typen, blir distribuert til CDN. Dette bidrar til å sikre rask levering av butikkens bilder til kunden.
I motsetning til selvbehandlede bildefiler har du ingen måte å vite den eksakte serverplasseringen for bildefilene dine. Heldigvis trenger du ikke å bekymre deg for dette som Shopify-spesifikke ASSET_URL Flytende filter vil gi banen for deg når siden din blir gjengitt.
Å abstrahere hele serverbanen bort til et filter betyr også at temaene dine er fullt overførbare fra en butikk til en annen. Den riktige nettadressen blir inkludert, avhengig av temaet og butikken som vises.
img ElementI eksemplet ovenfor la vi til alt attributt via img_tag filter. Det er også mulig å legge til en ytterligere parameter som lar deg legge til klasser i img element. Her er vår kode refactored:
'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2'
Dette vil resultere i følgende utgang:
Det vil selvfølgelig være tilfeller der du trenger litt mer kontroll over HTML-en din. Ved å utelate img_tag filter vi kan bygge opp vår oppskrift som vi ønsker.
Her er en tilnærming som vil tillate deg å legge til dine egne attributter som id:
Det er også ganske enkelt å bruke disse ressursene i både CSS og JavaScript-filer. For å gjøre dette legges til .væske (f.eks. styles.css.liquid) til en CSS eller JavaScript-fil i din eiendeler mappe og referanse bildet, i CSS-filen din, ved hjelp av samme flytende kode som vi brukte ovenfor:
kropp bakgrunn: url ('logo.png' | asset_url) repeat-x øverst til venstre; Tema bilder er relativt enkle. Så lenge du forstår hvordan du skal bruke ASSET_URL Du kan velge om du vil legge til ekstra img_tag filtrere eller bygge opp img komponere deg selv.
Selv om vi har full kontroll over våre temabilder, er vi nåde til butikkens eiere når det gjelder produktbilder. Heldigvis Shopify går langt for å hjelpe oss med å få tilbake kontrollen. La oss begynne med å se på hva som skjer når en selger laster opp et bilde i Shopify-administratoren.
Studio Neat produktbilde på produktsiden for deres Neat Ice Kit Hver gang et produkt, samling eller artikkelbilde er lastet opp, kjøper Shopify det bildet og tilpasser det automatisk til en rekke forhåndsdefinerte størrelser. Disse bildene er "namespaced" slik at vi enkelt kan referere dem i våre temaer.
Her er listen over størrelser med tilhørende bilde navn:
| 16 × 16 | pico |
| 32 × 32 | ikon |
| 50 × 50 | tommel |
| 100 × 100 | liten |
| 160 × 160 | kompakt |
| 240 × 240 | medium |
| 480 × 480 | stor |
| 600 × 600 | grande |
| 1024 × 1024 | 1024x1024 |
| 2048 × 2048 | 2048x2048 |
| Største bilde | herre |
Verdiene ovenfor angir maksimale grenser for en bildestørrelse. Alle tilpassede bilder vil beholde deres størrelsesforhold og skaleres deretter.
Dette kan bety at et "medium" bilde har en bredde på 240px, men en høyde på kun 190px og likevel en høyde på 240px, men en bredde på 80px. Det er derfor de fleste temautviklere ber om at deres kunder laster opp firkantede bilder som de vil være mer forutsigbare.
Bildestørrelsen "Master" vil alltid spore den største størrelsen som er tilgjengelig fra serveren. For tiden er dette 2048px × 2048px. Hvis du laster opp et bilde større enn 2048px bredt, har du ikke tilgang til det opprinnelige skjemaet.
Det er også verdt å merke seg at det opprinnelig opplastede produktbildet aldri vil bli oppskalert i størrelse. Hvis du laster opp et lite bilde, vil det forbli lite. Du kan selvfølgelig referere til bildet ved å bruke noen av de ovennevnte bildene. Vær imidlertid oppmerksom på at hvis du ber om en størrelse som ikke var mulig å opprette, vil du bli servert den nærmeste tilgjengelige størrelsen.
Også i tankene at hvis manipulert med CSS (f.eks. bredde: 100%) Bildet kan bli oppskalert og kan bli pixelert (avhengig av formatet). Når du jobber med klienter, oppfordrer de dem til å laste opp høyoppløselige firkantede bilder der det er mulig.
Endelig er det verdt å huske at vi ikke har tilgang til produktbilder i temaets mappe. De lagres på Shopify CDN og forblir festet til butikken uavhengig av temaet som brukes.
I motsetning til temabilder benytter ikke produktbilder ASSET_URL. For å kunne utgive et produktbilde kan vi gjøre bruk av img_url Flytende filter i stedet. Dette skyldes at produktbilder er relatert til butikken og ikke er en del av temaets eiendeler.
img_url returnerer nettadressen til et bilde og aksepterer en bildestørrelse som en parameter. Den kan brukes på følgende flytende gjenstander:
Bruker img_url filteret er som følger:
produkt | img_url: 'small' variant | img_url: 'small' line_item | img_url: 'small' collection | img_url: 'liten'
Hver av disse vil returnere den fullt kvalifiserte URL til bildet som er lagret på Shopify CDN.
For å demonstrere, la oss ta en titt på noen eksempler Væskekode fra en typisk product.liquid mal. Siden denne malen har tilgang til produkt Variabel alle disse eksemplene vil fungere. Vær imidlertid oppmerksom på at de ikke fungerer som forventet i andre maler.
I dette første eksemplet er verdien av bilde vil representere hvert bilde i samlingen og ha en annen verdi gjennom hver iterasjon av vår flytende sløyfe. Denne variabelen kan navngis, men du ser det som passer; jeg bruker bilde som det sammenhengende er det fornuftig.
% for bilde i product.images%% endfor%
Når du har jobbet med temaer for en gang, kan du merke til at andre filtre blir brukt i forhold til produktbilder. Her er noen alternativer som kan brukes i vårt eksempel ovenfor, som hver ville ha samme utgang:
Det er helt opp til deg som du velger å bruke. Hvis du foretrekker en metode over en annen, kan du alltid legge igjen en kommentar ved hjelp av % kommentar% ... % endcomment% forklarer din beslutning. Dette er spesielt nyttig når du samarbeider om temaer.
I tillegg til produktbilder er det også mulig å vise bilder knyttet til produktvarianter. En variant kan forklares som en variant av produktet. La oss si at vi har en t-skjorte med en bestemt utskrift på den. Denne t-skjorten kan komme i grønt, blått og rødt. Mens utskriften forblir den samme, er fargen på selve t-skjorten annerledes. Det er fortsatt det samme produktet, men vi har valgt å gjøre det mulig for kunden å velge mellom visse alternativer. Ofte vil disse være størrelse og farge.
Varianter kan også ha sin egen pris og lagernivå. Det er mulig å knytte et bestemt bilde til hver variant - i tillegg til hovedproduktbildene. Hvis temaet ditt bruker variantbilder, kan du vise dem på følgende måte i product.liquid mal:
% for variant i product.variants% % hvis variant.image%% endif% % endfor%
% endfor%
% endif% % endfor%alt EgenskapHvis du ønsker å legge til alt Attributt til produksjonen din kan du gjøre slik som følger:
% for bilde i product.images%
Dette vil utgjøre alt tekst skrevet inn i Shopify admin, eller tom hvis ingenting ble oppgitt. Alternativt kan du gjøre følgende hvis du velger å bruke img_tag filter:
image | img_url: 'grande' | img_tag: image.alt
I vårt eksempel ovenfor brukte vi en væskesløyfe for å få tilgang til hvert av bildene som er knyttet til et produkt i sin tur. Hvis produktet hadde ett bilde, ville vi sende ett bilde, hvis det hadde ti tilknyttet det, ville sløyfen gi ut ti bilder.
I Shopify er det første bildet som er oppført i administrasjonen også kjent som "kjennetegnet bilde". Heldigvis å skrive ut det "kjente bildet" er fint og greit og krever ikke en sløyfe. Her er et eksempel som ville fungere i product.liquid mal:
Som alltid er det alternative måter du kan oppnå dette, inkludert:
Du kan også utvide syntaksen for å inkludere alt attributt i det andre og tredje eksemplet:
Jeg beskriver ofte en samling i Shopify som en logisk gruppering av produkter. For eksempel kan det være t-skjorter, jeans og kjoler til en klærbutikk. Et produkt kan sitte i null, en eller mange samlinger, noe som muliggjør enkel kategorisering og oppdagelse.
Hjelmstøvler bruker bruk av samlingsbilder for å veilede kunder til forskjellige områder i butikkenOfte vil selgere ønske å inkludere en side i butikken deres som beskriver alle sine tilgjengelige samlinger. Malen som gjør dette mulig i Shopify er list-collections.liquid. Her er et eksempel på hvordan du kan løse over hver samling og utføre bildet som er tilknyttet det fra den aktuelle mal:
% for samling i samlinger% collection.image | img_url: 'compact' | img_tag: alt: collection.title % endfor%
Du kan utvide dette eksemplet ytterligere for å sikre at du ser på situasjonen der et samlingsbilde ikke ble lagt til:
% for samling i samlinger% % hvis 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 tilfellet bruker vi et temabilde i stedet for samlingsbildet. Dette vil bare bli gjengitt hvis det ikke er et tilknyttet samlingsbilde. For at dette skal fungere som ønsket, må du sikre at det er et bilde med tittelen Samlingen-image-default.png innenfor temaet ditt eiendeler mappe.
Artikkelbilder fungerer på omtrent samme måte som produkt- og samlingsbilder. Her er et eksempel:
% if article.image% article | img_url: 'medium' | img_tag: article.title % endif%
Shopify Partner Blog bruker artikkelbilder til å gi heltebilder for hvert innleggHvis artikkelen har et tilhørende bilde, vil det bli vist og gitt alt Attributt av artikkelenes tittel. Det er noen måter å samle inn og artikkelbilder kan komme til nytte:
Det endelige stykket av puslespillet innebærer bilder lastet opp via "Tilpass tema" -alternativet.
Hvert tema har a config mappe. I den finner du en fil som heter settings_schema.json. Denne filen hjelper oss med å generere et admingrensesnitt som gjør det mulig for selgere å legge til data som tekst, boolske verdier (true / false), velg fonter, last opp bilder og mye mer. Vi kan definere disse grensesnittelementene ved hjelp av JSON.
For å aktivere en bildeopplasting må du legge til et nytt element i settings_schema.json fil i følgende format:
"type": "bilde", "id": "logo.png", "label": "Tekst", "maks bredde": 480, "maks høyde": 200, "info"
Her er et eksempel basert på å legge til en logo for butikken:
"type": "bilde", "id": "shop_logo.png", "label": "Shop logo", "maksimal bredde": 480, "maks høyde": 200,
Bilder lastet opp gjennom siden "Tilpass tema" legges til temaet eiendeler mappe. Som sådan inkluderte jeg dem ikke som en egen bildetype i begynnelsen av artikkelen.
Bildefilen er lagret med et navn og format som samsvarer med id Tilordne uavhengig av filens originale navn eller format. For eksempel image.jpg filen ville bli lagret som shop_logo.png. Shopify vil forsøke å konvertere den opplastede filen til riktig format (.png) før du lagrer det. Hvis Shopify ikke kan konvertere filen til en .png fil, vil brukeren motta en feilmelding i administrasjonen.
Du vil legge merke til at inngangstypen er bilde som resulterer i en opplastningsknapp som vises i nettleseren. Du kan også angi maksimal høyde og bredde for en bildeopplasting ved å bruke dataattributter. Shopify vil da opprettholde aspektforholdet til det opplastede bildet mens det begrenses til de maksimale dimensjonene.
Henvisning av bilder lagt til via "Tilpass tema" gjøres på samme måte som alle andre temabilder:
'logo.png' | asset_url | img_tag: 'Logo'
En ting du kanskje vil vurdere er å bruke id tilordne til "namespace" dine temainnstillinger opplastinger. På denne måten er de lett å få øye på i eiendeler mappe som de vil bli gruppert sammen. Det hjelper også ved et uhell å overskrive filer som du legger til i temaet ditt.
Jeg bruker ofte ct- prefiks som følger:
"type": "bilde", "id": "ct-shop_logo.png", "label": "Shop logo", "maksimal bredde": 480, "maks høyde": 200,
I midten av 2015 oppdaget Jason Bowman at Shopify-kassen viste skjærede firkantede bilder. Du kan lese om hans oppdagelse på hans Freak Design blogg.
Jasons undersøkelser førte til at han oppdaget at alle kassene var lagt sammen med _cropped. Her er et eksempel:
produkt-beskjæring-test-001_1024x1024.png
når beskåret blir:
produkt-beskjæring-test-001_1024x1024_cropped.png
Beskjæringen fungerer for alle størrelser unntatt Herre. For å bruke beskjærte bilder legger vi til _cropped til vår img_tag filter. Her er et eksempel på et produkt med bilde:
product.featured_image | product_img_url: "medium_cropped"
På tidspunktet for skriving er dette ikke dokumentert, så det er alltid muligheten for at det kan endres, men jeg ville ta med det.
Vi har tatt mye grunnlag i denne artikkelen, men forhåpentligvis viser vi deg hvor fleksibel Shopify er når det gjelder å jobbe med bilder i et tema.
Bilder er en integrert del av en hvilken som helst e-handelsbutikk. Å forstå hvordan bilder håndteres og manipuleres i et Shopify-tema er en viktig del av å lære Liquid og Shopify-plattformen.
Forhåpentligvis er du enig i at verktøyene i Shopify-plattformen og Liquid gir deg stor fleksibilitet når det gjelder å jobbe med bilder i temaene dine.
