Best way to show first 5 upcoming events?

support
1

I would like to find a better way to show the first 5 upcoming events on the homepage of our new site.

At the moment, we are

  1. getting all of the pages in the events section
  2. reversing them so the whole list goes from oldest (past events) to latest (future dates).
  3. and finally only displaying the event if the event is today or in the future.

[full code is below]

Now we’d like to only show the next 5 events on the homepage and have a link to our full events on another page. And this cannot work with the existing setup — because any form of limiting I do in the range, is applied to the FULL list of events (past & present), and not just the upcoming events.

Is there a better way that I should be doing this? :slight_smile:

Here is a link to the preview of the new site https://demo.digital.gov/#events_featured
Here is a link to the existing file in GitHub: https://github.com/GSA/digitalgov.gov/blob/demo/themes/digital.gov/layouts/partials/core/home/events_featured.html

          {{- $events := (where .Data.Pages "Section" "events").Reverse -}}
          {{- range $events -}}
            {{- $now := now.Format "2006-01-02" -}}
            {{- $start := .Date.Format "2006-01-02" -}}
            {{- $end := dateFormat "2006-01-02" .Params.End_date -}}

            {{- if or (ge $start $now) (ge $end $now)}}
            <article class="featured_event promo" data-edit-this="{{- .File.Path -}}">
                 
               ... event card html goes here ...

            </article>
            {{- end -}}
          {{- end -}}
1 Like
2 
{{ $events := where .Site.RegularPages  "Section" "events" }}
{{ $events := $events | intersect (where $events "Date" "ge" now) | first 5 }}

Totally untested, but something like the above should work.

3 Likes
3

That is perfect. Thank you @bep. I didn’t know about intersect until now.

4

I’m having bad luck getting this to work, but I am a little rusty with my Hugo skills.

I’m using the netlify/victor-hugo boilerplate, and I’ve created a folder in /content/ called shows that I have upcoming events in with the date variable set as the date of the event. In my index.html in /layouts/, I’ve put the code above (modifying ‘events’ to be ‘shows’ in my case), but nothing displays!

Specifically, here is the file and code https://github.com/epatr/stamusic-hugo/blob/wordpress-shows/site/layouts/index.html:

{{ $events := where .Site.RegularPages "Section" "shows" }}
{{ $events := $events | intersect (where $events "Date" "ge" now) | first 5 }}
{{- range $events -}}
    {{ partial "li.html" . }}
{{- end -}}

Here is an example of a file in the shows folder: https://raw.githubusercontent.com/epatr/stamusic-hugo/wordpress-shows/site/content/shows/2019/02-02-minimum-rage-reels-burl-liquid-limbs-sarbez.md

I checked the GSA/digitalgov.gov repository linked above, and it looks identical to what I’ve done, so maybe I’m just missing something very obvious and need a second pair of eyes.

5

Hi,

Are you building with the --buildFuture / -F flag? Otherwise, future-dated content won’t be built, so there will never be a future show.

2 Likes
6

Didn’t even consider that. I was curious why it worked when I added the buildDrafts parameter, but I didn’t think to look into other build_ options.

For any future visitors, it’s as simple as adding buildFuture = true to your config.toml

Thanks @pointyfar!

1 Like