Postprocess custom output formats

support
1

Hey all! I’m trying to automatically generate the images that are used for URL previews for posts.

The path I’ve gone down is to create a custom output format with an SVG template that populates the SVG with the post title/date/etc. Then if the post doesn’t have any images set in the frontmatter to use the generated image instead. So each post gets a custom preview image that is auto generated, which is neat!

My head contains a custom open graph section in the head with the following.

{{ with .OutputFormats.Get "ogimage" -}}
  <meta property="og:image" content="{{ .Permalink }}" />
{{ end -}}

Before I continue if there is a better way to generate og:images with Hugo please point me in that direction.

Sadly I discovered that many sites including Twitter don’t support SVG as an open graph image preview.

To resolve this I tried using resource processing to post process the SVG into a webp image.

{{ with .OutputFormats.Get "ogimage" -}}
  {{ with resources.Get .RelPermalink | resources.PostProcess -}}
    {{ with .Resize (printf "%dx%d webp" .Width .Height) -}}
      <meta property="og:image" content="{{ .Permalink }}" />
    {{ end -}}
  {{ end -}}
{{ end -}}

However I see errors when I do this like error calling PostProcess: interface conversion: interface is nil, not resources.transformationKeyer. I’m guessing this is because the SVG doesn’t exist yet then the HTML template is being generated so the resources.Get is nil. I had hoped that using resources.PostProcess would solve that as it says it won’t do anything until everything has been generated, but I don’t think I’m quite understanding how that works.

How can I get Hugo to post process my SVG into something like a webp or PNG after the build has finished?

2

Hugo cannot convert an SVG to a raster image, nor can it convert a raster image into an SVG.

Take a look at the theme for the Hugo docs site, specifically:

https://github.com/gohugoio/gohugoioTheme/blob/master/layouts/partials/opengraph/get-featured-image.html

It starts with an empty image, then overlays the desired text.

1 Like
3

Amazing thank you! Text filters seems to be a much better approach.

4

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