如何與圖像在Shopify工作

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

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

圖像類(lèi)型

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

主題形象：這些都存儲(chǔ)在一個(gè)主題的資產(chǎn)文件夾和特定的主題。這些通常是由一個(gè)主題開(kāi)發(fā)者添加到主題。
產(chǎn)品圖片：這些圖像是特定于存儲(chǔ)和上傳通過(guò)每個(gè)產(chǎn)品的Shopify admin。
采集圖像：一個(gè)用來(lái)表示集合，上傳通過(guò)Shopify管理單一的圖像。
文章圖片：一分代表一個(gè)博客文章，上傳通過(guò)文章編輯頁(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è)方法使用兩液體過(guò)濾器來(lái)創(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è)形象，你加，不論其類(lèi)型，將分發(fā)到CDN。這有助于確保你的店的圖像快速交貨給客戶(hù)。

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

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

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

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

更多的控制
當(dāng)然，你需要更多的控制你的HTML的場(chǎng)合。通過(guò)省略img_tag過(guò)濾器可以建立我們的標(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過(guò)濾器或建立IMG元自己。

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

2。顯示產(chǎn)品圖片
不同的主題形象的產(chǎn)品圖片不使用asset_url。為了輸出一個(gè)產(chǎn)品的形象，我們可以利用的img_url液體過(guò)濾器代替。這是由于這樣的事實(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è)圖像代表通過(guò)我們的每一次迭代的液環(huán)有不同的價(jià)值。該變量可以命名為任何你覺(jué)得適合的；我用的圖片它的內(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)品。比方說(shuō)我們有一件T恤上有一個(gè)特定的打印。這件T恤可以是綠色，藍(lán)色和紅色。而印刷不變的T恤本身的顏色是不同的。它仍然是同樣的產(chǎn)品，但是我們選擇使客戶(hù)能夠從一定的選項(xiàng)中選擇。通常將大小和顏色。
變體也有自己的價(jià)格和庫(kù)存水平。聯(lián)想到一個(gè)特定的圖像，除了主要產(chǎn)品圖片每個(gè)變體–可能。如果你的主題使用不同的圖像可以顯示在下面的方法中product.liquid模板
     { % % % % endif } { }結(jié)束
ALT屬性
如果你想增加ALT屬性來(lái)輸出你可以做如下：
     { }結(jié)束% %
這會(huì)輸出ALT在Shopify管理員輸入文本或空白如果不進(jìn)入。或者，你可以做以下如果您選擇使用img_tag濾波器
    { {圖像| img_url：'大' | img_tag：image.alt } }
特色圖片
在我們上面的例子中我們使用液體循環(huán)訪問(wèn)每個(gè)反過(guò)來(lái)與產(chǎn)品相關(guān)的圖片。如果產(chǎn)品有一個(gè)形象，我們會(huì)輸出一個(gè)圖像，如果它有十個(gè)與它相關(guān)的循環(huán)將輸出十圖像。
在Shopify在管理中列出的第一個(gè)圖像也被稱(chēng)為“特色形象”。值得慶幸的是，輸出“特色形象”很簡(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)單的歸類(lèi)和發(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)一步確保你照顧的情況下采集的圖像沒(méi)有被添加：
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)如果沒(méi)有相關(guān)的圖像采集。為了這項(xiàng)工作的目的你需要確保有一個(gè)形象的名稱(chēng)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)格圖像
•    使用背景圖像可以疊加文字

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

    { {的標(biāo)志。PNG的| asset_url | img_tag：“標(biāo)識(shí)”} }
名稱(chēng)間距定制主題上傳
你可能要考慮的一件事是使用身份證件“命名空間”屬性設(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”} }
在我寫(xiě)作本書(shū)的時(shí)候是無(wú)證的，總是有可能會(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)生有說(shuō)服力的內(nèi)容