如何与图像在Shopify工作

当开始一个新的平台，如Shopify，有很多要学的。而液体，使用Shopify主题的模板语言，可读性很强，容易上手，对Shopify发展新主题开发者往往造成混乱的一个领域是图像。我相信这是主要原因，理解“型”的形象，你遇到在Shopify主题。在这篇文章中我们将考察图像的每个不同类型以及如何使用它们在Shopify主题。

如果你是新的液体我三部分系列会给你一个坚实的基础，将有助于你跟随。如果你是新的Shopify你可以尝试这些技巧运用的自由发展店。为了创造一个发展店报名免费Shopify合作伙伴计划。

图像类型

有四种类型的图像一个Shopify主题。你会和他们每个人都在一个主题的作品，所以重要的是要理解它们之间的差别。让我们每个人依次：

主题形象：这些都存储在一个主题的资产文件夹和特定的主题。这些通常是由一个主题开发者添加到主题。
产品图片：这些图像是特定于存储和上传通过每个产品的Shopify admin。
采集图像：一个用来表示集合，上传通过Shopify管理单一的图像。
文章图片：一分代表一个博客文章，上传通过文章编辑页面在Shopify管理单一的图像。
需要注意的是，产品很重要，收集第图像都是直接链接到商店。如果你改变了商店的主题，这些图像将留在原地，并将与任何给定的主题，参考他们的工作。

1。主题形象

让我们先看一下主题形象。当创建一个Shopify主题您可以添加任意数量的图像，以任何格式，在任何大小的资产在你的主题目录文件夹。通常，可用于图像的背景，精灵，和品牌元素。

在一个主题的引用这些图片是非常简单的。让我们假设我们有一个陈柱政在我们的资产文件夹；我们可以使用以下语法输出液体在任何模板：

{ {的标志。PNG的| asset_url | img_tag：“标识”} }
这个方法使用两液体过滤器来创建一个完整的HTMLIMG元素第一，asset_url，预备的完整路径的文件夹为当前存储的主题。第二，img_tag，以此创建一个HTMLIMG元完成ALT属性。如果省略ALT属性将是空白。这是最后的结果：

位置，位置，位置
你会注意到的SRC属性引用的Shopify CDN（内容分发网络）。每一个形象，你加，不论其类型，将分发到CDN。这有助于确保你的店的图像快速交货给客户。

不像自托管你没有办法知道你的图像文件的确切位置的图像文件服务器。幸运的是，你不需要担心这个特定的Shopifyasset_url液体过滤器将为您提供路径时，你的页面呈现。

提取完全服务器路径去过滤也意味着你的主题是完全可以从一个商店到另一个。正确的URL获取包括根据主题和商店被视。

添加类的IMG元素
在上面的例子中，我们添加了ALT属性通过img_tag滤波器添加另一个参数允许您添加类的也有可能IMG元素这是我们的代码重构：

{ {的标志。PNG的| asset_url | img_tag：“标识”、“cssclass1 cssclass2”} }
这将产生以下输出：

更多的控制
当然，你需要更多的控制你的HTML的场合。通过省略img_tag过滤器可以建立我们的标记为我们祝福。

这是一种将允许你添加自己的属性，如身份证件：

参考图像的CSS和JavaScript
它也很容易使用，这些资产在CSS和JavaScript文件。为了做这个附加液体（例如styles.css.liquid）在你的CSS或JavaScript文件资产文件夹和参考图像，在你的CSS文件，用上面的代码相同的液体：

体（{ { { background: url的标志。PNG的| asset_url } }）repeat-x左上；}
主题形象是相对简单的。只要你知道如何使用asset_url您可以选择是否添加额外的img_tag过滤器或建立IMG元自己。

产品，收集和文章图片
虽然我们已经完全控制了我们的主题图片我们在店老板的怜悯，当它涉及到产品图片。谢天谢地，Shopify很能帮助我们重获控制。我们先来看看会发生什么时，一个商人在Shopify管理员上传图片。
 工作室整洁的产品形象在他们整洁的冰盒产品页面
