外部图像处理

Question

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

例如,我有一个网站已经以一种格式构建,所有媒体都在一个单独的/content/images文件夹中,而不是作为一个页面包在每个条目旁边.

Answer 1

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

_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"直接获取图像资源的方式按名称访问单个图像.

按名称访问Image资源

在页面的前面,您将包含一个字段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 }}

注意:您也可以从降价处访问这些图像,但这需要像Hugo文档中那样进行短代码设置,并且我在下面的GitHub示例链接中包含了一个短代码示例.

这是该示例的GitHub存储库