Share
När du börjar med en ny plattform, till exempel Shopify, finns det mycket att lära dig. Medan Flytande, det mallspråket som används i Shopify-teman, är mycket läsbart och lätt att komma igång med, ett område av Shopify-utveckling som ofta kan skapa förvirring för nya tematillverkare är bilder. Jag tror att den främsta anledningen till detta ligger i att förstå typen av bild som du stöter på i ett Shopify-tema. Under den här artikeln ska vi granska varje annorlunda typ av bild och hur du använder dem i ett Shopify-tema.
Om du är ny på Vätska kommer mina tre serier att ge dig en solid grund och kommer att vara till hjälp när du följer med. Om du är ny på Shopify kan du experimentera med någon av dessa tekniker med en gratis utvecklingsbutik. För att skapa en utvecklingsbutik registrera dig för det fria Shopify Partner-programmet.
Fem enkla steg använder temafilmer för att ge deras hemsida hjältebildDet finns fyra typer av bilder i ett Shopify-tema. Du kommer att arbeta med var och en över ett tema, så det är viktigt att förstå skillnaderna mellan dem. Låt oss undersöka var och en i tur och ordning:
Accentsconagua
tillgångar mapp och är specifika för det temat. Dessa läggs vanligtvis till temat av en temabutiker.Det är viktigt att notera att produkt-, samlings- och artikelbilder alla är kopplade direkt till affären. Om du ändrar butiks temat kommer dessa bilder att vara kvar på plats och kommer att fungera med ett givet tema som refererar till dem.
Låt oss börja med att titta på temabilder. När du skapar ett Shopify-tema kan du lägga till ett antal bilder, i vilket format som helst och i vilken storlek som helst tillgångar mappen i din temakatalog. Vanligtvis kan dessa bilder användas för bakgrund, sprites och branding-element.
Att referera till dessa bilder i ett tema är väldigt enkelt. Låt oss anta att vi har en logo.png i vår tillgångar mapp; vi kan mata ut det i vilken mall som helst med följande flytande syntax:
'logo.png' | asset_url | img_tag: 'Logo'
Detta tillvägagångssätt använder två Liquid-filter för att skapa en fullt utformad HTML img element. Den första, ASSET_URL, lägger in hela banan till aktivitetsmappen för aktuell butiks tema. Den andra, img_tag, tar detta och skapar en HTML img element komplett med alt attribut. Om borttaget kommer alt attributet att vara tomt. Här är slutresultatet:
Greats presenterar klokt sina skor med hjälp av produktbilder på deras hemsida Du märker att src attribut referenser till Shopify CDN (Content Delivery Network). Varje bild som du lägger till, oberoende av dess typ, kommer att distribueras till CDN. Detta hjälper till att snabbt leverera dina butiks bilder till kunden.
Till skillnad från självhävd bildfiler har du ingen möjlighet att känna till exakt serverplatsen för dina bildfiler. Lyckligtvis behöver du inte oroa dig för detta som Shopify-specifikt ASSET_URL Flytande filter kommer att ge vägen för dig när din sida görs.
Att abstrahera hela serverns vägen till ett filter betyder också att dina teman är fullständigt överförbara från en butik till en annan. Den korrekta webbadressen blir inkluderad beroende på tema och butik som visas.
img ElementI exemplet ovan lade vi till alt attribut via img_tag filtrera. Det är också möjligt att lägga till en ytterligare parameter som låter dig lägga till klasser till img element. Här är vår kod refactored:
'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2'
Detta skulle resultera i följande produktion:
Det kommer givetvis att finnas tillfällen där du behöver lite mer kontroll över din HTML. Genom att utelämna img_tag filter vi kan bygga upp vår markering som vi önskar.
Här är ett tillvägagångssätt som låter dig lägga till egna attribut som t.ex. id:
Det är också ganska enkelt att använda dessa tillgångar i både CSS och JavaScript-filer. För att göra detta lägger till .flytande (t.ex. styles.css.liquid) till en CSS eller JavaScript-fil i din tillgångar mapp och hänvisa bilden, i din CSS-fil, med samma Liquid-kod som vi använde ovan:
kropp bakgrund: url ('logo.png' | asset_url) repeat-x övre vänstra; Tema bilder är relativt enkla. Så länge du förstår hur du använder ASSET_URL Du kan välja om du vill lägga till extra img_tag filtrera eller bygga upp img inse dig själv.
Samtidigt som vi har full kontroll över våra temafoton, är vi tillägnad butiksejerna när det gäller produktbilder. Tack och lov Shopify går långt för att hjälpa oss att återfå den kontrollen. Låt oss börja med att titta på vad som händer när en köpman laddar upp en bild i Shopify-administratören.
Studio Neat produktbild på produktsidan för Snygg Ice Kit Varje gång en produkt, samling eller artikelbild laddas upp, köper Shopify den bilden och ändrar den automatiskt till ett antal fördefinierade storlekar. Dessa bilder är "namespaced" så att vi enkelt kan hänvisa dem till våra teman.
Här är listan med storlekar med motsvarande bildnamn:
| 16 × 16 | pico |
| 32 × 32 | ikon |
| 50 × 50 | tumme |
| 100 × 100 | små |
| 160 × 160 | kompakt |
| 240 × 240 | medium |
| 480 × 480 | stor |
| 600 × 600 | grande |
| 1024 × 1024 | 1024x1024 |
| 2048 × 2048 | 2048x2048 |
| Största bilden | bemästra |
Värdena ovan anger de maximala gränserna för en bildstorlek. Alla ändrade bilder kommer att hålla sitt bildförhållande och kommer att skalas därefter.
Detta kan innebära att en "medium" bild har en bredd på 240px men en höjd på endast 190px och likaledes en höjd på 240px men en bredd på 80px. Det är av den anledningen att de flesta temautvecklare begär att deras kunder laddar upp kvadratiska bilder eftersom de blir mer förutsägbara.
Bildstorleken "Master" kommer alltid att spåra den största storleken som finns tillgänglig från servern. För närvarande är detta 2048px × 2048px. Om du laddar upp en bild större än 2048px bred har du inte tillgång till dess ursprungliga formulär.
Det är också värt att notera att den ursprungliga uppladdade produktbilden aldrig kommer att skalas upp i storlek. Om du laddar upp en liten bild blir den liten. Du kan naturligtvis referera till bilden genom att använda något av ovanstående bildnamn. Observera dock att om du begär en storlek som inte var möjlig att skapa så kommer du att serveras den närmaste tillgängliga storleken.
Också i åtanke att om man manipulerar med CSS (t.ex.. bredd: 100%) Bilden kan uppskalas och kan bli pixelerad (beroende på format). När du arbetar med klienter uppmuntra dem att ladda upp högupplösta kvadratiska bilder där det är möjligt.
Slutligen är det värt att komma ihåg att vi inte har tillgång till produktbilder i vårt temas mapp. De lagras på Shopify CDN och förblir fästa i butiken oavsett tema som tillämpas.
Till skillnad från temabilder utnyttjar inte produktbilder ASSET_URL. För att kunna producera en produktbild kan vi utnyttja img_url Flytande filter istället. Detta beror på att produktbilder är relaterade till affären och inte en del av tematets tillgångar.
img_url returnerar webbadressen till en bild och accepterar en bildstorlek som en parameter. Den kan användas på följande flytande föremål:
Använda img_url filtret är som följer:
produkt | img_url: 'small' variant | img_url: 'small' line_item | img_url: 'small' collection | img_url: 'liten'
Var och en av dessa kommer att returnera den fullständigt kvalificerade webbadressen till den bild som är lagrad på Shopify CDN.
Att demonstrera låt oss ta en titt på något exempel Vätskekod från en typisk product.liquid mall. Eftersom den här mallen har åtkomst till produkt variabel alla dessa exempel kommer att fungera. Observera dock att de inte fungerar som förväntat i andra mallar.
I det här första exemplet är värdet av bild kommer att representera varje bild i samlingen och ha ett annat värde genom varje iteration av vår Liquid-loop. Denna variabel kan namnges men du ser lämplig; jag använder bild som det är kontextuellt är det meningsfullt.
% för bild i product.images%% endfor%
När du en gång har arbetat med teman kan du märka att andra filter används i förhållande till produktbilder. Här är några alternativ som kan användas i vårt exempel ovan, som var och en skulle ha samma resultat:
Det är helt upp till dig som du väljer att använda. Om du föredrar en metod över en annan kan du alltid lämna en kommentar med % comment% ... % endcomment% förklara ditt beslut. Detta är särskilt användbart när du arbetar med teman.
Förutom produktbilder är det också möjligt att visa bilder relaterade till varianterna. En variant kan förklaras som en variation av produkten. Låt oss säga att vi har en t-shirt med ett visst tryck på den. Denna t-shirt kan komma i grönt, blått och rött. Medan trycket förblir detsamma är själva t-skjortans färg annorlunda. Det är fortfarande samma produkt, men vi har valt att göra det möjligt för kunden att välja mellan vissa alternativ. Ofta kommer dessa att vara storlek och färg.
Varianter kan också ha sin egen pris och lagernivå. Det är möjligt att associera en viss bild till varje variant - utöver huvudproduktbilderna. Om ditt tema använder olika bilder kan du visa dem på följande sätt i product.liquid mall:
% för variant i product.variants% % om variant.image%% endif% % endfor%
% endfor%
% endif% % endfor%alt AttributOm du vill lägga till alt Attribut till din produktion kan du göra så här:
% för bild i product.images%
Detta kommer att mata ut alt text som skrivs in i Shopify-administratören, eller tom om inget har skrivits in. Alternativt kan du göra följande om du väljer att använda img_tag filtrera:
bild | img_url: 'grande' | img_tag: image.alt
I vårt exempel ovan använde vi en Liquid-slinga för åtkomst till var och en av bilderna i samband med en produkt i sin tur. Om produkten hade en bild skulle vi mata ut en bild, om det hade tio associerade med det skulle slingan producera tio bilder.
I Shopify är den första bilden som anges i adminen också känd som "featured image". Tack och lov är det snyggt och enkelt att skriva ut den "utvalda bilden" och behöver inte en slinga. Här är ett exempel som skulle fungera i product.liquid mall:
Som alltid finns det alternativa sätt att uppnå detta, bland annat:
Du kan också förlänga syntaxen för att inkludera alt attribut i det andra och det tredje exemplet:
Jag beskriver ofta en samling i Shopify som en logisk gruppering av produkter. Till exempel kan det vara t-shirts, jeans och klänningar för en klädaffär. En produkt kan sitta i noll, en eller flera samlingar, vilket möjliggör enkel kategorisering och upptäckt.
Helm Boots använder sig av samlingsbilder för att vägleda kunderna till olika delar av deras butikOfta kommer köpmännen att vilja inkludera en sida i deras butik som beskriver alla sina tillgängliga samlingar. Mallen som gör det möjligt i Shopify är list-collections.liquid. Här är ett exempel på hur du kan slingra över varje samling och mata ut den bild som är associerad med den från den mallen:
% för samling i samlingar% collection.image | img_url: 'compact' | img_tag: alt: collection.title % endfor%
Du kan förlänga detta exempel för att se till att du tillgodoser situationen där en samlingsbild inte hade lagts till:
% för samling i samlingar% % om collection.image% collection.image.src | img_url: 'medium' | img_tag: collection.title % else% 'collection-image-default.png' | asset_url | img_tag % endif% % endfor%
I det här fallet använder vi en temafilm i stället för samlingsbilden. Detta kommer endast att göras om det inte finns någon associerad samlingsbild. För att detta ska fungera som avsett måste du se till att det finns en bild med titeln samling-image-default.png inom ditt tema tillgångar mapp.
Artikelbilder fungerar på ungefär samma sätt som produkt och samlingsbilder. Här är ett exempel:
% om article.image% artikel | img_url: 'medium' | img_tag: article.title % endif%
Shopify Partner Blog använder artikelbilder för att ge hjälmbilder för varje inläggOm artikeln har en tillhörande bild så visas den och ges den alt attribut av artikelns titel. Det finns några sätt att samla in och artikelbilder kan komma till nytta:
Det sista stycket av pusslet innebär bilder uppladdade via alternativet "Anpassa tema".
Varje tema har a config mapp. Här hittar du en fil som heter settings_schema.json. Den här filen hjälper oss att skapa ett administratörsgränssnitt som gör det möjligt för återförsäljare att lägga till data som text, booleska värden (true / false), välja teckensnitt, ladda upp bilder och mycket mer. Vi kan definiera dessa gränssnittselement med JSON.
För att aktivera en bilduppladdning måste du lägga till ett nytt element i settings_schema.json filen i följande format:
"typ": "bild", "id": "logo.png", "label": "Text", "maxbredd": 480, "maxhöjd": 200, "info"
Här är ett exempel baserat på att lägga till en logotyp för affären:
"typ": "bild", "id": "shop_logo.png", "label": "Butikslogotyp", "maxbredd": 480, "maxhöjd": 200,
Bilder som laddas upp via sidan "Anpassa tema" läggs till i tematets tillgångar mapp. Som sådan inkluderade jag dem inte som en separat bildtyp i början av artikeln.
Bildfilen sparas med ett namn och format som matchar id attribut oberoende av filens ursprungliga namn eller format. Till exempel image.jpg filen skulle sparas som shop_logo.png. Shopify försöker konvertera den uppladdade filen till lämpligt format (.png) innan du sparar den. Om Shopify inte kan konvertera filen till en .png filen kommer användaren att få ett felmeddelande i admin.
Du märker att inmatningstypen är bild vilket resulterar i en uppladdningsknapp som visas i webbläsaren. Du kan också ange maximal höjd och bredd för en bilduppladdning genom att använda dataattribut. Shopify kommer då att behålla bildförhållandet för den uppladdade bilden medan den begränsas till de maximala dimensionerna.
Hänvisning till bilder som läggs till via "Anpassa tema" görs på samma sätt som alla andra temafoton:
'logo.png' | asset_url | img_tag: 'Logo'
En sak du kanske vill överväga använder du id attribut till "namespace" dina temainställningar uppladdningar. På så sätt är de lätta att upptäcka i tillgångar mapp som de kommer att grupperas ihop. Det hjälper också att oavsiktligt skriva över filer som du lägger till i ditt tema.
Jag använder ofta ct- prefix enligt följande:
"typ": "bild", "id": "ct-shop_logo.png", "label": "Butikslogotyp", "maxbredd": 480, "maxhöjd": 200,
I mitten av 2015 noterade Jason Bowman att Shopify-kassan visade beskärda kvadratiska bilder. Du kan läsa om hans upptäckt på hans Freak Design blogg.
Jason undersökningar ledde honom att upptäcka att alla checkoutbilder var bifogade med _cropped. Här är ett exempel:
produkt-beskärning-testet-001_1024x1024.png
när beskärningen blir:
produkt-beskärning-testet-001_1024x1024_cropped.png
Beskärningen fungerar för alla storlekar utom Bemästra. För att kunna använda beskuren bilder lägger vi till _cropped till vår img_tag filtrera. Här är ett exempel på en produktsortiment:
product.featured_image | product_img_url: "medium_cropped"
I skrivande stund är detta ookumenterat så det finns alltid möjlighet att det kan förändras, men jag ville inkludera det.
Vi har täckt en hel del mark i den här artikeln men förhoppningsvis visar vi dig hur flexibel Shopify är när det gäller att arbeta med bilder i ett tema.
Bilder är en integrerad del av en e-handelsbutik. Förstå hur bilder hanteras och manipuleras i ett Shopify-tema är en viktig del av att lära Liquid och Shopify-plattformen.
Förhoppningsvis kommer du att hålla med om att verktygen inom Shopify-plattformen och Liquid ger dig mycket flexibilitet när det gäller att arbeta med bilder i dina teman.
