如何操纵图像与img_url过滤器

随着Liquid的发展，更多的选项将成为可用的，这将允许开发人员为您的自定义主题解锁新的潜力。液体过滤器是Shopify商店中输出对象和资产的简单而强大的方法。

在这篇文章中，我们将看看如何使用img_url过滤和检查最近添加的参数，允许您在Shopify中以新的和令人兴奋的方式操作图像。

让我们从函数开始img_url过滤器。在其基本形式中，它将返回图像的URL。为了做到这一点，您需要传入一个强制的size参数。它也是一个非常通用的过滤器，因为它可以与以下对象一起使用，这些对象有与它们相关的图像:

• 产品
• 变体
• 行项目
• 集合
• 文章
• 图像

在这篇文章中，我们将专注于使用product对象img_url过滤器。这里有一个简单的例子:

{{产品。Featured_image | img_url: '100x100'}}

在上面的示例中，img_urlFilter的参数为100 x100。我们很快就会看到，您可以为任何图像的宽度和高度指定精确的像素尺寸。

你也可以把img_url过滤器img_tag过滤器输出的全部< img >元素:

{{产品。Featured_image | img_url: '100x100' | img_tag}}

新的参数

到目前为止，我们已经了解了img_url过滤器。直到最近，你还不能用它做更多的事情。然而，所有这一切都在2016年7月发生了变化，当时添加了一组新的参数，可以从模板文件中调整大小和裁剪图像。

在继续之前，值得注意的是，除了可以与一系列过滤器一起使用之外，还可以使用以下技术img_url。它们是:

• product_img_url
• collection_img_url
• article_img_url

我们将使用img_url在下面的所有示例中，但我们想强调的是，这些技术也适用于其他三个过滤器。

你可能还喜欢:规范的URL它们是什么，为什么重要?

1.大小

让我们首先看看如何调整图像的大小。为了做到这一点，我们将一个特定像素大小的数值赋给img_url。这里有一个例子:

{{产品。Featured_image | img_url: '450x450'}}

查看生成的图像

通过这种方式，您可以为任何图像的宽度和高度指定精确的像素尺寸，最大可达4472x4472。如果不包含图像大小，则过滤器返回一个小的(100x100)图像。

一些旧的主题不使用数字图像大小，而是使用命名大小作为img_url的参数。这就是为什么在较旧的主题上，您可能会看到一个名称，例如格兰德而不是一个特定的像素范围。这些命名的大小参数已被弃用支持更可定制的格式，其中可以使用精确的像素数。

上面提到的“名字”当然会一如既往地起作用。但是，现在使用数值语法可以控制图像的尺寸。

除非裁剪图像，否则将保留图像的原始宽高比。无论您指定什么大小，都不能将图像的大小调整为大于其原始尺寸。

在这种情况下，图像将不大于450x450像素。如果你上传一个正方形的图像，它将被完美地调整大小。

但是，如果您的原始图像的一边比另一边长，Shopify将相应地调整大小，以便最长的一边将是450像素。换句话说，所有调整大小都是成比例的，除非您作物图像。

如果你愿意，你也可以只指定宽度或高度，Shopify将根据原始图像的大小计算其他尺寸，保持原始图像的长宽比。下面是一个只指定宽度的例子:

{{产品。Featured_image | img_url: '450x'}}

查看生成的图像

类似地，只指定高度看起来像这样:

{{product | img_url: 'x450'}}

查看生成的图像

当只指定一个值时，Shopify将根据原始图像大小计算其他尺寸，保持原始图像的长宽比不变。

回到我们最初的例子，你可能会认为结果是a450年x450正在渲染的图像版本。然而，情况并非总是如此。

只有在满足以下两个条件时，这个请求才会得到一个完全平方数:

1. 原始图像是450 px或者在两个轴上都大于
2. 两边的长度相等

如果两个条件都为真，则a450年x450将渲染方形图像。如果没有，Shopify将使用相同的逻辑调整它的大小，如果你只指定了高度或宽度。在这种情况下，最长的一方获胜，并相应地缩放。

2.作物

幸运的是，创建完全正方形不需要你上传正方形图片。它所需要的只是添加另一个新参数作物。你指定一个作物参数以确保生成的图像的尺寸与请求的尺寸匹配。如果整个图像不适合您要求的尺寸，则裁剪参数指定要显示图像的哪一部分。

有效选项包括:

• 前
• 中心
• 底
• 左
• 正确的

下面是我们之前讨论过的一个例子:

{{产品。Featured_image | img_url: '450x450'，裁剪:'center'}}

查看生成的图像

3.规模

除了尺寸，我们还可以使用scale参数请求一定的像素密度。

两个有效的选项是:

• 2
• 3.

您可以简单地将其作为另一个参数添加到img_url过滤如下:

{产品。Featured_image | img_url: '450x450'，裁剪:'center'，比例:2}}

查看生成的图像

这将导致图像的大小调整为900 x900分辨率下玩像素。同样，只有当原始图像足够大时，它才会被放大。如果不是这种情况，将返回大小最接近的图像。

4.格式

你还可以添加最后一个参数，即format。有效的选项有:

• jpg
• pjpg

下面是一个结合格式的例子:

{{产品。Featured_image | img_url: '450x450'，裁剪:'居中'，比例:2，格式:' jpg'}}

查看生成的图像

这将导致图像被呈现为渐进式JPG -这些图像加载为全尺寸图像，并逐渐提高质量，而不是自上而下加载。这是一个很好的选择，取决于你的需要。

Shopify可以为您进行以下格式转换:

• PNG转JPG
• PNG转PNG
• JPG到JPG格式

将有损图像格式(如JPG)转换为无损图像格式(如PNG)是不实际的，因此这些转换是不可能的。

你可能还喜欢:使用响应式图像来减少页面加载时间。

缓存

最后，值得注意的是，一旦请求的图像被创建，它将被缓存并在Shopify CDN(内容分发网络)上可用。因此，无需担心每次渲染模板时都会创建图像。

解锁响应图像

多亏了这些新的参数，现在可以实现了响应的图像模板中的技术。是否要开始使用OB欧宝娱乐APPsrcset和大小属性，或<图片>元素，您就可以开始为屏幕大小、分辨OB欧宝娱乐APP率和带宽提供最合适的图像。