在标记

Question

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

  

调整到给定维度，{{$ logo.Resize＆＃34; 200x＆＃34;将调整为200像素宽并保持纵横比。使用{{$ logo.Resize＆＃34; 200x100＆＃34;控制高度和宽度。

我在Hugo网站上实施此操作时遇到了一些麻烦。特别是，我使用的是.md文件，我正在尝试添加一个存储在网站源文件中其他位置的图像。

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

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

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

Answer 1

我认为你不能像这样使用它（在降价中）。在markdown中，您必须使用短代码，因为必须先使用Go模板语言访问该图像，然后才能附加调整大小命令。

Answer 2

除非您使用下面注释中的链接引用它们，否则您需要确保将图像包含在页面内容中，通常位于页面本身。

注意：您可以通过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 }}">

[备选] 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 }}

从页面的降价处调用短代码。

{{< 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

内部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 }}">