Is it possible to build a carousel on a post using HUGO

support
1

Hello everyone,

I hope you are doing great in those harsh times.

I am one of those responsible for the designers of an non-profit experimental advertising agency that the college where I study incubates. I used to make all my team’s portfolios by hand but nowadays the team has grown considerably and I can’t manage to manage all the portfolios and most people are not easy with programming.

I discovered the HUGO+Netlify+Forestry combination a few weeks ago and I’ve been studying a lot about it but I haven’t found any theme that really was what I’ve been looking for. I really liked how Hugo works so I didn’t want to have to switch platforms now.

The problem is, I found a perfect template for what I’ve been looking for but it was written for Gatsby+Contenful and I haven’t been able to learn these platforms enough to teach my lab mates how to manage their own portfolios.

Is it possible to build something like this using HUGO? The thing I’m interested the most is the ability to generate carousels by adding images using a CMS like Forestry. I know my way around HTML, CSS and I can handle java script if it’s well documented.Am I daydreaming or building something like this is possible using HUGO? What should I look for to start building it? Any help is appreciated as I’m kinda stuck right now.

Thanks in advance

2

Hi, is possible for sure
But are you sure that you want forestry, as my understanding is that, it will close the door soon.

You can check if possible for you to play with shortcodes.
If you have something builded already share the repo please.

Cheers

3

You can try a layout like this for the carousel part and style it with CSS. But I don’t know how it will work with Forestry.

{{ range (site.GetPage "project").Pages }}
  <div class="grid-item">
   {{ with .Resources.GetMatch "*.jpg" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
<h2>{{ .Title }}</h2>
{{ .Content }}
</div>
{{ end }}

Content structure

content
│  
│   _index.md
│
└───project
    ├───iceland
    │      iceland.jpg
    │       index.md
    │
    ├───poland
    │       poland.jpg
    │       index.md
    │
    └───spain
            spain.jpg
            index.md

An example of index.md file.

---
title: Spain
date: xxx
draft: false
---
Your description here...

Of course you are free to rename the folders and files to your liking (or change the heading from a h2).

(credit. Also see the code if you want to resize your images)

4

About forestry, it was the first CMS I ever used with HUGO but I’m pretty sure I can learn another free one. Thanks everyone!