在 Markdown 中调整 Hugo (v 0.32.x) 中的图像大小

Question

我正在尝试调整 Hugo 中的图像大小（不使用 HTML / CSS），这显然在 the v 0.32 update 中可用。在最后一句链接的“图像处理”标题下，描述了以下“调整大小”方法：

调整到给定尺寸，{{ $logo.Resize "200x" }} 将调整到 200 像素宽并保持纵横比。使用 {{ $logo.Resize "200x100" }} 来控制高度和宽度。

我在我的 Hugo 网站中实现此功能时遇到了一些问题。特别是，我正在使用.md 文件，并尝试添加存储在站点源文件中其他位置的图像。

例如，我将在.md 文件中添加（未调整大小的）图像：

![pdf image](../static/_media/images/pdf.png)

如何使用 v0.32 版本中的 resize 方法添加相同的文件，将其大小调整为 50x50 像素？

Answer 1

你不能这样使用它（在降价中）。调整大小仅适用于资源。资源是资源目录中的文件或页面包中的文件。要访问 Markdown 中的资源，您必须使用简码。

请注意，您可以将静态目录定义为资源目录。一旦你这样做了，你就可以使用静态目录并编写如下内容：

(.Site.Resources.GetMatch "_media/images/pdf.png").Resize "50x50"

但是，您应该像 Talves 一样通过简码访问它。为了提高可读性，我稍微简化了他的代码：

{{< imgresize "_media/images/pdf.png" >}}

调用这个短代码（layouts/shortcodes/imgresize.html）：

{{ $image := (.Site.Resources.GetMatch (.Get 0)).Resize "50x50" }}
<img src="{{ $image.RelPermalink }}">

Answer 2

您需要确保已将图片包含在页面内容中，通常是在页面本身级别，除非您使用下面注释中的答案 I 链接来引用它们。

注意：您可以通过in this answer从外部部分访问资源

写一个简码

layouts/shortcodes/imgresize.html

{{ $original := .Page.Resources.GetByPrefix (.Get 0) }}
{{ $options := .Get 1 }}
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ $image := .Scratch.Get "image" }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">

[Alternative] 短代码访问content/media 部分下的资源

{{ $imagename := (.Get 0) }}
{{ $options := .Get 1 }}
{{ with .Site.GetPage "section" "media" }}
  {{ $original := .Resources.GetByPrefix  $imagename }}
  {{ with ($original.Resize $options) }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }} 
{{ end }}

在页面的 markdown 中调用简码。

{{< imgresize pdf "50x50" >}}

pdf通过名称前缀引用图片来获取资源。

使用子文件夹页面访问资源

在下一个示例短代码中，您的页面必须与您的图片处于同一级别。在同一级别包含一个 index.md（例如：content/media/logos/index.md）

添加layouts/shortcodes/logo-resize.html

{{ $imagename := (.Get 0) }}
{{ $options := .Get 1 }}
{{ with .Site.GetPage "page" "media/logos/index.md" }}
  {{ $original := .Resources.GetByPrefix  $imagename }}
  {{ with ($original.Resize $options) }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }} 
{{ end }}

调用简码

{{< logo-resize pdf "50x50" >}}

GitHub Example

Answer 3

使用我更新版本的 Hugo (v0.53) 我不得不稍微调整一下 JoostS 的答案：

1. 创建了page bundle

2. 在开头修改了短代码，如下所示：

   
   {{ $original := .Page.Resources.GetMatch (print "images/" (.Get 0) "*") }}
   

Answer 4

如果您使用的是页面包，则可以引用页面文件夹中的任何文件，无论它是否在前面声明：

.
|- This is the Page (a folder)
   |- index.md
   |- photo1.jpg
   \- photo2.jpg

INside index.md

{{< imgresize photo1.jpg "350x350" "Alternate Text" >}}

短代码（与 @Talves 相同，但使用 GetMatch 和 Fit，并包含图像的替代文本。）

{{ $original := .Page.Resources.GetMatch (.Get 0) }}
{{ $options := .Get 1 }}
{{ .Scratch.Set "image" ($original.Fit $options) }}
{{ $image := .Scratch.Get "image" }}
{{ $title := .Get 2 }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $title }}">