如何與圖像在Shopify工作

當開始一個新的平臺，如Shopify，有很多要學的。而液體，使用Shopify主題的模板語言，可讀性很強，容易上手，對Shopify發(fā)展新主題開發(fā)者往往造成混亂的一個領域是圖像。我相信這是主要原因，理解“型”的形象，你遇到在Shopify主題。在這篇文章中我們將考察圖像的每個不同類型以及如何使用它們在Shopify主題。

如果你是新的液體我三部分系列會給你一個堅實的基礎，將有助于你跟隨。如果你是新的Shopify你可以嘗試這些技巧運用的自由發(fā)展店。為了創(chuàng)造一個發(fā)展店報名免費Shopify合作伙伴計劃。

圖像類型

有四種類型的圖像一個Shopify主題。你會和他們每個人都在一個主題的作品，所以重要的是要理解它們之間的差別。讓我們每個人依次：

主題形象：這些都存儲在一個主題的資產(chǎn)文件夾和特定的主題。這些通常是由一個主題開發(fā)者添加到主題。
產(chǎn)品圖片：這些圖像是特定于存儲和上傳通過每個產(chǎn)品的Shopify admin。
采集圖像：一個用來表示集合，上傳通過Shopify管理單一的圖像。
文章圖片：一分代表一個博客文章，上傳通過文章編輯頁面在Shopify管理單一的圖像。
需要注意的是，產(chǎn)品很重要，收集第圖像都是直接鏈接到商店。如果你改變了商店的主題，這些圖像將留在原地，并將與任何給定的主題，參考他們的工作。

1。主題形象

讓我們先看一下主題形象。當創(chuàng)建一個Shopify主題您可以添加任意數(shù)量的圖像，以任何格式，在任何大小的資產(chǎn)在你的主題目錄文件夾。通常，可用于圖像的背景，精靈，和品牌元素。

在一個主題的引用這些圖片是非常簡單的。讓我們假設我們有一個陳柱政在我們的資產(chǎn)文件夾；我們可以使用以下語法輸出液體在任何模板：

{ {的標志。PNG的| asset_url | img_tag：“標識”} }
這個方法使用兩液體過濾器來創(chuàng)建一個完整的HTMLIMG元素第一，asset_url，預備的完整路徑的文件夾為當前存儲的主題。第二，img_tag，以此創(chuàng)建一個HTMLIMG元完成ALT屬性。如果省略ALT屬性將是空白。這是最后的結果：

位置，位置，位置
你會注意到的SRC屬性引用的Shopify CDN（內(nèi)容分發(fā)網(wǎng)絡）。每一個形象，你加，不論其類型，將分發(fā)到CDN。這有助于確保你的店的圖像快速交貨給客戶。

不像自托管你沒有辦法知道你的圖像文件的確切位置的圖像文件服務器。幸運的是，你不需要擔心這個特定的Shopifyasset_url液體過濾器將為您提供路徑時，你的頁面呈現(xiàn)。

提取完全服務器路徑去過濾也意味著你的主題是完全可以從一個商店到另一個。正確的URL獲取包括根據(jù)主題和商店被視。

添加類的IMG元素
在上面的例子中，我們添加了ALT屬性通過img_tag濾波器添加另一個參數(shù)允許您添加類的也有可能IMG元素這是我們的代碼重構：

{ {的標志。PNG的| asset_url | img_tag：“標識”、“cssclass1 cssclass2”} }
這將產(chǎn)生以下輸出：

更多的控制
當然，你需要更多的控制你的HTML的場合。通過省略img_tag過濾器可以建立我們的標記為我們祝福。

這是一種將允許你添加自己的屬性，如身份證件：

參考圖像的CSS和JavaScript
它也很容易使用，這些資產(chǎn)在CSS和JavaScript文件。為了做這個附加液體（例如styles.css.liquid）在你的CSS或JavaScript文件資產(chǎn)文件夾和參考圖像，在你的CSS文件，用上面的代碼相同的液體：

體（{ { { background: url的標志。PNG的| asset_url } }）repeat-x左上；}
主題形象是相對簡單的。只要你知道如何使用asset_url您可以選擇是否添加額外的img_tag過濾器或建立IMG元自己。

產(chǎn)品，收集和文章圖片
雖然我們已經(jīng)完全控制了我們的主題圖片我們在店老板的憐憫，當它涉及到產(chǎn)品圖片。謝天謝地，Shopify很能幫助我們重獲控制。我們先來看看會發(fā)生什么時，一個商人在Shopify管理員上傳圖片。
 工作室整潔的產(chǎn)品形象在他們整潔的冰盒產(chǎn)品頁面
