This video is all about how to create Masonry/Pinterest style image gallery with Hugo and Bootstrap 5. I cover accessing page resource images, iterating over them, and how to create the masonry style layout with a JavaScript library.
You can use your own project, or use mine via the links below.
Watch my full length Hugo courses on skillshare here: https://www.skillshare.com/r/user/sean_emerson?gr_tch_ref=on&gr_trp=off
You get 1 month free, to watch my courses using my referral link.
Full length HUGO and Bootstrap 5 intro course
https://skl.sh/3rsfq4y
Full length SASS/SCSS building with Hugo Course
https://skl.sh/3IKdWc2
Full length JavaScript building with Hugo Course
https://skl.sh/3uHZcEz
SEO and asset optimisation with Hugo Course
https://skl.sh/3rthbOo
Looking for the best value for money travel insurance that suits both travellers and digital nomads? Covid-19 coverage included! Use my link to support this channel.
https://safetywing.com/nomad-insurance?referenceID=24741702&utm_source=24741702&utm_medium=Ambassador
Like the video? Buy me a cofee!!
https://www.buymeacoffee.com/futureweb
Code to get started
https://github.com/future-wd/video-hugo-masonry-gallery/tree/start-here
Code of completed video
https://github.com/future-wd/video-hugo-masonry-gallery/
Docs:
https://getbootstrap.com/docs/5.0/examples/masonry/
VIDEO - Installing Hugo on windows https://youtu.be/l7PHRA8t4Bw
PLAYLIST - My other HUGO videos https://www.youtube.com/watch?v=sX1_R11wuxk&list=PLE92IfveVXuXTOjdPM_nleN6Cga_d3uJ-
0:00 - Introduction
#hugo #website #staticsite #staticsitegenerator #jamstack