Showing images contained in pages in a list of pages

So imagine this structure

  • posts
    • post1
      • pic1.jpg
      • pic2.jpg

In posts/post1/, I would link to these images within the content:

blabla ![](pic1.jpg) blabla

and they show as they should.

However - I am certain you can imagine already, what the question is - when listed in /posts, these images will not be found, their relative URLs won’t resolve of course.

Is there a way to make them appear as absolute?
Or how do you solve this?
Of course, putting them in static works, but is much less elegant.

Page bundles.

Excuse me, but how is that an answer?

Plain and simple: address your images as page resources so that you don’t end up with relative links that break when you have them in places other than the original page.

For example, try this for layouts/_default/_markup/render-image.html:

{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- with $img -}}
<img alt="{{ $.Text }}" src="{{ $img.RelPermalink }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
{{- else -}}
<img src="{{ .Destination | safeURL }}"  alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
{{- end -}}

This renders images the same way Hugo does by default, but if the image in question is a page resource, that exact resource link is used no matter where you’re rendering it from.

As in your example, one can loop through resources, this is nice and there certainly are situations (even on my site) where this comes in handy.
However, how would I apply this to the markdown inline images, I was asking about? I have no access to {{...}} there, or do I?

Aha, shortcodes!

Now I see, what you did there! But how do you access this in markdown?

You put the code I’ve given to layouts/_default/_markup/render-image.html and it executes for every image you have in your markdown. That’s what _markup render-hooks are for.

1 Like

That’s quite something! Thanks a lot!

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