How to Install and Customize Hugo Easy Gallery

Thanks to Li-Wen Yip ’s hugo-easy-gallery , it’s relatively easy to create galleries inside a hugo post.

Please follow the instructions regarding Installation and Theme integration .

For me, I added the codes in Theme integration to layouts/partials/foot_custom.html

1. figure.html

First, there is something to change in the shortcode of figure.html if you want to add the width parameter when inserting a figure.

Change

<img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/>

to

<img itemprop="thumbnail" {{ with .Get "width" }}width="{{.}}"{{ end }} src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/>

Basically, we added { with .Get "width" }}width="{{.}}"{{ end }}.

2. hugo-easy-gallery.css

First, if you want to delete the horizontal line beneath each figure you inserted with the <figure> shortcode, comment out the part of figure a.

Second, if you want to change the size of each figure within the gallery, edit @media only screen and (min-width : 480px). Tweak the width and padding-bottom parameter. For example, try changing them to 25% and 25%, respectively.

Third, if you want to decrease the white space between figures when you use the <gallery> shortcode, add margin-left and margin-right within .gallery .box {}.

Fourth, if you want the gallery to be full width or simply become wider. Comment out max-width: 768px; within .gallery{} and add

.gallery{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Tweak width, margin-left and margin-right as you would like.

Last modified on 2021-10-05