每一次产品，收集，或文章图像上传Shopify以图像和自动调整到许多预定义的尺寸。这些图像是“命名空间”，我们可以参考他们在我们的主题。
这是与相应的图像名称规格列表：
16×16    微微
32×32    图标
50×50    拇指
100×100    小
160×160    粉盒
240×240    介质
480×480    大号
600×600    重大的
1024×1024    1024x1024
2048×2048    分辨率
最大的图像    硕士
自动调整大小
上面的值指定大小的图片，“最大”的界限。所有大小的图像将保持纵横比，将相应地调整。
这可能意味着一个“中”的图片有一个宽度为240px但高度只有190px同样高度240px但宽80px。这是因为这个原因，大多数的主题开发商要求客户上传平方图像会更可预测的。
“大师”图像大小将始终跟踪可从服务器的最大尺寸。这是目前2048px×2048px。如果你上传一个图像大于2048px宽你不会访问到其原来的形式。
值得注意的是，原来上传的产品图片会不会扩大规模。如果你上传了一个小的图像，它仍将是微小的。当然你可以参考利用上述图像名称图像。但是，请注意，如果你要求的尺寸，不可能创造那么你将送达最近的可用大小。
记住，如果还光秃秃的CSS操控（例如宽度：100%）的图像可放大可能成为像素（取决于它的格式）。当与客户合作，鼓励他们上传高分辨率图像尽可能的方。
最后值得记住的是，我们没有获得产品图片在我的主题文件夹。它们存储在Shopify CDN和保持连接到商店无论主题是应用。

2。显示产品图片
不同的主题形象的产品图片不使用asset_url。为了输出一个产品的形象，我们可以利用的img_url液体过滤器代替。这是由于这样的事实，产品图片是商店而不是主题的部分资产相关。
img_url返回一个图像的URL和接受图像尺寸作为参数。它可以用在以下的液态物品：
•    产品
•    变异
•    行项目
•    收藏
使用img_url滤波器如下：
1    { {产品| img_url：'小' } } { {变| img_url：'小' } } { { line_item | img_url：'小' } } { {收集| img_url：'小' } }
这些将完全合格的URL存储在Shopify CDN的图像。
证明我们从一个典型的有一些液体代码看看product.liquid模板因为这个特别的模板已进入产品这些例子都会变。但是，请注意，他们不会像预期的那样工作在其他模板。
在第一个例子中的价值图片将集合中的每个图像代表通过我们的每一次迭代的液环有不同的价值。该变量可以命名为任何你觉得适合的；我用的图片它的内容是有意义的。
1     { }结束% %
一旦你已经工作了一段时间你可能会注意到主题的其他滤波器被用于相关产品图片。这里有一些替代品，可以用在上述的例子中，每一种都具有相同的输出：
1    
这完全取决于你的选择使用。如果你喜欢一个方法比另一个你可以留下你的评论，用{ } { % % %的评论…endcomment % }解释你的决定。这是特别有用当合作主题。
产品变型图像显示
除了产品的图像，也可以显示有关产品变形的图像。一个变量可以解释为一种变异的产品。比方说我们有一件T恤上有一个特定的打印。这件T恤可以是绿色，蓝色和红色。而印刷不变的T恤本身的颜色是不同的。它仍然是同样的产品，但是我们选择使客户能够从一定的选项中选择。通常将大小和颜色。
变体也有自己的价格和库存水平。联想到一个特定的图像，除了主要产品图片每个变体–可能。如果你的主题使用不同的图像可以显示在下面的方法中product.liquid模板
     { % % % % endif } { }结束
ALT属性
如果你想增加ALT属性来输出你可以做如下：
     { }结束% %
这会输出ALT在Shopify管理员输入文本或空白如果不进入。或者，你可以做以下如果您选择使用img_tag滤波器
    { {图像| img_url：'大' | img_tag：image.alt } }
特色图片
在我们上面的例子中我们使用液体循环访问每个反过来与产品相关的图片。如果产品有一个形象，我们会输出一个图像，如果它有十个与它相关的循环将输出十图像。
在Shopify在管理中列出的第一个图像也被称为“特色形象”。值得庆幸的是，输出“特色形象”很简单，不需要循环。下面是一个例子，在product.liquid模板
    
总是有不同的方法可以做到这一点，包括：
    
你也可以扩展语法包括ALT在第二和第三个实例的属性：
    

3。采集图像

