Share
Quando si inizia con una nuova piattaforma, come Shopify, c'è molto da imparare. Anche se Liquid, il linguaggio dei template usato nei temi Shopify, è molto leggibile e facile da usare, un'area di sviluppo di Shopify che può causare spesso confusione per i nuovi sviluppatori di temi. immagini. Credo che la ragione principale di ciò risieda nel comprendere il "tipo" di immagine che si incontra all'interno di un tema di Shopify. Nel corso di questo articolo esamineremo ogni diverso tipo di immagine e come usarli all'interno di un tema di Shopify.
Se sei nuovo a Liquid, la mia serie in tre parti ti darà una solida base e ti sarà d'aiuto mentre seguirai. Se sei nuovo su Shopify puoi sperimentare con queste tecniche utilizzando un negozio di sviluppo gratuito. Per creare un negozio di sviluppo, iscriviti al programma di Shopify Partner gratuito.
Cinque semplici passaggi fanno uso di immagini a tema per fornire la loro immagine di eroe della home pageCi sono quattro tipi di immagini in un tema di Shopify. Lavorerai con ognuno di loro su un tema, quindi è importante capire le differenze tra loro. Esaminiamo ciascuno a turno:
Accentsconagua
risorse cartella e sono specifici per quel tema. Questi sono di solito aggiunti al tema da uno sviluppatore di temi.È importante notare che le immagini di prodotti, collezioni e articoli sono tutte collegate direttamente al negozio. Se cambi il tema del negozio queste immagini rimarranno al loro posto e funzioneranno con qualsiasi tema che le referenzia.
Iniziamo guardando le immagini dei temi. Quando crei un tema Shopify puoi aggiungere qualsiasi numero di immagini, in qualsiasi formato e in qualsiasi dimensione al risorse cartella all'interno della directory dei temi. In genere queste immagini possono essere utilizzate per sfondi, sprite e elementi di branding.
Il riferimento a queste immagini in un tema è molto semplice. Supponiamo di avere un logo.png nel nostro risorse cartella; possiamo produrlo in qualsiasi template usando la seguente sintassi Liquid:
'logo.png' | asset_url | img_tag: 'Logo'
Questo approccio utilizza due filtri liquidi per creare un codice HTML completo img elemento. Il primo, ASSET_URL, antepone il percorso completo alla cartella delle risorse per il tema del negozio corrente. Il secondo, img_tag, prende questo e crea un HTML img elemento completo con alt attributo. Se omesso, l'attributo alt sarà vuoto. Ecco il risultato finale:
I grandi mettono in mostra abilmente le loro scarpe usando le immagini dei prodotti nella home page dei loro negozi Noterai che il src attributo fa riferimento al CDN Shopify (Content Delivery Network). Ogni immagine che aggiungi, indipendentemente dal suo tipo, sarà distribuita alla CDN. Questo aiuta a garantire una consegna veloce delle immagini del tuo negozio al cliente.
A differenza dei file immagine ospitati autonomamente, non è possibile conoscere esattamente la posizione del server per i file immagine. Fortunatamente, non devi preoccuparti di questo come specifico di Shopify ASSET_URL Il filtro liquido fornirà il percorso per te quando la tua pagina viene renderizzata.
L'estrazione del percorso completo del server su un filtro significa anche che i temi sono completamente trasferibili da un negozio all'altro. L'URL corretto viene incluso a seconda del tema e del negozio visualizzato.
img ElementoNell'esempio sopra abbiamo aggiunto il alt attributo tramite il img_tag filtro. È anche possibile aggiungere un ulteriore parametro che consente di aggiungere classi al file img elemento. Ecco il nostro codice refactored:
'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2'
Ciò comporterebbe l'output seguente:
Ci saranno naturalmente occasioni in cui hai bisogno di un po 'più di controllo sul tuo HTML. Omettendo il img_tag filtro possiamo costruire il nostro markup come vogliamo.
Ecco un approccio che ti consente di aggiungere i tuoi attributi come id:
È anche abbastanza facile usare queste risorse sia in file CSS che JavaScript. Per fare questo append .liquido (per esempio. styles.css.liquid) in un file CSS o JavaScript nel tuo risorse cartella e fai riferimento all'immagine, nel tuo file CSS, usando lo stesso codice Liquid che abbiamo usato sopra:
body background: url ('logo.png' | asset_url) repeat-x in alto a sinistra; Le immagini tematiche sono relativamente semplici. Finché capisci come usare ASSET_URL puoi scegliere se aggiungere o meno l'extra img_tag filtrare o costruire il img elemento te stesso.
Mentre abbiamo il pieno controllo sulle nostre immagini tematiche, siamo in balia dei proprietari dei negozi quando si tratta di immagini dei prodotti. Per fortuna Shopify ci aiuta molto a recuperare quel controllo. Iniziamo osservando cosa succede quando un commerciante carica un'immagine nell'admin di Shopify.
Studio Neat product image sulla pagina del prodotto Neat Ice Kit Ogni volta che viene caricato un prodotto, una raccolta o un'immagine dell'articolo Shopify acquisisce quell'immagine e la ridimensiona automaticamente in un numero di dimensioni predefinite. Queste immagini sono "namespace" in modo che possiamo facilmente riferirle nei nostri temi.
Ecco l'elenco delle dimensioni con i nomi delle immagini corrispondenti:
| 16 × 16 | pico |
| 32 × 32 | icona |
| 50 × 50 | pollice |
| 100 × 100 | piccolo |
| 160 × 160 | compatto |
| 240 × 240 | medio |
| 480 × 480 | grande |
| 600 × 600 | Grande |
| 1024 × 1024 | 1024x1024 |
| 2048 × 2048 | 2048x2048 |
| La più grande immagine | maestro |
I valori sopra specificano i limiti "massimi" di una dimensione dell'immagine. Tutte le immagini ridimensionate manterranno le proporzioni e verranno ridimensionate di conseguenza.
Ciò potrebbe significare che un'immagine "media" ha una larghezza di 240 px ma un'altezza di soli 190 px e allo stesso modo un'altezza di 240 px ma una larghezza di 80 px. È per questo motivo che la maggior parte degli sviluppatori di temi richiede ai propri clienti di caricare immagini quadrate in quanto saranno più prevedibili.
La dimensione dell'immagine "principale" traccerà sempre la dimensione più grande disponibile dal server. Attualmente questo è 2048px × 2048px. Se carichi un'immagine più larga di 2048px, non avrai accesso al suo modulo originale.
Vale anche la pena notare che l'immagine del prodotto caricato originariamente non verrà mai ingrandita. Se carichi una piccola immagine, rimarrà piccola. Ovviamente puoi fare riferimento all'immagine usando uno dei nomi di immagine sopra. Tuttavia, tieni presente che se richiedi una dimensione che non è stato possibile creare, ti verrà offerta la dimensione disponibile più vicina.
Ricorda anche che se manipolato con CSS (ad es. larghezza: 100%) l'immagine può essere ingrandita e può essere pixelata (a seconda del suo formato). Quando lavori con i clienti, incoraggiali a caricare immagini quadrate ad alta risoluzione ove possibile.
Infine, vale la pena ricordare che non abbiamo accesso alle immagini dei prodotti nella cartella del nostro tema. Sono memorizzati nel CDN Shopify e rimangono collegati al negozio indipendentemente dal tema applicato.
A differenza delle immagini a tema, le immagini dei prodotti non vengono utilizzate ASSET_URL. Per produrre un'immagine di un prodotto possiamo utilizzare il img_url Filtro liquido invece. Ciò è dovuto al fatto che le immagini dei prodotti sono correlate al negozio e non fanno parte delle risorse del tema.
img_url restituisce l'URL di un'immagine e accetta una dimensione dell'immagine come parametro. Può essere utilizzato sui seguenti oggetti liquidi:
Usando il img_url il filtro è il seguente:
prodotto | img_url: 'small' variante | img_url: 'small' line_item | img_url: 'small' collection | img_url: 'small'
Ognuno di questi restituirà l'URL completo all'immagine memorizzata sul CDN di Shopify.
Per dimostrare diamo un'occhiata ad un esempio di codice Liquid da un tipico product.liquid modello. Poiché questo modello particolare ha accesso a Prodotto variabile funzionerà tutti questi esempi. Tuttavia, tieni presente che non funzioneranno come previsto in altri modelli.
In questo primo esempio il valore di Immagine rappresenterà ciascuna immagine nella collezione e avrà un valore diverso attraverso ogni iterazione del nostro ciclo Liquid. Questa variabile può essere nominata come ritieni opportuno; sto usando Immagine come contestualmente ha senso.
% per immagine in product.images%% endfor%
Dopo aver lavorato con i temi per un po 'di tempo, potresti notare altri filtri utilizzati in relazione alle immagini dei prodotti. Ecco alcune alternative che potrebbero essere utilizzate nel nostro esempio sopra, ognuna delle quali avrebbe lo stesso risultato:
Dipende esclusivamente da te che scegli di usare. Se preferisci un metodo piuttosto che un altro, puoi sempre lasciare un commento usando % comment% ... % endcomment% spiegando la tua decisione. Questo è particolarmente utile quando si collabora su temi.
Oltre alle immagini del prodotto è anche possibile visualizzare le immagini relative alle varianti dei prodotti. Una variante può essere spiegata come una variazione del prodotto. Diciamo che abbiamo una maglietta con una stampa particolare. Questa maglietta potrebbe essere verde, blu e rossa. Mentre la stampa rimane uguale, il colore della stessa maglietta è diverso. È sempre lo stesso prodotto, ma abbiamo scelto di consentire al cliente di scegliere tra alcune opzioni. Spesso questi saranno dimensioni e colori.
Le varianti possono anche avere il loro prezzo e il loro livello di inventario. È possibile associare un'immagine particolare a ciascuna variante, oltre alle immagini del prodotto principale. Se il tuo tema utilizza immagini varianti, puoi visualizzarle nel modo seguente product.liquid modello:
% per variante in product.variants% % if variant.image%% endif% % endfor%
% endfor%
% endif% % endfor%alt AttributoSe desideri aggiungere il alt attributo al tuo output puoi farlo come segue:
% per immagine in product.images%
Questo produrrà il alt testo inserito nell'amministratore di Shopify o vuoto se non è stato inserito nulla. In alternativa, è possibile effettuare le seguenti operazioni se si sceglie di utilizzare il img_tag filtro:
immagine | img_url: 'grande' | img_tag: image.alt
Nel nostro esempio precedente abbiamo utilizzato un ciclo di liquidi per accedere a turno a ciascuna delle immagini associate a un prodotto. Se il prodotto avesse un'immagine, avremmo prodotto un'immagine, se ne avesse associate dieci, il ciclo produrrebbe dieci immagini.
In Shopify la prima immagine elencata nell'amministratore è anche nota come "immagine in primo piano". Per fortuna, la "immagine in primo piano" è bella e semplice e non richiede un ciclo. Ecco un esempio che funzionerebbe nel product.liquid modello:
Come sempre ci sono modi alternativi per raggiungere questo obiettivo, tra cui:
È inoltre possibile estendere la sintassi per includere il alt attributo nel secondo e terzo esempio:
Descrivo spesso una raccolta in Shopify come un raggruppamento logico di prodotti. Ad esempio potrebbe essere t-shirt, jeans e abiti per un negozio di abbigliamento. Un prodotto può essere contenuto in zero, una o più raccolte, consentendo una facile categorizzazione e individuazione.
Helm Boots fa uso di immagini di raccolta per guidare i clienti in diverse aree del loro negozioSpesso i commercianti desiderano includere una pagina nel loro negozio in cui sono riportate tutte le collezioni disponibili. Il modello che rende questo possibile in Shopify è list-collections.liquid. Ecco un esempio di come puoi eseguire il looping su ogni raccolta e generare l'immagine ad essa associata all'interno di quel modello:
% per la raccolta nelle raccolte% collection.image | img_url: 'compatto' | img_tag: alt: collection.title % endfor%
È possibile estendere ulteriormente questo esempio per assicurarsi di soddisfare la situazione in cui non è stata aggiunta un'immagine di raccolta:
% per raccolta in insiemi% % se collection.image% collection.image.src | img_url: 'medio' | img_tag: collection.title % else% 'collection-image-default.png' | asset_url | img_tag % endif% % endfor%
In questo caso usiamo un'immagine a tema al posto dell'immagine della collezione. Questo verrà eseguito solo se non è presente un'immagine di raccolta associata. Affinché questo funzioni come previsto, dovrai assicurarti che ci sia un'immagine intitolata raccolta-image-Default.png all'interno del tema risorse cartella.
Le immagini degli articoli funzionano allo stesso modo delle immagini di prodotti e collezioni. Ecco un esempio:
% if article.image% article | img_url: 'medio' | img_tag: article.title % endif%
Il blog partner di Shopify utilizza immagini di articoli per fornire immagini di eroi per ogni postSe l'articolo ha un'immagine associata, verrà visualizzato e dato il alt attributo del titolo dell'articolo. Ci sono alcuni modi in cui la raccolta e le immagini degli articoli possono essere utili:
L'ultimo pezzo del puzzle riguarda le immagini caricate tramite l'opzione "Personalizza tema".
Ogni tema ha un config cartella. In esso troverai un file chiamato settings_schema.json. Questo file ci aiuta a generare un'interfaccia di amministrazione che consente ai commercianti di aggiungere dati come testo, valori booleani (vero / falso), selezionare caratteri, caricare immagini e molto altro. Siamo in grado di definire questi elementi dell'interfaccia usando JSON.
Per abilitare il caricamento di un'immagine è necessario aggiungere un nuovo elemento al settings_schema.json file nel seguente formato:
"type": "image", "id": "logo.png", "label": "Text", "max-width": 480, "max-height": 200, "info": "Text"
Ecco un esempio basato sull'aggiunta di un logo per il negozio:
"tipo": "immagine", "id": "shop_logo.png", "etichetta": "Logo negozio", "larghezza massima": 480, "altezza massima": 200,
Le immagini caricate tramite la pagina "Personalizza tema" vengono aggiunte al tema risorse cartella. In quanto tale, non li ho inclusi come tipo di immagine separato all'inizio dell'articolo.
Il file immagine viene salvato con un nome e un formato che corrisponde a id attributo indipendentemente dal nome o dal formato originale del file. Per esempio image.jpg il file verrebbe salvato come shop_logo.png. Shopify tenterà di convertire il file caricato nel formato appropriato (.png) prima di salvarlo. Se Shopify non è in grado di convertire il file in a .png file, l'utente riceverà un messaggio di errore nell'amministratore.
Noterai che il tipo di input è Immagine che si traduce in un pulsante di caricamento che appare nel browser. Puoi anche specificare un'altezza e una larghezza massime per il caricamento di un'immagine utilizzando gli attributi dei dati. Shopify manterrà quindi le proporzioni dell'immagine caricata limitandola a quelle dimensioni massime.
Il riferimento alle immagini aggiunte tramite "Personalizza tema" viene eseguito allo stesso modo di tutte le altre immagini del tema:
'logo.png' | asset_url | img_tag: 'Logo'
Una cosa che potresti voler considerare è usare il id attribuisci a "namespace" i tuoi caricamenti delle impostazioni del tema. In questo modo sono facili da individuare nel risorse cartella in cui saranno raggruppati. Aiuta anche a sovrascrivere accidentalmente i file che aggiungi al tuo tema.
Io uso spesso il ct- prefisso come segue:
"tipo": "immagine", "id": "ct-shop_logo.png", "etichetta": "Logo negozio", "larghezza massima": 480, "altezza massima": 200,
A metà del 2015 Jason Bowman ha notato che la cassa di Shopify mostrava immagini quadrate ritagliate. Puoi leggere la sua scoperta sul suo blog di Freak Design.
Le indagini di Jason lo portarono a scoprire che tutte le immagini di pagamento erano state aggiunte _cropped. Ecco un esempio:
prodotto-ritaglio-test-001_1024x1024.png
quando ritagliata diventa:
prodotto-ritaglio-test-001_1024x1024_cropped.png
Il ritaglio funziona per tutte le taglie eccetto Maestro. Per utilizzare le immagini ritagliate, aggiungiamo _cropped a noi img_tag filtro. Ecco un esempio per un'immagine in primo piano del prodotto:
product.featured_image | product_img_url: "medium_cropped"
Al momento della stesura di questo documento non è documentato quindi c'è sempre la possibilità che possa cambiare, ma ho voluto includerlo.
Abbiamo parlato molto di questo articolo, ma spero che ti mostri quanto sia flessibile Shopify quando si tratta di lavorare con le immagini in un tema.
Le immagini sono parte integrante di qualsiasi negozio di ecommerce. Comprendere come le immagini sono gestite e manipolate in un tema di Shopify è una parte importante dell'apprendimento di Liquid e della piattaforma Shopify.
Si spera che sarete d'accordo che gli strumenti della piattaforma Shopify e Liquid vi offrono molta flessibilità quando si tratta di lavorare con le immagini nei vostri temi.