每一次產(chǎn)品，收集，或文章圖像上傳Shopify以圖像和自動調(diào)整到許多預定義的尺寸。這些圖像是“命名空間”，我們可以參考他們在我們的主題。
這是與相應的圖像名稱規(guī)格列表：
16×16    微微
32×32    圖標
50×50    拇指
100×100    小
160×160    粉盒
240×240    介質(zhì)
480×480    大號
600×600    重大的
1024×1024    1024x1024
2048×2048    分辨率
最大的圖像    碩士
自動調(diào)整大小
上面的值指定大小的圖片，“最大”的界限。所有大小的圖像將保持縱橫比，將相應地調(diào)整。
這可能意味著一個“中”的圖片有一個寬度為240px但高度只有190px同樣高度240px但寬80px。這是因為這個原因，大多數(shù)的主題開發(fā)商要求客戶上傳平方圖像會更可預測的。
“大師”圖像大小將始終跟蹤可從服務器的最大尺寸。這是目前2048px×2048px。如果你上傳一個圖像大于2048px寬你不會訪問到其原來的形式。
值得注意的是，原來上傳的產(chǎn)品圖片會不會擴大規(guī)模。如果你上傳了一個小的圖像，它仍將是微小的。當然你可以參考利用上述圖像名稱圖像。但是，請注意，如果你要求的尺寸，不可能創(chuàng)造那么你將送達最近的可用大小。
記住，如果還光禿禿的CSS操控（例如寬度：100%）的圖像可放大可能成為像素（取決于它的格式）。當與客戶合作，鼓勵他們上傳高分辨率圖像盡可能的方。
最后值得記住的是，我們沒有獲得產(chǎn)品圖片在我的主題文件夾。它們存儲在Shopify CDN和保持連接到商店無論主題是應用。

2。顯示產(chǎn)品圖片
不同的主題形象的產(chǎn)品圖片不使用asset_url。為了輸出一個產(chǎn)品的形象，我們可以利用的img_url液體過濾器代替。這是由于這樣的事實，產(chǎn)品圖片是商店而不是主題的部分資產(chǎn)相關。
img_url返回一個圖像的URL和接受圖像尺寸作為參數(shù)。它可以用在以下的液態(tài)物品：
•    產(chǎn)品
•    變異
•    行項目
•    收藏
使用img_url濾波器如下：
1    { {產(chǎn)品| img_url：'小' } } { {變| img_url：'小' } } { { line_item | img_url：'小' } } { {收集| img_url：'小' } }
這些將完全合格的URL存儲在Shopify CDN的圖像。
證明我們從一個典型的有一些液體代碼看看product.liquid模板因為這個特別的模板已進入產(chǎn)品這些例子都會變。但是，請注意，他們不會像預期的那樣工作在其他模板。
在第一個例子中的價值圖片將集合中的每個圖像代表通過我們的每一次迭代的液環(huán)有不同的價值。該變量可以命名為任何你覺得適合的；我用的圖片它的內(nèi)容是有意義的。
1     { }結束% %
一旦你已經(jīng)工作了一段時間你可能會注意到主題的其他濾波器被用于相關產(chǎn)品圖片。這里有一些替代品，可以用在上述的例子中，每一種都具有相同的輸出：
1    
這完全取決于你的選擇使用。如果你喜歡一個方法比另一個你可以留下你的評論，用{ } { % % %的評論…endcomment % }解釋你的決定。這是特別有用當合作主題。
產(chǎn)品變型圖像顯示
除了產(chǎn)品的圖像，也可以顯示有關產(chǎn)品變形的圖像。一個變量可以解釋為一種變異的產(chǎn)品。比方說我們有一件T恤上有一個特定的打印。這件T恤可以是綠色，藍色和紅色。而印刷不變的T恤本身的顏色是不同的。它仍然是同樣的產(chǎn)品，但是我們選擇使客戶能夠從一定的選項中選擇。通常將大小和顏色。
變體也有自己的價格和庫存水平。聯(lián)想到一個特定的圖像，除了主要產(chǎn)品圖片每個變體–可能。如果你的主題使用不同的圖像可以顯示在下面的方法中product.liquid模板
     { % % % % endif } { }結束
ALT屬性
如果你想增加ALT屬性來輸出你可以做如下：
     { }結束% %
這會輸出ALT在Shopify管理員輸入文本或空白如果不進入。或者，你可以做以下如果您選擇使用img_tag濾波器
    { {圖像| img_url：'大' | img_tag：image.alt } }
特色圖片
在我們上面的例子中我們使用液體循環(huán)訪問每個反過來與產(chǎn)品相關的圖片。如果產(chǎn)品有一個形象，我們會輸出一個圖像，如果它有十個與它相關的循環(huán)將輸出十圖像。
在Shopify在管理中列出的第一個圖像也被稱為“特色形象”。值得慶幸的是，輸出“特色形象”很簡單，不需要循環(huán)。下面是一個例子，在product.liquid模板
    
總是有不同的方法可以做到這一點，包括：
    
你也可以擴展語法包括ALT在第二和第三個實例的屬性：
    

3。采集圖像

我經(jīng)常描述一個集合在Shopify作為產(chǎn)品分組邏輯。例如，它可能是T恤，牛仔褲，和一個服裝店的衣服。一個產(chǎn)品可以在零，一，或許多收藏品，允許簡單的歸類和發(fā)現(xiàn)。

