如何與圖像在Shopify工作

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

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

圖像類型

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

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

1。主題形象

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

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

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

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

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

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

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

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

更多的控制
當(dāng)然，你需要更多的控制你的HTML的場(chǎng)合。通過省略img_tag過濾器可以建立我們的標(biāo)記為我們祝福。

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

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

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

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

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

3。采集圖像

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

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

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

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

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

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

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

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

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

牧羊人設(shè)計(jì)文章推薦：

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