[SOLVED] Access page bundle resources from a list page

support
1

I’m trying to insert thumbnails from a page bundle in the list page showing all posts. Consider the following content layout, where each leaf bundle is a blog post:

post/
 |
 +->leaf-bundle-dir/
 |  |
 |  +->index.md
 |  +->image.jpg
 |
 +->leaf-bundle-dir-2/
    |
    +->index.md
    +->image.jpg

In the index.md files I have front matter including:

resources:
  - 
    src: image.jpg
    name: thumbnail

From within the context of the single page template, the page resources can be accessed as expected. The following example works on that single page context:

{{ $thumbnail := .Resources.GetMatch "thumbnail" }}
{{ with $thumbnail }}
{{ $scaled := .Fit "600x400" }}
<img src="{{ $scaled.Permalink }}"/>
{{- end -}}

However, I have been unable to figure out how to access those page resources when iterating through the posts to create list page:

{{- $paginator := .Paginate (where .Data.Pages "Type" "post") -}}
{{- partial "header" . -}}
<section class="content list">
	{{- range $index, $element := $paginator.Pages -}}
	
	<article class="thumb">
		<div class="imgthumb">
		{{- if .Params.thumbnail -}}
		<a href="{{ .URL }}">{{ partial "thumbnail" .Params }}</a>
		{{- end -}}
		</div>
		<div class="prevtext">
		<h1><a href="{{ .URL }}">{{ .Title }}</a></h1>
		{{- partial "datetime" .Date -}}
		<p>{{ .Params.excerpt }}</p>
		</div>
	</article>
	{{- end -}}
</section>

{{- partial "footer" . -}}

The theme expects an old-style, pre-bundle type Params.thumbnail, and I’m trying to convert it to use a thumbnail specified in the post bundle. That’s where I’m stuck.

2

It is a little bit hard to guess without seeing the full partial, but assuming the previous listing was thumbnail.html, then you need to send the page into the partial:

{{ partial "thumbnail" . }}
3

Thanks for the quick reply!

I was thinking this was a scope/context problem, so I did a lot of testing in the theme-name/layouts/index.html template (the snippet with the post iterator shown in my earlier post) and in the thumbnail.html partial.

I made some mistakes along the way, however, and never got to the right place. Your suggestion here has got me on the right track and advanced my nascent understanding of templating in Hugo.

4

So, I definitely had a lot to learn about how scope and context is passed through the template system. Thank you for your patient suggestion.

Here’s what I’ve got working now:

{{- range $index, $element := $paginator.Pages -}}  
<article class="thumb">
    <div class="imgthumb">
    {{ if .Resources.GetMatch "thumbnail" }}
        {{ $thumbnail := .Resources.GetMatch "thumbnail" }}
        {{ $scaled := $thumbnail.Fill "300x300 Gaussian" }}
        <a href="{{ .URL }}"><img src="{{ $scaled.Permalink }}" width="150"/></a>
    {{- end -}}
    </div>
</article>
{{- end -}}

Thanks again for the help!

5

Use .Permalink or .RelPermalink instead.

.Page.URL is marked for deprecation

2 Likes
6

Thanks for pointing that out. I’ve been using https://github.com/SamWhited/newsprint to get started, but I can see it needs a number of updates.