通常，商家也希望包括在他們的商店的詳細介紹他們的所有可用的集合頁。模板，使這一切成為可能的是在Shopifylist-collections.liquid。這里的一個例子，你可以在每一個采集和輸出回路的形象與它在模板：
1    { % % } { {收藏收藏collection.image | img_url：“緊湊”| img_tag collection.title } } {：ALT：% % }結束
你可以擴展這個例子進一步確保你照顧的情況下采集的圖像沒有被添加：
1    { % % % } {收藏收藏collection.image % } { {如果collection.image.src | img_url：“中”| img_tag collection.title } } { %其他：% } { {采集圖像的默認。PNG的| asset_url img_tag } } { | % % % % endif } { }結束
在這個例子中我們使用的是在采集圖像的地方一個主題形象。這只會呈現(xiàn)如果沒有相關的圖像采集。為了這項工作的目的你需要確保有一個形象的名稱collection-image-default.png在你的主題資產(chǎn)文件夾

4。文章圖片
第圖像功能相同的產(chǎn)品和采集圖像。這里的一個例子：
1    { } { { % %如果article.image第| img_url：“中”| img_tag } { }：article.title % endif % }
 Shopify伙伴博客使用第圖像各崗位提供的英雄形象
如果這篇文章有一個相關的圖像將顯示和給定的ALT文章的標題屬性。有幾個方法，采集圖像和文章可以是有用的：
•    創(chuàng)建一個列表頁面網(wǎng)格圖像
•    使用背景圖像可以疊加文字

上傳的圖像通過“自定義主題”
難題的最后一部分涉及上傳通過“自定義主題”選項，圖像。
每個主題有配置文件夾在這你會找到一個文件名為settings_schema.json。這個文件可以幫助我們生成一個管理界面，允許商家添加數(shù)據(jù)如文本、布爾值（真或假），選擇字體，上傳圖片和更多。我們可以使用JSON定義這些界面元素。
為了使圖像上傳需要增加新的元素settings_schema.json在下面的文件格式：

    {“型”：“形象”、“身份證”：“標識。png”、“標簽”：“文本”、“最大寬度”：480、“最大高度”：200，“信息”：“文本”}
下面是一個例子的基礎上增加商店的標志：

    {“型”：“形象”、“身份證”：“shop_logo。png”、“標簽”：“店徽”、“最大寬度”：480、“最大高度”：200，}
上傳的圖像通過“自定義主題”頁面添加到主題的資產(chǎn)文件夾因此我不把它們作為文章開頭的一個單獨的圖像類型。
圖像文件保存的名稱和格式相匹配的身份證件屬性無論原文件名或格式。例如文件段文件將被保存為shop_logo.png。Shopify將嘗試轉(zhuǎn)換為適當?shù)母袷剑ㄉ蟼鞯奈募NG）在保存它。如果Shopify無法將文件轉(zhuǎn)換成PNG文件，用戶會收到一條錯誤信息的管理。
你會注意到輸入類型圖片結果在一個上傳按鈕出現(xiàn)在瀏覽器。您也可以通過使用數(shù)據(jù)屬性指定一個圖片上傳的最大高度和寬度。Shopify將保持上傳圖像的縱橫比而制約它的最大尺寸。
參考圖像通過“自定義主題”是以同樣的方式做其他所有的主題形象：

    { {的標志。PNG的| asset_url | img_tag：“標識”} }
名稱間距定制主題上傳
你可能要考慮的一件事是使用身份證件“命名空間”屬性設置上傳你的主題。這樣他們很容易的資產(chǎn)他們將聚集在一起的文件夾。它也有助于意外地覆蓋你添加到你的主題文件。
我經(jīng)常使用CT—前綴如下：

    {“型”：“形象”、“身份證”：“ct-shop_logo。png”、“標簽”：“店徽”、“最大寬度”：480、“最大高度”：200，}
圖像裁剪的方
在2015杰森中注意到，Shopify檢驗顯示圖像裁剪的方。你可以閱讀有關他發(fā)現(xiàn)他的怪物設計博客
杰森的研究使他發(fā)現(xiàn)所有的檢測圖像進行添加_cropped。這里的一個例子：
product-cropping-test-001_1024x1024.png
當出現(xiàn)變：
product-cropping-test-001_1024x1024_cropped.png
種植工程的所有大小除了碩士。為了使用裁剪圖像添加_cropped我們的img_tag濾波器這是一個產(chǎn)品特色形象為例：

    { { product.featured_image | product_img_url：“medium_cropped”} }
在我寫作本書的時候是無證的，總是有可能會改變，但我想把它。
最后的思考
我們已經(jīng)覆蓋了很多文章地但我希望這是顯示你如何靈活Shopify是當它涉及到在一個主題形象的工作。
圖像是任何電子商務商店的一個組成部分。如何理解圖像管理和操縱一個Shopify主題是學習液體和Shopify平臺的重要組成部分。
希望你會同意，Shopify平臺內(nèi)的工具和液體讓你很多的靈活性，當它涉及到你的主題形象的工作

牧羊人設計文章推薦：

網(wǎng)頁設計面試的重要指南
網(wǎng)頁設計流程
如何合并和講故事產(chǎn)生有說服力的內(nèi)容