Process images in same folder as multiple named.md markdown files for GitHub Compatibility

support
1

How can I use Hugo image processing for images stored in the same folder as multiple non “_index.md” markdown files? I have multiple nested folders that each have an _index.md, named.md files, and images. This allows the images to be viewed on GitHub and other markdown viewers. The images display fine in the Hugo rendered site but I can’t use image processing.

It is my understanding that they need to be page resources.

  • I tried to give the full path to the images and then process but nothing happened.
  • I tried to use {{ $examplePage := index (where .Site.Pages ".File.Dir" $pageFolderUp) 0 }} but got this error “execute of template failed at <.Site.Pages>: can’t evaluate field Site in type goldmark.imageLinkContext”

This is the structure of the files.

content/
├── courses
    ├── _index.md
    └── course-name
        ├── _index.md
        └── module-1
            ├── _index.md
            ├── lesson-1.md
            ├── lesson-2.md
            ├── lesson-3.md
            ├── image1.jpg
            ├── image2.png
        └── module-1
            ├── _index.md
            ├── lesson-1.md
            ├── lesson-2.md
            ├── lesson-3.md
            ├── image1.jpg
            ├── image2.png
├── posts
    ├── _index.md
    ├── post-1.md
    ├── post-2.md

This is the markdown image render hook I am using:

<!-- Begin Include Markdown Files with ![Image](markdown.md) -->
{{- $includeUrl := urls.Parse .Destination -}}
{{- if strings.HasSuffix $includeUrl.Path ".md" -}} <!-- Check if a markdown file extension -->
{{ .Destination | readFile | replaceRE "^---[\\s\\S]+?---" "" | markdownify }}
{{- end -}} <!-- End Include Markdown Files with ![Image](markdown.md) -->

{{- if not (strings.HasSuffix $includeUrl.Path ".md") -}} <!-- if not a .md file -->

<!-- Begin Example Code from Hugo Portable Links https://github.com/bep/portable-hugo-links -->
{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{- $img = resources.Get $path -}}
{{- end -}}
{{- with $img -}}
{{- $xlarge := $img.Resize "3840x" -}}
{{- $large := $img.Resize "2048x" -}}
{{- $medium := $img.Resize "1080x" -}}
{{- $small := $img.Resize "828x" -}}
{{- $xsmall := $img.Resize "640x" -}}

<figure class="image-caption">
  <img alt="{{ $.Text }}" srcset="
        {{ $xsmall.RelPermalink }} 640w, 
        {{ $small.RelPermalink }} 828w,
        {{ $medium.RelPermalink }} 1080w,
        {{ $large.RelPermalink }} 2840w,
        {{ $xlarge.RelPermalink }} 3840w" width="{{ $img.Width }}" sizes="50vw" src="{{ $xsmall.RelPermalink}}" />
  <figcaption>{{ with $.Title | safeHTML }}{{ . }}{{ end }}</figcaption>
</figure>
{{- else -}} <!-- End Example Code from Hugo Portable Links https://github.com/bep/portable-hugo-links -->

<!-- Begin check for images living in same folder as markdown-file.md for GitHub viewing -->
{{- $pageFolder := path.Dir .Page.RelPermalink }} <!-- Get the Relative URL of the Page -->
{{- $pageFolderUp := path.Dir $pageFolder -}} <!-- Remove the Hugo Created folder from URL-->
{{- $imgPath := path.Join $pageFolderUp .Destination -}}<!-- Join one folder up with the image .Destination -->

{{- if os.FileExists $imgPath -}} <!-- check if image is one directory up after Hugo Render -->

<img src="{{ $imgPath | safeURL }}" alt="{{ $.Text }}" /> <!-- Display image-->
{{- else -}} <!-- End check for images living in same folder as markdown-file.md for GitHub viewing -->

<!-- Display images that might have a full root path in their src -->
<img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" />{{- end -}}{{- end -}}{{- end -}}
2

But not necessarily of the current page.

Do .Page.Resources.Get with a fallback to .Page.CurrentSection.Resources.Get.

1 Like
3

Thank you for the help. Is this the way you suggested? It did not work but I know I am using the .Get wrong but just not sure how.
This is what I tried on my repository.

{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{- $img = resources.Get $path -}}
{{- end -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{- $img = .Page.Resources.Get $path -}}
{{- end -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{- $img = .Page.CurrentSection.Resources.Get $path -}}
{{- end -}}
{{- with $img -}}

Going to keep fiddling around and will post any successes.

4

This example demonstrates the fallback technique.

1 Like