Hugo method for combining .md into one post

Hello hugo forums! I have been running a small blog using hugo for a bit and while everything is currently functional, I’m looking to fix something that feels like it could be done in a more appropriate, hugo way.

I have a section on mysite where I write about games that I’m currently playing. each game has an index.md and can also included any number of follow-up posts, i usually name them post1.md, post2.md, etc. in the index, I include a shortcode which will fetch the content from each of those posts, but since those are page resources, I’m having a hard time including images in them using shortcodes that look for page resources. It is my understanding, that these follow-up posts, ARE page resources, and those do not contain or cannot use their own page resources. Here is the inclusionary shortcode i’ve been using:

gameposts.html

{{ range sort (.Page.Resources.ByType "page") "Date" "asc" }}

		<div>
			<fieldset>
			<legend>{{ .Date | time.Format ":date_medium" }}</legend>	
				{{ .Content }}
			</fieldset>
		</div>	

{{ end }}

This is currently how the files are organized for this section.

└── content
    ├── _index.md
    └── games
        ├── _index.md
        ├── article1
        ├── article2
        ├── game1
        │   ├── conclusion.md
        │   ├── images
        │   │   ├── image1.jpg
        │   │   └── image2.jpg
        │   ├── index.md
        │   ├── post1.md
        │   └── post2.md
        ├── game2
        └── game3

I can access images in the content of the subsequent markdown files by using absolute paths, but this doesn’t work with some of the shortcodes I’ve amassed or made, because those are relying on page resources. I know that there has to be some kind of hugo-centric way of organizing a section like this. I looked into doing a headless bundle but it feels like that works only for top-level pages as you would need to specify archetypes and layouts for each subsequent “game”.

I also thought that there would be a way to include the “parent” resources in each subsequent markdown file but with no success. I imagine that the the parent of those markdown files is not the main index file of each of the folders.

So I’m asking for help. Currently this works, and I can use images, but I would like to know if there is a more hugo way doing things. You can see the site running currently at cyberbuffalo.party.

Thanks!

I would restructure your image shortcode(s) to look for the image in these locations, in this order:

  1. Page resource
  2. Parent page resource
  3. Global resource
{{- with .Get 0 }}
  {{- with or ($.Page.Resources.Get .) ($.Page.Parent.Resources.Get .) (resources.Get .) }}
    {{- $alt := or ($.Get 1) (path.BaseName .Name | replaceRE "-" " ") }}
    {{- with .Process "resize 300x webp" -}}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $alt }}">
    {{- end }}
  {{- else }}
    {{- errorf "The %q shortcode was unable to find %s: see %s" $.Name ($.Get 0) $.Position }}
  {{- end }}
{{- else }}
  {{- errorf "The %q shortcode requires a single positional argument; the path to an image: see %s" .Name .Position }}
{{- end -}}

1 Like

Thank you for taking the time to write that up. I’m going to carefully dissect this, as you are using methods that I do not understand immediately. If i have other questions or come-up with a working solution I will be sure to report back.

thanks!

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