Displaying Data From Collections In Hugo

Made this page to display the exported data from the Collections database app on ios using Hugo. The json is looped over and placed into cards made with CSS flexbox containers for practise.

how it works Link to heading

put the documents.json in the data folder
layouts/shortcodes/collections.html is the template
make a new markdown file in content and add the shortcode

add your own images Link to heading

put the media folder in static/images/ for the pictures
I didn’t Include images in this so random birds will load when you refresh.
the code in this project fetches a random bird from unsplash with an API
if you want to use this in your own hugo site sans birds, copy it from here

the HTML Link to heading

 0
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <div class="cards"> <!-- Move .cards div outside of the loop -->
        {{ $data := getJSON "data/documents.json" }}
        {{ range $item := $data }}
            <div class="card">
                {{ $item.Name }} <br />
                {{ $item.Type }} <br />
                {{ $item.Field }} <br/> 
                {{ with index $item.Picture 0 }}
                    <img src="/images/media/{{ . }}" alt="Picture">
                {{ end }}
            </div>
        {{ end }}
    </div> <!-- Close .cards div -->

OPTIONAL Link to heading

add this to your config.toml to show up in your homepage menu

[[languages.en.menu.main]]
identifier = 'collections'
name = 'collections'
url = '/collections'

Places Of Interest

7 eleven

7 spice

Appleview