How do I include an image in a post

support
1

Hi!

I have the following structure and want to include an image to a post:

content/
+ blog/
  + _index.md
  + 2018/
    + images/
      + xxx.png
    + 2018-02-03-my-post1.md
    + 2018-04-05-my-post2.md

(2018/ doesn’t have _index.md, it’s only for grouping files logically in my repo).

In the config.toml I have:

[params]
  [permalinks]
    blog = "/blog/:year/:month/:slug/"

So, my “post 1” has an url /blog/2018/02/my-post1/.

Now I want to include the image xxx.png in my post. What’s the correct way to do that? Is there a way to avoid typing the absolute URL in the markdown?

The URL of the image is /blog/2018/images/xxx.png.

If I do this:

![](../../images/xxx.png)

It works fine in the post, but not in post summary when I open just /blog/. Because, well, the relative URL is no longer valid.

So, is there a way to do it right? Is there a way to tell Hugo to compute a relative or absolute path to the image for me, or specifying the full absolute path is the only way to go?

I’m find with moving images around, or moving every post into their own directory if that helps.
I’m a bit hesitant about putting all the images into static/ as it feels nicer if content is stored together with images (and not that it helps much, you just have no other option rather than specify absolute URLs).
Also I’m not sure I understand what “Page Resources” are, are they of any help in this situation?

Thanks!

2

1st A summary has only text - default the first 70 characters of your content.

2nd description of page bundles

Look in my sample repo

I used page bundles, a gallery template etc…
I created different templates for feeds - RSS, ATOM and JSON - with images

gives you a starting point

3

Thanks for your reply.

Regarding the images in the summaries: it’s true that when summaries are autogenerated, the images are stripped. However if I insert <!--more--> into my posts to have more controlled summaries, the images are preserved.

Thanks for the example and pointers, I’ll take a look in the evening and get back if I have more questions!

4

In your sample, do you have any example how to reference images from the .md files?

I can see that there are images in content/post/*/images/, but I couldn’t find any use of those images in content/post/*/index.md.

For example, there is a file /content/post/2019-05-10_grid_rocks/images/grid.png, but I don’t see anywhere where it’s used.

Also I’ve just checked that if I create a page bundle:

/content/test/blah/index.md
/content/test/blah/image.png

I cannot just use ![](image.png) from my index.md, the link is copied verbatim without any modification.

So while it happens to work with the default configuration where the URL of the document is /test/blah/, it doesn’t work if the document has a permalink/alias, and neither it works in summaries in list pages.

UPD It seems that those images will get into page resources, and I’ll need to create a shortcode to access them from markdown files.
I’ll try to do that and get back to this thread with the result.

5

It seems I’ve found a solution:

  1. Create the layouts/shortcodes/file.html file with the following contents:
{{ ($.Page.Resources.GetMatch (.Get 0)).RelPermalink }}

(I really think this shortcode should be a standard one)

  1. In your .md file, insert images like this:
![]({{< file "image.png" >}})

That’s it! Works both from the page itself, and in summaries.

6

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