我经常描述一个集合在Shopify作为产品分组逻辑。例如，它可能是T恤，牛仔裤，和一个服装店的衣服。一个产品可以在零，一，或许多收藏品，允许简单的归类和发现。

通常，商家也希望包括在他们的商店的详细介绍他们的所有可用的集合页。模板，使这一切成为可能的是在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 } { }结束
在这个例子中我们使用的是在采集图像的地方一个主题形象。这只会呈现如果没有相关的图像采集。为了这项工作的目的你需要确保有一个形象的名称collection-image-default.png在你的主题资产文件夹

4。文章图片
第图像功能相同的产品和采集图像。这里的一个例子：
1    { } { { % %如果article.image第| img_url：“中”| img_tag } { }：article.title % endif % }
 Shopify伙伴博客使用第图像各岗位提供的英雄形象
如果这篇文章有一个相关的图像将显示和给定的ALT文章的标题属性。有几个方法，采集图像和文章可以是有用的：
•    创建一个列表页面网格图像
•    使用背景图像可以叠加文字

上传的图像通过“自定义主题”
难题的最后一部分涉及上传通过“自定义主题”选项，图像。
每个主题有配置文件夹在这你会找到一个文件名为settings_schema.json。这个文件可以帮助我们生成一个管理界面，允许商家添加数据如文本、布尔值（真或假），选择字体，上传图片和更多。我们可以使用JSON定义这些界面元素。
为了使图像上传需要增加新的元素settings_schema.json在下面的文件格式：

    {“型”：“形象”、“身份证”：“标识。png”、“标签”：“文本”、“最大宽度”：480、“最大高度”：200，“信息”：“文本”}
下面是一个例子的基础上增加商店的标志：

    {“型”：“形象”、“身份证”：“shop_logo。png”、“标签”：“店徽”、“最大宽度”：480、“最大高度”：200，}
上传的图像通过“自定义主题”页面添加到主题的资产文件夹因此我不把它们作为文章开头的一个单独的图像类型。
图像文件保存的名称和格式相匹配的身份证件属性无论原文件名或格式。例如文件段文件将被保存为shop_logo.png。Shopify将尝试转换为适当的格式（上传的文件PNG）在保存它。如果Shopify无法将文件转换成PNG文件，用户会收到一条错误信息的管理。
你会注意到输入类型图片结果在一个上传按钮出现在浏览器。您也可以通过使用数据属性指定一个图片上传的最大高度和宽度。Shopify将保持上传图像的纵横比而制约它的最大尺寸。
参考图像通过“自定义主题”是以同样的方式做其他所有的主题形象：

    { {的标志。PNG的| asset_url | img_tag：“标识”} }
名称间距定制主题上传
你可能要考虑的一件事是使用身份证件“命名空间”属性设置上传你的主题。这样他们很容易的资产他们将聚集在一起的文件夹。它也有助于意外地覆盖你添加到你的主题文件。
我经常使用CT—前缀如下：

    {“型”：“形象”、“身份证”：“ct-shop_logo。png”、“标签”：“店徽”、“最大宽度”：480、“最大高度”：200，}
图像裁剪的方
在2015杰森中注意到，Shopify检验显示图像裁剪的方。你可以阅读有关他发现他的怪物设计博客
杰森的研究使他发现所有的检测图像进行添加_cropped。这里的一个例子：
product-cropping-test-001_1024x1024.png
当出现变：
product-cropping-test-001_1024x1024_cropped.png
种植工程的所有大小除了硕士。为了使用裁剪图像添加_cropped我们的img_tag滤波器这是一个产品特色形象为例：

    { { product.featured_image | product_img_url：“medium_cropped”} }
在我写作本书的时候是无证的，总是有可能会改变，但我想把它。
最后的思考
我们已经覆盖了很多文章地但我希望这是显示你如何灵活Shopify是当它涉及到在一个主题形象的工作。
图像是任何电子商务商店的一个组成部分。如何理解图像管理和操纵一个Shopify主题是学习液体和Shopify平台的重要组成部分。
希望你会同意，Shopify平台内的工具和液体让你很多的灵活性，当它涉及到你的主题形象的工作

牧羊人设计文章推荐：

网页设计面试的重要指南
网页设计流程
如何合并和讲故事产生有说服力的内容