Hugo : Image Carousel

Overview

One of my website is about sharing pictures with Friends. I wanted a fast and easy solution to drop all pictures in a folder and let friends have a look.

Solution

The idea is to create folders in the content folder for each event, and have a carousel for each event.

Root page

The root page is simply listing all the albums. For this I have used the index.html page in the layouts folder.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{{ define "main" }}

<section>
<div class="container">
    <img src="{{ .Site.BaseURL }}/album/Cartoon (17).jpg" alt="" 
      class="img-fluid" 
      style="width: 100%; height: auto;">
    <h3 class="text-warning">Latest Albums : </h3>
    {{ $pages := .Pages }}
    {{ range $pages.ByPublishDate.Reverse }}
      <ul class="text-warning">
        <li ><a class="text-decoration-none text-warning" 
                href="{{ .Permalink }}">{{ .Title | markdownify }}</a></li>
        {{ $customDateFormat := "January 2, 2006" }}
        {{ with .Site.Params.customDateFormat }}{{ $customDateFormat = . }}{{ end }}
        <small>{{ .PublishDate.Format $customDateFormat }}</small>
        {{ partial "tags" . }}
        <br>
      </ul>
    {{ end }}
    
</div>
</section>

{{ end  }}

Albums pages

In layouts/_default folder I have created a list.html page with the following :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

{{ define "main" }}
<h3 class="text-warning mb-3">{{ .Params.Title }}</h3>

<section>
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="col-lg-11 col-xl-12">
        {{ $images := .Resources.ByType "image" }}
  <div id="carouselAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      {{ range $index, $value := $images }}
        {{ if gt $value.Width $value.Height }}
          {{ $value = $value.Resize "1200x jpg Lanczos" }}
        {{ else}}
          {{ $value = $value.Resize "x1024 jpg Lanczos" }}
        {{ end }}
        <div class="carousel-item{{ if eq $index 0 }} active{{ end }}">
          <img src="{{ $value.RelPermalink }}" 
                style="max-width: 100%; width: {{ $value.Width }}; height: {{ $value.Height }};" 
                class="d-block img-fluid" 
                alt="Slide {{ add $index 1}}">
        </div>
      {{ end }}
    </div>
    <button class="carousel-control-prev" 
            type="button" 
            data-bs-target="#carouselAutoplaying" 
            data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" 
            type="button" 
            data-bs-target="#carouselAutoplaying" 
            data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
</div></div>

</section>

{{ end }}

Album Folders

Each time I am creating a new folder, I am adding an _index.md file with some metadata :

1
2
3
4
5
6
7

---
title: "Draghill 2018"
date: 2018-10-06T03:43:20-05:00
publishdate: 2018-10-06T03:43:20-05:00
lastmod: 2018-10-06T03:43:20-05:00
tags: 
---

The relevant data are really the publishdate to chronogically order the albums and the title to give some context hint.

Improvements

Create a partial that will wrap the image generation, to present it like polaroids and / or put a caption with some metadata.