Share
Când începeți cu o nouă platformă, cum ar fi Shopify, aveți multe de învățat. În timp ce Liquid, limbajul șablon utilizat în temele Shopify, este foarte ușor de citit și ușor de început, o zonă a dezvoltării Shopify care poate provoca confuzie adesea pentru dezvoltatorii de teme noi imagini. Cred că motivul principal constă în înțelegerea "tipului" imaginii pe care îl întâlniți într-o temă Shopify. În cursul acestui articol, vom examina fiecare tip diferit de imagine și cum să îi folosim într-o temă Shopify.
Dacă sunteți nou la Liquid seria de trei părți vă va oferi o bază solidă și va fi de ajutor în timp ce urmați de-a lungul. Dacă sunteți nou la Shopify, puteți experimenta oricare dintre aceste tehnici folosind un magazin de dezvoltare gratuită. Pentru a crea un magazin de dezvoltare, înscrieți-vă la programul gratuit de parteneriat Shopify.
Cinci pași simpli folosesc imaginile tematice pentru a le oferi imaginea eroilor de pe pagina lor de pornireExistă patru tipuri de imagini într-o temă Shopify. Veți lucra cu fiecare dintre ele pe o temă, deci este important să înțelegeți diferențele dintre ele. Să examinăm fiecare pe rând:
Accentsconagua
bunuri și sunt specifice acelei teme. Acestea sunt de obicei adăugate temei de către un dezvoltator de teme.Este important să rețineți că produsul, colecția și imaginile articolului sunt legate direct de magazin. Dacă schimbați tema magazinului, aceste imagini vor rămâne în vigoare și vor funcționa cu orice temă dată care le face referire.
Să începem să privim imaginile tematice. Când creați o temă Shopify, puteți adăuga orice număr de imagini, în orice format și în orice dimensiune, la bunuri folder din directorul tematic. De obicei, aceste imagini pot fi folosite pentru fundaluri, sprite și elemente de branding.
Referirea acestor imagini într-o temă este foarte simplă. Să presupunem că avem a logo.png în a noastră bunuri pliant; putem scoate în orice șablon folosind următoarea sintaxă lichidă:
'logo.png' | asset_url | img_tag: 'Logo'
Această abordare utilizează două filtre lichide pentru a crea un HTML complet format img element. Primul, ASSET_URL, prefixează calea completă către dosarul de materiale pentru tema magazinului curent. Al doilea, img_tag, ia acest lucru și creează un cod HTML img element complet cu Alt atribut. Dacă este omis atributul alt va fi gol. Iată rezultatul final:
Greats își prezintă în mod inteligent pantofii folosind imaginile produsului pe pagina de pornire a magazinelor Veți observa că src atribuie trimiterile la ShopNet (Rețeaua de livrare a conținutului). Fiecare imagine pe care o adăugați, indiferent de tipul acesteia, va fi distribuită în CDN. Acest lucru vă ajută să asigurați rapid livrarea imaginilor magazinului către client.
Spre deosebire de fișierele de imagini găzduite de sine, nu aveți niciun fel de cunoaștere a locației exacte a serverului pentru fișierele imagine. Din fericire, nu trebuie să vă faceți griji în legătură cu acest lucru, deoarece specificul Shopify ASSET_URL Filtru lichid va oferi calea pentru tine atunci când pagina ta este redată.
Abstrarea întregii căi de pe server către un filtru înseamnă, de asemenea, că temele dvs. sunt complet transferabile de la un magazin la altul. Adresa URL corectă este inclusă în funcție de temă și de magazinul vizualizat.
img ElementÎn exemplul de mai sus am adăugat Alt atribut prin img_tag filtru. De asemenea, este posibil să adăugați un alt parametru care vă permite să adăugați clase la img element. Iată codul nostru refactored:
'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2'
Acest lucru ar duce la următoarea ieșire:
Exista, desigur, ocazii în care aveți nevoie de un pic mai mult control asupra HTML-ului. Prin omiterea img_tag filtru putem construi marca noastră după cum doriți.
Iată o abordare care vă va permite să adăugați propriile atribute, cum ar fi id:
De asemenea, este destul de ușor să utilizați aceste active atât în fișiere CSS, cât și în fișiere JavaScript. Pentru a face acest lucru adăugați .lichid (de exemplu. styles.css.liquid) la un fișier CSS sau JavaScript în bunuri folder și referința imaginii, în fișierul dvs. CSS, utilizând același cod Liquid utilizat mai sus:
corp background: url ('logo.png' | asset_url) repetare-x sus la stânga; Imaginile tematice sunt relativ simple. Atâta timp cât înțelegi cum să folosești ASSET_URL puteți alege să adăugați sau nu suplimentar img_tag filtrați sau construiți img elementul dumneavoastră.
În timp ce avem control complet asupra imaginilor tematice, suntem la mila proprietarilor de magazine când vine vorba de imagini ale produselor. Din fericire, Shopify merge mult pentru a ne ajuta să recâștigăm controlul. Să începem să ne uităm la ce se întâmplă atunci când un comerciant încarcă o imagine în administratorul Shopify.
Studio Neat imagine de produs pe pagina lor Neat Ice Kit de produse De fiecare dată când un produs, o colecție sau o imagine de articol este încărcat, Shopify preia imaginea respectivă și o redimensionează automat într-un număr de dimensiuni predefinite. Aceste imagini sunt "numite", astfel încât să le putem trimite cu ușurință în temele noastre.
Iată lista de dimensiuni cu numele lor de imagine corespunzător:
| 16 × 16 | pico |
| 32 × 32 | icoană |
| 50 × 50 | deget mare |
| 100 × 100 | mic |
| 160 × 160 | compact |
| 240 × 240 | mediu |
| 480 × 480 | mare |
| 600 × 600 | grande |
| 1024 × 1024 | 1024x1024 |
| 2048 × 2048 | 2048x2048 |
| Cea mai mare imagine | maestru |
Valorile de mai sus specifică limitele "maxime" ale dimensiunii unei imagini. Toate imaginile redimensionate vor păstra raportul de aspect și vor fi scalate corespunzător.
Acest lucru ar putea însemna că o imagine "medie" are o lățime de 240px, dar o înălțime de doar 190px și, de asemenea, o înălțime de 240px, dar o lățime de 80px. Din acest motiv majoritatea dezvoltatorilor de teme solicită clienților săi să încarce imagini pătrate, deoarece acestea vor fi mai previzibile.
Dimensiunea imaginii "master" va urmări întotdeauna cea mai mare dimensiune disponibilă de la server. În prezent, acest lucru este 2048px × 2048px. Dacă încărcați o imagine mai mare de 2048px, nu veți avea acces la formularul său original.
De asemenea, merită remarcat faptul că imaginea de produs încărcată inițial nu va fi niciodată dimensionată. Dacă încărcați o imagine minusculă, aceasta va rămâne mică. Desigur, puteți să faceți referire la imagine utilizând oricare dintre numele imaginilor de mai sus. Cu toate acestea, rețineți că, dacă solicitați o dimensiune care nu a putut fi creată, veți primi cea mai apropiată dimensiune disponibilă.
De asemenea, în minte, dacă este manipulat cu CSS (de ex. lățime: 100%) imaginea poate fi scalată și poate deveni pixelată (în funcție de formatul acesteia). Când lucrați cu clienții, încurajați-i să încarce imagini pătrate de înaltă rezoluție acolo unde este posibil.
În cele din urmă merită să ne amintim că nu avem acces la imaginile produsului în dosarul temei noastre. Ele sunt stocate pe ShopNet CDN și rămân atașate la magazin, indiferent de tema aplicată.
Spre deosebire de imaginile pe care imaginile despre produse nu le folosesc ASSET_URL. Pentru a obține o imagine a produsului, putem folosi img_url În loc de filtru lichid. Acest lucru se datorează faptului că imaginile produselor sunt legate de magazin și nu fac parte din activele temei.
img_url returnează adresa URL a unei imagini și acceptă dimensiunea imaginii ca parametru. Poate fi folosit pe următoarele obiecte lichide:
Utilizarea img_url filtru este după cum urmează:
produs | img_url: 'mic' varianta | img_url: 'mic' line_item | img_url: 'mic' colecție | img_url: 'mic'
Fiecare dintre acestea va returna URL-ul complet calificat în imaginea stocată în ShopNet CDN.
Pentru a demonstra, să aruncăm o privire la un exemplu de cod lichid dintr-un tipic product.liquid șablon. Deoarece acest șablon particular are acces la produs variabilă toate aceste exemple vor funcționa. Cu toate acestea, rețineți că acestea nu vor funcționa conform așteptărilor din alte șabloane.
În acest prim exemplu, valoarea imagine va reprezenta fiecare imagine din colecție și va avea o valoare diferită prin fiecare iterație a buclei noastre de lichide. Această variabilă poate fi numită oricum considerați potrivit; eu folosesc imagine deoarece contextual acesta are sens.
% pentru imagine în product.images%% endfor%
Odată ce ați lucrat cu teme pentru o vreme, este posibil să observați că alte filtre sunt folosite în legătură cu imaginile produsului. Iată câteva alternative care ar putea fi utilizate în exemplul nostru de mai sus, fiecare dintre acestea având aceeași ieșire:
Depinde în întregime de dvs. pe care alegeți să o utilizați. Dacă preferați o metodă față de alta, puteți lăsa întotdeauna un comentariu folosind % comment% ... % endcomment% explicând decizia ta. Acest lucru este util în special atunci când colaborăm pe teme.
Pe lângă imaginile produselor, este posibilă și afișarea imaginilor legate de variantele de produse. O variantă poate fi explicată ca o variație a produsului. Să presupunem că avem un tricou cu o imprimare specială pe el. Acest tricou poate veni în verde, albastru și roșu. În timp ce imprimarea rămâne aceeași culoarea tricoului în sine este diferită. Este totuși același produs, dar am ales să îi permitem clientului să aleagă din anumite opțiuni. Adesea acestea vor fi dimensiunea și culoarea.
Variantele pot avea și propriul preț și nivelul de inventar. Este posibil să asociați o anumită imagine fiecărei variante - în plus față de imaginile produsului principal. Dacă tema dvs. utilizează imagini variante, le puteți afișa în modul următor product.liquid șablon:
% pentru varianta în product.variants% % if variant.image%% endif% % endfor%
% endfor%
% endif% % endfor%Alt AtributDacă doriți să adăugați Alt atribut la ieșirea dvs. puteți face acest lucru după cum urmează:
% pentru imagine în product.images%
Aceasta va scoate Alt text introdus în administratorul Shopify sau gol dacă nu a fost introdus nimic. Alternativ, puteți face următoarele dacă alegeți să utilizați img_tag filtru:
image | img_url: "grande" img_tag: image.alt
În exemplul de mai sus am folosit o buclă lichidă pentru a accesa la rândul său fiecare dintre imaginile asociate unui produs. În cazul în care produsul avea o singură imagine, ieșea o imagine, dacă ar fi avut zece asociate cu ea, bucla avea să producă zece imagini.
În "Shopify", prima imagine listată în admin este de asemenea cunoscută sub numele de "imagine prezentată". Din fericire, ieșirea "imaginii prezentate" este drăguță și simplă și nu necesită o buclă. Iată un exemplu care va funcționa în product.liquid șablon:
Ca întotdeauna există modalități alternative pe care le puteți realiza, inclusiv:
De asemenea, puteți extinde sintaxa pentru a include Alt atribut în al doilea și al treilea exemplu:
Deseori descriu o colecție în Shopify ca o grupare logică de produse. De exemplu, pot fi tricouri, blugi și rochii pentru un magazin de îmbrăcăminte. Un produs poate sta în zero, una sau mai multe colecții, permițând o clasificare și o descoperire ușoară.
Helm Boots utilizează imaginile de colectare pentru a ghida clienții în diferite zone ale magazinului lorAdesea, comercianții vor dori să includă o pagină în magazinul lor detaliind toate colecțiile lor disponibile. Șablonul care face posibil acest lucru în Shop Shop este Lista-collections.liquid. Iată un exemplu de modul în care poți să cuplați fiecare colecție și să scoateți imaginea asociată cu ea din cadrul acelui șablon:
% pentru colectarea în colecții% collection.image | img_url: "compact" | img_tag: alt: colecția.title % endfor%
S-ar putea să extindeți acest exemplu în continuare pentru a vă asigura că vă îngrijiți de situația în care nu a fost adăugată o imagine de colecție:
% pentru colectarea în colecții% % if collection.image% collection.image.src | img_url: "mediu" | img_tag: collection.title % else% 'collection-image-default.png' | asset_url | img_tag % endif% % pentru%
În acest caz, folosim o imagine temă în locul imaginii de colectare. Aceasta va fi redată numai dacă nu există o imagine de colecție asociată. Pentru ca aceasta să funcționeze așa cum doriți, va trebui să vă asigurați că există o imagine intitulată colectare-image-default.png în cadrul temelor tale bunuri pliant.
Imaginile articole funcționează în același mod ca imaginile de produs și de colecție. Iată un exemplu:
% if article.image% articol | img_url: "mediu" | img_tag: articolul.titul % endif%
Blogul Partener Shopify utilizează articole de articole pentru a oferi imagini eroice pentru fiecare postareDacă articolul are o imagine asociată, atunci acesta va fi afișat și dat Alt atributul titlului articolului. Există câteva moduri în care colecția și articolele de articol pot fi utile:
Ultima piesă a puzzle-ului implică imagini încărcate prin opțiunea "Personalizați tema".
Fiecare temă are a config pliant. În el veți găsi un fișier numit settings_schema.json. Acest fișier ne ajută să generăm o interfață de administrare care permite comercianților să adauge date precum text, valori booleene (true / false), să selecteze fonturi, să încarce imagini și multe altele. Putem defini aceste elemente de interfață utilizând JSON.
Pentru a activa o încărcare a imaginii, trebuie să adăugați un nou element la settings_schema.json fișier în formatul următor:
"tip": "imagine", "id": "logo.png", "etichetă": "Text", "max-lățime": 480,
Iată un exemplu bazat pe adăugarea unui logo pentru magazin:
"tip": "imagine", "id": "shop_logo.png", "etichetă": "logo-ul magazinului", "max-lățime": 480;
Imaginile încărcate prin pagina "Personalizați tema" sunt adăugate la tema bunuri pliant. Ca atare, nu le-am inclus ca un tip de imagine separat la începutul articolului.
Fișierul imagine este salvat cu un nume și un format care se potrivește cu id atribut indiferent de numele sau formatul inițial al fișierului. De exemplu image.jpg fișierul ar fi salvat ca shop_logo.png. Shopify va încerca să convertească fișierul încărcat în formatul corespunzător (.png) înainte de ao salva. Dacă Shopify nu poate converti fișierul la a .png fișier, utilizatorul va primi un mesaj de eroare în admin.
Veți observa că tipul de intrare este imagine care are ca rezultat un buton de încărcare care apare în browser. De asemenea, puteți specifica o înălțime și o lățime maximă pentru încărcarea imaginilor utilizând atributele de date. Shopify va păstra apoi raportul de aspect al imaginii încărcate în timp ce îl va restrânge la acele dimensiuni maxime.
Referenția imaginilor adăugate prin "Particularizarea temei" se face în același mod ca toate celelalte imagini ale temelor:
'logo.png' | asset_url | img_tag: 'Logo'
Un lucru pe care ați dori să îl luați în considerare este utilizarea id atribuiți "spațiului de nume" încărcarea setărilor temei. În acest fel, acestea sunt ușor de observat în bunuri deoarece acestea vor fi grupate împreună. De asemenea, ajută la suprascrierea accidentală a fișierelor pe care le adăugați în tema dvs..
Eu folosesc adesea CT- prefixul după cum urmează:
"tip": "imagine", "id": "ct-shop_logo.png", "etichetă": "logo-ul magazinului", "max-lățimea": 480;
La mijlocul anului 2015, Jason Bowman a observat că magazinul de cumpărături a afișat imagini pătrate tăiate. Puteți citi despre descoperirea lui pe blogul lui Freak Design.
Investigațiile lui Jason l-au determinat să descopere că au fost anexate toate imaginile de plată _cropped. Iată un exemplu:
produs de decupare-test-001_1024x1024.png
atunci când este tăiat devine:
produs de decupare-test-001_1024x1024_cropped.png
Lucrările de recoltare pentru toate dimensiunile, cu excepția Maestru. Pentru a utiliza imagini tăiate adăugăm _cropped pentru noi img_tag filtru. Iată un exemplu pentru o imagine a produsului:
product.featured_image | product_img_url: "mediu_cropped"
La momentul scrisului, acest lucru este nedocumentat, astfel încât există întotdeauna posibilitatea ca acesta să se schimbe, dar am vrut să îl includ.
Am acoperit o mulțime de teren în acest articol, dar, sperăm, ți-a arătat cât de flexibil este Shopify când vine vorba de a lucra cu imagini într-o temă.
Imaginile reprezintă o parte integrantă a oricărui magazin de comerț electronic. Înțelegerea modului în care imaginile sunt gestionate și manipulate într-o temă Shopify este o parte importantă a învățării Liquid și a platformei Shopify.
Sperăm că veți fi de acord că instrumentele din platforma Shopify și Liquid vă permit o mulțime de flexibilitate atunci când este vorba de a lucra cu imagini în temele dvs..
