The existing work force the users using the image folder in the site or shortcodes to add the link to the image while I just want to use the markdown language to add images. Therefore, I write this post and create a demo site to show how I make it work.
New a project
We start from an empty project to make sure that it is able to be reproduced. Jump to section 3, if you just want to see the shortcode.
Ref: Hugo Quick Start
$ hugo new site gallery-demo
$ cd gallery-demo/ # all following bash commands are run at this directory
$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
$ echo theme = \"ananke\" >> config.toml
Remember to modify the default configurations by editing config.toml if you want to publish your site. For example the content of the demo site:
baseurl = 'https://aben20807.github.io/hugo-gallery-demo'
languagecode = 'en-us'
title = 'gallery demo'
theme = "ananke"
Setup deployment via GitHub Action
Ref: Build Hugo With GitHub Action
$ mkdir .github/workflows -p
$ vim .github/workflows/gh-pages.yml
Click to see detailed yml file
name: github pages
on:
push:
branches:
- master # Set a branch to deploy
pull_request:
jobs:
deploy:
runs-on: ubuntu-20.04
steps:
- uses: actions/checkout@v3
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.143.1'
# extended: true
- name: Build
run: hugo --gc --minify --cleanDestinationDir
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/master'
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
Add the gallery shorcode
html
$ mkdir layouts/shortcodes -p
$ vim layouts/shortcodes/gallery.html
{{ $rowSize := index .Params 0 | default 2 }}
{{- $images := split .Inner "\n" -}}
<div class="gallery-wrapper" style="grid-template-columns: repeat({{- $rowSize -}}, 1fr)">
{{- range $i, $img := $images -}}
{{- with (strings.TrimSpace $img) -}}
<div>{{- $img | markdownify -}}</div>
{{- end -}}
{{- end -}}
</div>
css
Custom CSS may not work for your theme, and you can change to edit the theme’s css or add <style>...</style> in layouts/shortcodes/gallery.html as the workarounds.
$ echo -e '[params]\ncustom_css = ["gallery.css"]' >> config.toml
$ mkdir assets/ananke/css -p
$ vim assets/ananke/css/gallery.css
.gallery-wrapper {
display: grid;
}
.img-wrapper {
margin: 1px;
}
New a post
$ hugo new posts/gallery-demo.md
$ vim content/posts/gallery-demo.md
---
title: "Gallery Demo"
date: 2022-07-28T11:05:57+08:00
draft: false
---
+ By default: 2 images for each row
{{< gallery >}}
{{< /gallery >}}
+ Pass argument to set 3 images for each row
{{< gallery 3 >}}
{{< /gallery >}}
Result
Check the Live Demo / Demo code
