Best way of implementing an image slider / carousel - page resources?

support
1

Hi,
I’m trying to implement an image slider / carousel. I’m wondering if the best approach is to use Page Resources or to use an approach like this example whereby the slide data is listed as yaml files under a particular folder (eg slides) under the data folder.

I attempted unsuccessfully to follow the example here in this Stackoverflow post.

This is how my content is set up

content 
     |--> index.md
     |--> images/
               |--> slide1.jpg
               |--> slide2.jpg
               |--> slide3.jpg

The front matter of my _index.mg is:

resources:
  - name: "slide1"
    src: "images/slide1.jpg"
  - name: "slide2"
    src: "images/slide2.jpg"
  - name: "slide3"
    src: "images/slide3.jpg"

And my home page template code is:

    {{ with .Resources.ByType "image" }}
        <div class="slider">
            {{ range . }}
                <div class='slider-item'>
                    <img src="{{ .RelPermalink }}" />
                </div>
            {{ end }}
        </div>
    {{ end }}

I’ve also tried with no success:

    {{ with .Site.GetPage "section" "images" }}
        <h2>{{ .Title }}</h2>
        {{ $resources := .Resources.ByType "image"}}
        {{ range $resources }}
            {{ with . }}
            <div class='slider-item'>
                <img src="{{ .RelPermalink }}">
            </div>
            {{ end }}
        {{ end }}
    {{ end }}

I would like to understand why this approach isn’t working before abandoning to use the yaml file approach in the Moodle example above.

Any ideas and pointers would be greatly appreciated. Thank you.

2

This partial shows how I’m doing it. I’m using bulma css here and a 3rd party extension for it called bulma-carousel. Conceptually it’s similar:

4 Likes
3

The image files are just in the same folder as the markdown files, in my case, and this code assumes their name is “eSolia-Post-Slider…”.

End result looks like the gallery at the bottom:

https://esolia.com/office-moves/

2 Likes
4

Hi Rick,

Thanks very much for those suggestions. I’ve learned a lot from looking at the eSolia website Hugo code.

In the end, my issue was that the images were located in the folder images/ rather than alongside _index.md.

Thanks for taking the time to offer some some help.

1 Like
5

Hi,

is this approach universally applicable with any theme ? Hugo newbie here.