图像处理

Zola 通过内置函数提供对自动调整图像大小的支持resize_image，该函数在模板代码和短代码中都可用。

函数用法如下：

resize_image(path, width, height, op, format, quality)

🔗争论

path: 源图像相对于目录结构content中目录的路径。
width和height：调整大小的图像的尺寸（以像素为单位）。用法取决于op参数。
op（可选）：调整大小操作。这可以是以下之一：
- "scale"
- "fit_width"
- "fit_height"
- "fit"
- "fill"
下面解释了每一个的作用。默认值为"fill"。
format（可选）：调整大小后的图像的编码格式。可能是以下之一：
- "auto"
- "jpg"
- "png"
- "webp"
默认为"auto"，这意味着根据输入图像格式选择格式。为 JPEG 和其他有损格式选择 JPEG，为 PNG 和其他无损格式选择 PNG。
quality（可选）：调整后图像的 JPEG 或 WebP 质量，以百分比表示。仅在编码 JPEG 或 WebP 时使用；对于 JPEG 默认值为75，对于 WebP 默认值为无损。

🔗图片处理及返回值

Zola 在构建过程中执行图像处理，并将调整大小的图像放在静态文件目录的子目录中：

static/processed_images/

每个调整大小的图像的文件名是函数参数的哈希，这意味着一旦图像以某种方式调整大小，它将存储在上述目录中，并且在后续构建期间不需要再次调整大小（除非图像本身、尺寸或其他参数已更改）。

该函数返回具有以下架构的对象：

/// The final URL for that asset
url: String,
/// The path to the static asset generated
static_path: String,
/// New image width
width: u32,
/// New image height
height: u32,
/// Original image width
orig_width: u32,
/// Original image height
orig_height: u32,

🔗调整大小操作

所有示例的来源都是这个 300 像素 × 380 像素的图像：

Zola

🔗`"scale"`

无论宽高比如何，只需将图像缩放到指定尺寸 ( width& )。height

resize_image(..., width=150, height=150, op="scale")

🔗`"fit_width"`

调整图像大小，使生成的宽度width和高度保持纵横比不变。height不需要参数。

resize_image(..., width=100, op="fit_width")

🔗`"fit_height"`

调整图像大小，使生成的高度height和宽度保持纵横比不变。width不需要参数。

resize_image(..., height=150, op="fit_height")

🔗`"fit"`

喜欢"fit_width"并"fit_height"组合，但仅在图像大于任何指定尺寸时才调整大小。这种模式很方便，例如，如果图像在短代码中自动缩小到特定尺寸以进行移动优化。调整图像大小，使结果适合width并height同时保持纵横比。这意味着宽度或高度将分别为 maxwidth和height，但可能其中之一更小以保持纵横比。

resize_image(..., width=5000, height=5000, op="fit")

resize_image(..., width=150, height=150, op="fit")

🔗`"fill"`

这是默认操作。width它采用与和相同纵横比的图像中心部分，height并将其大小调整为width和height。这意味着超出调整后的宽高比的图像部分将被裁剪掉。

resize_image(..., width=150, height=150, op="fill")

🔗`resize_image`通过简码在 markdown 中使用

resize_image是 Zola 内置的 Tera 函数（参见模板章节），但它可以使用简码在 Markdown 中使用。

上面的示例是使用resize_image.html以以下内容命名的简码文件生成的：

{% set image = resize_image(path=path, width=width, height=height, op=op) %}
<img src="{{ image.url }}" />

🔗创建图片库

可以resize_image()多次使用和/或循环使用。它旨在有效地处理这个问题。

assets 这可以与页面元数据一起使用来创建图片库。该assets变量包含资源页面目录中所有资产的路径（请参阅资产托管）；如果您有图像以外的文件，则需要先在循环中将它们过滤掉，如下例所示。

这可以用在短代码中。例如，我们可以创建一个非常简单的纯 html 的可点击图片库，其中包含以下简码gallery.html：

<div>
{% for asset in page.assets -%}
  {%- if asset is matching("[.](jpg|png)$") -%}
    {% set image = resize_image(path=asset, width=240, height=180) %}
    <a href="{{ get_url(path=asset) }}" target="_blank">
      <img src="{{ image.url }}" />
    </a>
  {%- endif %}
{%- endfor %}
</div>