Andrew Dorokhov
Static images
Put files under static/ (site or theme). They are copied to the site root:
<img src="{{ "hugo-logo-wide.svg" | relURL }}" width="128" height="38">
Page bundles
A page bundle is a folder with index.md (or _index.md for branch bundles) plus assets next to it:
hugo new posts/my-vacation/index.md
Place images in e.g. content/posts/my-vacation/images/ and reference them relatively:
<img src="images/test.jpg" alt="Test" />
Built-in shortcode:
{{< figure src="images/test.jpg" width="600" alt="Mount Rushmore" title="Mount Rushmore" >}}
Anything in the bundle is a page resource, so layouts can resize/crop it (open_in_new image processing , open_in_new image functions ):
{{ $image := $.Page.Resources.Get "path/to/image.jpg" }}
{{ $smallImage := $image.Resize "1024x" }}
<img src="{{ $smallImage.RelPermalink }}" width="{{ $smallImage.Width }}" height="{{ $smallImage.Height }}" />
These helpers are not available inside Markdown itself — use a shortcode.
Custom postimage shortcode
layouts/shortcodes/postimage.html:
{{ $image := $.Page.Resources.GetMatch (.Get 0) }}
{{ $smallImage := $image.Resize "1024x" }}
<figure class="post-figure">
<a href="{{ $image.RelPermalink }}">
{{ with $smallImage }}
<img src="{{ .RelPermalink }}"
width="{{ .Width }}" height="{{ .Height }}"
alt="{{ $.Get 1 }}" />
{{ end }}
</a>
<figcaption>{{ .Get 1 }}</figcaption>
</figure>
.Get 0— image path;.Get 1— alt/caption.Resize "1024x"keeps aspect ratio.- Inside
with, use$to reach shortcode arguments ($.Get 1).
In content:
{{< postimage "images/test.jpg" "Test image" >}}