捆绑包外的图像处理

是否可以对其他文件夹中的图像使用Hugo 0.32的新图像处理功能？

例如，我有一个网站，其结构已经采用了所有媒体都位于单独的格式中/content/images文件夹，而不是作为页面束放在每个条目旁边。

可以从页面的引用访问页面的资源，因此可以通过非常简单的设置来实现。

创建一个_index.md文件在content/images具有简单前题的文件夹，类似于下面的内容。

content/images/_index.md

---
title: Media Folder
---

这将允许您访问以下资源images在站点上下文的部分中并获取页面。如果您不希望它在您发布的网站上显示为实际页面，您可以添加headless: true.

列出另一个页面模板中的图像

{{ with .Site.GetPage "section" "images" }}
  <h2>{{ .Title }}</h2>
  {{ $resources := .Resources.ByType "image"}}
  {{ range $resources }}
    {{ with . }}
      <img style="max-width: 100%;" src="{{ .RelPermalink }}">
      <br />
    {{ end }}
  {{ end }}
{{ end }}

列出资源图像并调整其大小

{{ with .Site.GetPage "section" "images" }}
  <h2>From {{ .Title }} (images)</h2>
  {{ $resources := .Resources.ByType "image"}}
  {{ range $resources }}
    {{ with . }}
      {{ $image200x := (.Resize "200x") }}
      {{ $image400x := (.Resize "400x") }}
      <img src="{{ $image200x.RelPermalink }}">
      <img src="{{ $image400x.RelPermalink }}">
      <br />
    {{ end }}
  {{ end }}
{{ end }}

这些示例展示了如何从内部访问资源images来自捆绑包中另一个位置的位置。您还可以使用以下命令按名称访问单个图像.Resources.GetByPrefix "logo"直接获取图片资源。

通过名称访问图像资源

在页面的前面，您将包含一个字段imagename: logo举个例子，那么：

{{ $page := . }}
{{ with .Site.GetPage "section" "images" }}
  {{ with .Resources.GetByPrefix $page.Params.imagename }}
    {{ $image200x := (.Resize "200x") }}
    {{ $image400x := (.Resize "400x") }}
    <img src="{{ $image200x.RelPermalink }}">
    <img src="{{ $image400x.RelPermalink }}">
    <br />
  {{ end }}
{{ end }}

NOTE:您还可以从 markdown 访问这些图像，但这需要一个短代码设置，如Hugo文档和我在下面的 GitHub 示例链接中包含了短代码示例。

这是示例的 GitHub 存储库 https://github.com/talves/hugo-resource-images