Dynamic image list view

Hi guys,

I’ve been looking to implement a way to dynamically show the sections of my website using the featured images of posts within these sections, similar to the bookshelf example shown in the quickstart section.

Effectively, if my site primary level sections looks like this:

├── Finance
└── Online Learning
└── post1.md
└── Offline Learning
└── post2.md
├── Reading
└── Fiction
└── Dragon.md
└── Non-Fiction
└── Book.md

I want my list view to iterate within the section and display an image for these sections which is pulled from the most recent highest level .md featured_image varaible.

Currently I have this code to iterate through and identify each of the sections I want to display, not sure how to go about grabbing the featured_image from the top level .md file
as I’m not experienced enough with hugo to do it and not finding the documentation detailed enough to figure it out >.< - that and I’m probably being a nub!

{{ range $section, $test := .Site.Sections }}
{{ if ( or (eq $section “About”) (eq $section “Contact”)) }}
{{ else }}


{{ title $section | markdownify }}

{{ end }}
</div>
{{ end }}

you could range through .Site.Pages (i think that’s it) and if it’s a post or whatever type you want, then it could use that page and get the params from that page like the featured image… I’m not experienced enough to know the proper code, others here are, but something to the effect of Ranging through the pages, finding a page that you want to add, then pulling a frontmatter parameter from that page using the .Params.image or whatever keyword. Search this forum for stuff like looping through pages or inspect the li.html of various themes on their github repositories because that’s the template that loops through the pages. … well… that and list.html.

1 Like

This is where I got to, although it doesn’t work but I think that’s because I’m not properly specifying how to access the featured_image front matter, not sure how to and still searching for examples - will keep looking but help appreciated!

  {{ range $sectionName, $test := .Site.Sections }} 
       {{ if ( or (eq $sectionName "About") (eq $sectionName "Contact")) }}
    	    {{ else }}
    		<div class ="SubSection">
    		
    		   {{ $X := $.Site.GetPage "sections" "$sectionName"  }}
    		
    		   <img src="{{ $X.Params.featured_image }}" alt=" {{ $sectionName }} image" >
    		    <h1><a href="/{{ $sectionName }}">{{ title $sectionName | markdownify   }} </a></h1>
    				
     	 
          {{ end }}
</div>
       {{ end }}