readDir in my .md and .html

support
1

I am trying to build a slideshow that would iterate over all the files contained in a “thumbs” folder next to my foo.md content file. It seems that the golang template are not analysed and outputted as is. Could you please be kind enough to let me know what I am missing ?

Hugo version

Hugo Static Site Generator v0.15-DEV BuildDate: 2015-11-02T18:05:51+01:00

My markup file

+++                                                                                                                                                                             
author = "yann"                                                                                                                                                                 
date = "2015-11-02T15:33:59+01:00"                                                                                                                                              
draft = true                                                                                                                                                                    
gallery = "content/gallery/foo/thumbs"                                                                                                                                          
slug = "foo"                                                                                                                                                                    
tags = ["nature",]                                                                                                                                                              
title = "foo"                                                                                                                                                                   
                                                                                                                                                                                
+++                                                                                                                                                                             
                                                                                                                                                                                
                                                                                                                                                                                
<ul>                                                                                                                                                                            
    {{ $files := readDir .Params.gallery }}                                                                                                                                     
    {{ range $files }}<li>{{ .Name }}</li>{{ end }}                                                                                                                             
</ul>                                                                                                                                                                           
                                                                                                                                                                                
<div class="slider slider-for">                                                                                                                                                 
   <div><img src="thumbs/dsc04022.jpg"></div>                                                                                                                                   
   <div><img src="thumbs/dsc04023.jpg"></div>                                                                                                                                   
   <div><img src="thumbs/dsc04026.jpg"></div>                                                                                                                                   
   <div><img src="thumbs/dsc04035.jpg"></div>                                                                                                                                   
</div>

Thank you for you help.

2

I don’t see any readDir in your sample, suspect there are more. You need to give a complete picture, the best being a failing repository, to make it possible to help you.

3

readDir is in the first line after the opening <ul>

@bep not sure to understand what you mean by

don’t see any readDir in your sample

Here it is the directory structure:

yml@garfield$ (git: master) tree 
.
└── foo
    ├── foo.html
    ├── src
    │   ├── dsc04022.jpg
    │   ├── dsc04023.jpg
    │   ├── dsc04024.jpg
    │   ├── dsc04026.jpg
    │   └── dsc04035.jpg
    └── thumbs
        ├── dsc04022.jpg
        ├── dsc04023.jpg
        ├── dsc04024.jpg
        ├── dsc04026.jpg
        └── dsc04035.jpg
4

You can only use template functions (like readDir) in layout templates and in shortcodes. I’m guessing a little here, but it looks like you try to use it directly in a content file.

5

Yes this is exactly what I was trying to do.

6

Thank you very @bep for getting me back on track :slight_smile:
I am looking for a way to avoid some repetition. I need to indicate both src (relative path to my thumbs folder) and basename (name of my thumbs folder).

Is there a way to get the folder the current content is located ? This will let me pull this out of .Params.
Or maybe someone could proposed a better approach to do this ?

/layouts/shortcodes/gallery.html

<div>                                                                                                                                                                           
    {{ $src := .Get "src" }}                                                                                                                                                    
    {{ $basename := .Get "basename" }}                                                                                                                                                                                                                                                                                         
    {{ $files := readDir $src }}                                                                                                                                                
    {{ range $files }}<div><img src="{{ $basename }}/{{ .Name }}"></div>{{ end }}                                                                                               
</div>

/content/gallery/foo/foo.html

...
+++
{{< gallery src="content/gallery/foo/thumbs" basename="thumbs">}}
...
7 
{{ $basename := .Page.Dir }}

Or

{{ $basename := .Page.Path }}

Not sure which it what you want – test them both.

8

@bep thank you for your hand holding. With your help I managed to achieve exactly what I wanted ; an “almost” automated way to get a gallery content type.

/layouts/shortcodes/gallery.html

{{/* Build the path to the image from site root */}}                                                                                                                            
{{ $relpath := .Get "relpath" }}                                                                                                                                                
{{ $.Scratch.Set "dir" "content/" }}                                                                                                                                            
{{ $.Scratch.Add "dir" $.Page.Dir }}                                                                                                                                            
{{ $.Scratch.Add "dir" $relpath }}                                                                                                                                              
{{ $dir := $.Scratch.Get "dir"}}                                                                                                                                                
{{ $files := readDir $dir }}                                                                                                                                                    
                                                                                                                                                                                
<div class="slider slider-for">                                                                                                                                                 
    {{ range $files }}<div ><img src="{{ $relpath }}/{{ .Name }}"></div>{{ end }}                                                                                               
</div>                                                                                                                                                                          
<div class="slider slider-nav">                                                                                                                                                 
    {{ range $files }}<div ><img src="{{ $relpath }}/{{ .Name }}"></div>{{ end }}                                                                                               
</div>

This shortcode can be used like this:

{{< gallery relpath="thumbs">}}

The thumbs are generated with vipsthumbnails like this:

vipsthumbnail --size=800X0 --rotate --format="../thumbs/%s.jpg" src/*

The last missing part would be to be able to shell out to exec this command when the shortcode is executed but this will be a problem for another day. :-p

Thanks again