HUGO

Possible to access title of images in markdown content on list pages?

support
#1

Hello.

Is it possible to access the title of the image in markdown of content set like ![title](image) in my list page?

What I’m trying to do is on my list page, I am displaying posts as cards with each post having a cover image (set using frontmatter). I am trying to show all the images in the posts as a slideshow in the cards. So, I was wondering if I can use the title (or any other way works too), to show like a caption below each image.

#2

I think that is what a render hook is supposed to solve?

{{ $alt := .PlainText | safeHTML }} seems to contain the alt text. Not tested.

#3

That would let me access in in the markdown content itself, right? I have that set-up and working correctly.

However, I’m asking if it’s possible in the 'list` (section) page? Check this page for example: https://v2--hrishikeshk.netlify.app/projects/. I have a user controlled slideshow working for the last 2 posts. It’s loading images like this:

<!-- Inside my range of posts -->

  {{ range .Page.Resources.Match "img*.png" }} <!-- Loop through all images used in post -->

    <li> <!-- Card slideshow image item -->
      <img width = "1920" height = "1080" alt = "{{ . }}" data-src = "{{ .RelPermalink }}" uk-img> <!-- Card slideshow image/ -->
    </li> <!-- /Card slideshow image item -->

  {{ end }} <!-- /Loop through all images used in post -->

<!-- /Inside my range of posts -->

So, this is rendering the images in the section template. Right now, it accepts any image with the prefix img, which is fine. But, I was wondering if I can use only the images used in the markdown content without them needing any prefix and then access the title that I set using Markdown.

#4

I don’t think you can do that. If I would be forced to implement it I would check the new post processing as option, but that is not easy, you would have to write a script that parses finished html files for their images and then add them to the index pages. That’s bound to fail somewhere.

If you can influence the project structure from the beginning try to add article images as page resource to the frontmatter (there adding a title) and then range through that information.

A (very hacky) version would be naming the files img-title-of-the-image.png, then substr-ing the first 4 and last 4 characters and humanize-ing the rest.

1 Like
#5

I had thought so.

The workarounds are brilliant. Thanks a lot!

#6

Here is another idea:

{{ findRE "<img.*alt="(.|\n)*".*?>" .Content }}

(might/should) return all occurrences of alt in .Content. This is not tested, because I did not check out yet regexpes in Hugo.

1 Like
#7

Yes, it will probably return all occurrences, but, there might be a way to store it as an array and access the value then.

#8

It should return slices with the alt text. so you could do something like this:

{{ $alts := findRE "<img.*alt="(.|\n)*".*?>" .Content }}
{{ range $alts }}
<li>{{.}}</li>
{{ end }}

You should even be able to add more brackets () in the query and receive the urls too. That might be the cleanest solution.

I wonder if there is a way to get the unprocessed content. Then the regexp will be very easy. ![(.*)]\((.*)\)

#9

You are a genius.

#10

There is the .RawContent variable.

raw markdown content without the front matter.

1 Like
#11

You could:

  • Collect the images in a slice in a markdown hook using .Page.Scratch.Add ...
  • Invoke .Content (even if you don’t use it, just assign it to $tmp := .Content.
  • And then in your list template read from that scratch variable.
1 Like
#12

That’s another interesting method.

I thought it was not possible and was hesitant to ask the question. I had definitely not expected so many possible ways. Thanks a lot!

#13

A related tip (that I recently used myself) would be to

  • In the “article layout” pick one image from .Resources and mark it as used in .Scratch
  • Then in the image hook, check .Page.Scratch if it’s already used to avoid inserting the same image twice
#14

Noted. Doing it now. Thanks!

#15

I think that this topic is very useful regarding accessing Markdown Render Hooks variables on a project’s list templates and for reference here is how I did what was described above by @bep

Within the image render hook template store whatever variables as needed in a slice with .Scratch.Add.

For example store a markdown image’s .PlainText like so:

{{ .Page.Scratch.Add "caption" (slice .PlainText) }}

Then from any list template within the project, access the stored Scratch slice within the context of whatever Page Group and render it as needed.

For example:

{{ range site.Regular.Pages }}
   {{ $caption := .Scratch.Get "caption" }}
     {{ range $index, $element := $caption }}
	  <p>{{ $element }}</p>
     {{ end }}
{{ end }}
1 Like
#16

That’s super clean. Thanks!

#17

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