Image processing in a page

support
1

I am using hugo v0.159.2-5f4646acaad89e1166aac118e118b0d28013f460+extended windows/amd64 BuildDate=2026-04-01T12:59:20Z VendorInfo=gohugoio

Now i am exactly trying to do what described here: Image processing

In content folder have a a leaf page with index.html (also tried index.md) and now trying to load the image by adding

{{ $image := .Resources.GetMatch "Header-CalendarDashboard-Banner3.png" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

But instead of showing the image; it shows the expression as text on the website. How can i get the expression gets executed?

image
image642×674 20.5 KB

2

you try to use template code in a markdown file. that is not possible.

to read about custom code in a content file check out Shortcode templates

Or have a look at the predefined Figure shortcode you may include directly.

or use markdown syntax for the image maybe with the predefined Image render hooks

3

ok clear. thanks. do i need to fill a bug for the docs as that suggests to do it in a content file?

4

That’s not a bug and you made an uninformed assumption on where the code should go. I guess you missed, in the docs, a fundamental structure of Hugo where template code goes into templates or shortcodes in layouts, or content adapters in content. I guess the simplified nature of the example may have confused you.

5

The docs show this

image
image811×441 15.1 KB

link Image processing

So this is impossible to do

6

mmh, ok, if you just look at that page - without a background context - you might get the impression. – but all docs pages are in context, and it does not make much sense to recap templating basics on every page.

Before you start coding you will have to get the basics and as @kijana said, if you know that the code shown contains template actions and read that part you may get the difference between content files and template files …

  • Introduction to templating

    A template is a file with template actions, located within the layouts directory of a project, theme, or module

  • Glossary #template

    template
    A template is a file with template actions, located within the layouts directory of a project, theme, or module.
    See details.

    template action
    A data evaluation or control structure within a template, delimited by {{ and }}.
    See details.

  • Template types #shortcode

    Shortcode
    A shortcode template is used to render a component of your site. Unlike partial or content view templates, shortcode templates are called from content pages.

7

I dont try to be a PITA here and pretty new with hugo and trying to bring my experience back to make it better; I just started (3th day); and pretty impressed what you can do with HUGO (my work so far: Widgets for Windows )

And while I now do understand that it’s not working, the docs are confusing, especially when you just start giving an example that it can work from the content folder isn’t helping.

8

Whatever „it“ is here. There’s certainly no issue using images from page bundles in markdown files. A gazillion of people do it every day. It fits just not work the way you thought it would. @irkode gave you some examples how to make „it“ work.
Take your time learning. Hugo is a complex piece of software. And you should not assume that it contains trivial bugs like the one you assumed to have discovered. Other people would’ve found that one long ago.

1 Like
9

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