Add Gallery Page

  1. Create the gallery directory by navigating to the theme/{theme}/layouts directory.

  2. Create or copy single.html into _default and add the following code block under the <main> tag:

    <article>
        <div class="row">
            {{- $images := .Resources.ByType "image" -}}
            {{ range $image := $images }}
                {{- /* If width is greater than height */ -}}
                {{- if gt .Width .Height -}}
                    {{- $image = .Fill (printf "%dx%d" .Height .Height) -}}
                {{- else -}}
                    {{- /* If height is greater than width */ -}}
                    {{- $image = .Fill (printf "%dx%d" .Width .Width) -}}
                {{- end -}}
                <div class="col-6 col-md-4 col-xl-3 pb-3 px-2">
                    <img src="{{ $image.RelPermalink }}" alt="Gallery Image" class="img-fluid" width="{{ $image.Width }}" height="{{ $image.Height }}">
                </div>
            {{ end }}
        </div>
    </article>

  1. Create the Index File for the Gallery. hugo new content/gallery/_index.md

  2. Open the newly created index.md file, and change the draft status from true to false.

  3. Add your images under the gallery directory.