Conversion to WebP

support
1

Hello,

I have recently started learning Hugo, and I am really enjoying it. What I liked the most is the image conversion feature that converts images from other formats to WebP on the fly – it’s truly a great solution!

However, I still haven’t figured out how to implement this not only for the template but also for images inserted in a Markdown file:

![](/its-me-mario.png)

I found this guide (posted on Jul 04, 2022), but I encountered errors when trying to follow it. It’s possible that the guide is outdated or not functioning correctly:

Resize All Images Guide

Does it work for you, and should it work at all?
Is there an elegant solution in the form of a shortcode or a ready-made template for /layouts/_default/_markup/render-image.html?

I have exhausted all my options on Google and this forum today, so I decided to try my luck here…
I apologize in advance if the question is silly and the solution was obvious.

2

https://discourse.gohugo.io/search?q=image%20render%20hook%20%23tips-tricks

3

If all you want to do is convert every image that you reference in Markdown to the WebP format, I’d start with Hugo’s embedded image render hook and add a couple of lines:

layouts/_default/_markup/render-image.html 
{{- $u := urls.Parse .Destination -}}
{{- $src := $u.String -}}
{{- if not $u.IsAbs -}}
  {{- $path := strings.TrimPrefix "./" $u.Path }}
  {{- with or (.PageInner.Resources.Get $path) (resources.Get $path) -}}
    {{- with .Process "webp" -}}
      {{- $src = .RelPermalink -}}
      {{- with $u.RawQuery -}}
        {{- $src = printf "%s?%s" $src . -}}
      {{- end -}}
      {{- with $u.Fragment -}}
        {{- $src = printf "%s#%s" $src . -}}
      {{- end -}}
    {{- end -}}
  {{- end -}}
{{- end -}}
{{- $attributes := merge .Attributes (dict "alt" .Text "src" $src "title" (.Title | transform.HTMLEscape)) -}}
<img
  {{- range $k, $v := $attributes -}}
    {{- if $v -}}
      {{- printf " %s=%q" $k $v | safeHTMLAttr -}}
    {{- end -}}
  {{- end -}}>
{{- /**/ -}}

The markdown image must be a page resource or a global resource.

If you really, really want to place your images somewhere in the static directory, mount the static directory to assets:

hugo.toml 
[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'static'
target = 'assets'
1 Like
4

Great! Thank you very much, everything worked perfectly - just what I was looking for!

The only thing is that it works on my local computer, but it refused to build on Cloudflare. Looks like I’ll have to create a public github :slight_smile:

At any rate, thank you for the hint!


2024-06-20T12:01:50.715038Z Cloning repository...

2024-06-20T12:01:51.636852Z From https://github.com/icedogas/dfdfdfdf.com

2024-06-20T12:01:51.637301Z * branch 1028e899c746532a4a982c1884f29827d99cde87 -> FETCH_HEAD

2024-06-20T12:01:51.6374Z

2024-06-20T12:01:51.672712Z HEAD is now at 1028e89 back webp

2024-06-20T12:01:51.673235Z

2024-06-20T12:01:51.761067Z

2024-06-20T12:01:51.761562Z Using v2 root directory strategy

2024-06-20T12:01:51.786975Z Success: Finished cloning repository files

2024-06-20T12:01:53.789612Z Checking for configuration in a wrangler.toml configuration file (BETA)

2024-06-20T12:01:53.790233Z

2024-06-20T12:01:53.90848Z No wrangler.toml file found. Continuing.

2024-06-20T12:01:54.056282Z Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1

2024-06-20T12:01:54.056904Z Installing project dependencies: npm clean-install --progress=false

2024-06-20T12:01:56.82129Z

2024-06-20T12:01:56.821633Z added 141 packages, and audited 142 packages in 2s

2024-06-20T12:01:56.821845Z

2024-06-20T12:01:56.821982Z 25 packages are looking for funding

2024-06-20T12:01:56.822113Z run `npm fund` for details

2024-06-20T12:01:56.823597Z

2024-06-20T12:01:56.823791Z 1 high severity vulnerability

2024-06-20T12:01:56.823936Z

2024-06-20T12:01:56.824091Z To address all issues, run:

2024-06-20T12:01:56.824219Z npm audit fix

2024-06-20T12:01:56.824307Z

2024-06-20T12:01:56.824431Z Run `npm audit` for details.

2024-06-20T12:01:56.837169Z Executing user command: hugo

2024-06-20T12:01:57.353764Z Start building sites …

2024-06-20T12:01:57.353999Z hugo v0.118.2-da7983ac4b94d97d776d7c2405040de97e95c03d+extended linux/amd64 BuildDate=2023-08-31T11:23:51Z VendorInfo=gohugoio

2024-06-20T12:01:57.354082Z

2024-06-20T12:01:57.370875Z Total in 21 ms

2024-06-20T12:01:57.386852Z Error: error building site: render: failed to render pages: render of "home" failed: "/opt/buildhome/repo/layouts/index.html:163:14": execute of template failed: template: index.html:163:14: executing "main" at <partial "top.html" .>: error calling partial: "/opt/buildhome/repo/layouts/partials/top.html:320:28": execute of template failed: template: partials/top.html:320:28: executing "partials/top.html" at <markdownify>: error calling markdownify: "/opt/buildhome/repo/content/_index.md:1:1": "/opt/buildhome/repo/layouts/_default/_markup/render-image.html:5:25": execute of template failed: template: _default/_markup/render-image.html:5:25: executing "_default/_markup/render-image.html" at <.PageInner.Resources.Get>: can't evaluate field PageInner in type goldmark.imageLinkContext

2024-06-20T12:01:57.387344Z Failed: Error while executing user command. Exited with error code: 1

2024-06-20T12:01:57.388947Z Failed: build command exited with code: 1

2024-06-20T12:01:58.299179Z Failed: error occurred while running build command
5

You’re building with an older Hugo version on Cloudflare.

https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#use-a-specific-or-newer-hugo-version

You need to use v0.125.0 or later.

6

You are the best!
I knew that the problem was simpler and quite close))
Thanks again!

1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.