Displaying images

support
1

First of all: I’m not allowed to put links in here. So I have to change them…

I updated to latest hugo (I was many versions behind) today.
Then realized that my pictures are not displayed.

I used to have them in the /static directory.
Then went on to read:

So I moved /static/images to assets/images.

In my content/post/test.md I tried the following:

{{ $lxqtscr := resources.Get "images/screenshot.png" }}
{{ $lxqtscr.Permalink }}
<img src="{{ $lxqtscr.Permalink }}" alt="screenshot" style="width: 734px;"/>

This resulted int he first two lines just printed into the html page, and the image tag isn’t even present.
I’m using the contrast theme.

1 Like
2

Displaying images is fairly straightforward. Use Markdown.

![](path-to-img.jpg). Then, it won’t matter if you have your images in static or assets. If you don’t want to process images using Hugo, you can let them exist in static.

So, if your image exists at: /static/images/img1.jpg, you can add it in your content file like this: ![Alternate Text](/images/img1.jpg).

However, if you want to mention the width and height of image like you’ve done in your code, you’d have to keep the images in assets or in the content folder. I’d choose the latter.

Here’s how I do it:

My file structure is, /content/section/post1/. Here, I have my index.md and img1.jpg. Then, in the index.md, I can add the image as ![Alternate Text](./img1.jpg). However, to specify the size, you’d have to create the following file (one-time):

/layouts/_default/_markdown/render-image.html with the content:

{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
<img width = "{{- $image.Width -}}" height = "{{- $image.Height -}}" alt = "{{- .PlainText | htmlUnescape -}}" src = "{{- $image.RelPermalink -}}">
3 Likes
3

Why do I need the last part only one time, and shouldn’t there be the filename of the image somwhere in there?

1 Like
4

It’s because of Render Hooks. Basically, you’re telling Hugo how to render the HTML content of the Markdown Image syntax. So once it’s created, all the images in Markdown written in the Markdown syntax will render with the code in that file. Read more here: Configure markup | Hugo

It is mentioned in the part (printf "%s" (.Destination | safeURL)). When you’d add the image in Markdown using ![Alternate Text](./img1.jpg), the path ./img1.jpg works as the destination and is passed to the render-image template.

2 Likes
5

I put my images in /static/images/… (which get published into /images/… ) and just use plain markdown to add them to posts. I think the /assets/images directory is for images that need to be processed by Hugo? I pre-process all images outside of Hugo, and just put the web-ready files in /static/images/…

6

A post was split to a new topic: Pass attributes to image render hook

7

Thanks! I found this very difficult because the docs show {{...}} embedded somewhere, and I inferred I could simply use it as shown in the .md content.