Images

Image directory

Images have to be added as a Page Resource or a Resource . Page Resources live in the same folder as the markdown file via Page Bundles and Resources live in the assets folder. Do not put images in the static folder.

Links

• How To Add Image Processing… (alexlakatos.com)
• Simple image render hook template for responsive images - Hugo forums discussion about image render hooks

Image processing

Markdown Render Hooks

I wish I knew this existed before setting up an image render shortcode (see below).

With the new markdown render hooks, you can use default image link syntax (e.g. ![title](src)) in your markdown files. Hugo will look for a render-image.html template in layouts/_default/_markup/ for instructions to process the image.

Note: this template ignores external image links.

{{/* The destination of the link. Bind to a variable for convenience. */}} {{ $path := .Destination }} {{/* If the link
is an external link, ignore */}} {{ if not (hasPrefix $path "http") }} {{- $img := .Page.Resources.GetMatch .Destination
-}} {{- if and (not $img) .Page.File -}} {{ $path := path.Join .Page.File.Dir .Destination }} {{- $img = resources.Get
$path -}} {{- end -}} {{- with $img -}} {{- $large := $img.Resize "1200x" -}} {{ $medium := $large.Fill "726x402" -}} {{
$small := $medium.Fill "458x254" -}}
<figure class="image-caption">
  <img
    alt="{{ $.Text }}"
    srcset="
        {{ $small.RelPermalink }} 458w,
        {{ $medium.RelPermalink }} 726w,
        {{ $large.RelPermalink }} 1200w"
    sizes="50vw"
    src="{{ $small.RelPermalink }}"
  />
  <figcaption>{{ with $.Title | safeHTML }}{{ . }}{{ end }}</figcaption>
</figure>
{{- else -}}
<img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" />{{- end -}} {{ end }}

source: bep/portable-hugo-links (with slight modification to ignore external links)

Hugo Shortcodes

Hugo supports image resizing, fit, fill, exif and filters for image processing . By default, processing methods only apply to page resources.

Use the following shortcode to apply image processing to images placed the assets/images folder:

{{< img src="/images/{image}.png" alt="{alt}" caption="{caption}" link-title="{title}" >}}

Easy image insertion using the Insert Pattern setting in VSCode’s Paste Image extension:

{{< img src="/images/${imageFileName}" alt="${imageFileName}" >}}

The html for the shortcode:

{{ $altText := .Get "alt"}} {{ $caption := .Get "caption"}} {{ $linkTitle := .Get "link-title"}} {{ $image :=
resources.Get (.Get "src") }} {{ $filesize := len $image.Content }} {{ with $image }} {{ with $caption }}
<figure>
  {{ end }}
  <a
    href="{{.RelPermalink}}"
    {{
    with
    $linkTitle
    }}
    title="{{ $linkTitle }} ({{ path.Base $image.Name }}, {{ $image.Width }} x {{ $image.Height }} px, {{div (int $filesize) 1024 }} KB)"
    {{
    end
    }}
    target="_blank"
  >
    <img srcset=" {{ if ge $image.Width 320 }} {{ (.Resize "320x").RelPermalink }} 320w, {{ end }} {{ if ge $image.Width
    430 }} {{ (.Resize "430x").RelPermalink }} 430w, {{ end }} {{ if ge $image.Width 860 }} {{ (.Resize
    "860x").RelPermalink }} 860w, {{ end }} {{ if ge $image.Width 1720 }} {{ (.Resize "1720x").RelPermalink }} 1720w {{
    end }}" sizes="(max-width: 900px) calc(100vw - 4rem), 860px" src=" {{ if ge $image.Width 1720 }} {{ (.Resize
    "860x").RelPermalink }} {{ end }} " alt="{{$altText}}"/>
  </a>
  {{ with $caption }}
  <figcaption>{{ $caption }}</figcaption>
</figure>
{{ end }} {{ end }}

source: felix2020