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
- 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 }}
.
- 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