Limiting number of items in routes.yaml

Developer help Routing
1

I am setting up a community events calendar with an Events tag by putting a date in the Code Injection footer, such as ‘2024-05-05’, and using the following routes.yaml to sort the results.

routes:
  /events/:
    controller: channel
    order: featured desc, codeinjection_foot asc
    filter: primary_tag:events
    permalink: /events/
    data: tag.events
    template: tag

But I would like to only display upcoming events, not past events. I wish I could change the filter to
filter: primary_tag:events+codeinjection_foot~^now+10d
or
filter: primary_tag:events+codeinjection_foot:>'2024-05-01'

If I can’t filter this, is it possible to limit the number of items using routes.yaml? I created a template tag-events.hbs but it didn’t seem to allow that option either. I couldn’t see a place for it either if I created a custom default.hbs. I could create hidden tags for each month until the end of time, but that would put 80-100 events on each page. Any other suggestions?

2

I think you’re going to need another approach. You can’t publish a post with a future date.

3

I think I am trying to use a similar approach to what you did: How to add events in ghost cms

As you know, the logical solution would be to use the date of the event as the publish date. But since that’s not possible with Ghost right now, I had to put the event date into another field. Before settling on Code Injection Footer, as I believe you did, I had also tried the Excerpt and the Featured Image Alt attribute fields.

Now I realize I’ve seen several of your blog posts, but did you ever get the chance to post about how you ended up handling events?

4

Sorry - I missed that you were using the codeinjection_foot!

The write-up about this client is still sitting in drafts! They didn’t need anything really robust, so we’re just storing the future date in the code injection footer (as described in the post you linked) and then displaying it on the post.

I don’t think you can pass the current date into routing in some way. (But I’m interested if anyone knows otherwise!!)

A couple options (possibly goofy - I’m just spitballing here):

  • use javascript. Make a request to the API to get posts with the right tag and codeinjection_foot :> [today’s date in as formatted for code injection]. You get a lot more control with javascript than with handlebars, but I like this approach better below the fold than above it, due to flicker while the javascript retrieves the content. (You can deal with this by animating the content onto the page in some way.)

  • tag posts with tags for year, month, and day. (That’s a lot of tags, but not a total explosion.) Write some handlebars (#get request, not using routing) that only retrieves posts that are year > thisyear or (year == this year + month > this month) or (month == this month && day >= thisday). If you don’t have so many future events that you’d need to paginate, this could be pretty viable. (Pagination would be a bit of a pain, but not impossible, either. You’d just have to do it without the helper.) Handlebars can be faster than JS, since you aren’t waiting for the browser to load the javascript and then make the request for you.

  • ditch Ghost for events and pull in an external calendar of some sort. I’ve got a current client (https://goldentoday.com) whose site integrates a Google calendar. Synchronization needs a little thought, but not impossible.

It’s probably time to update this old blog post. Can we add events to Ghost? I’ve learned a lot since I wrote it!

5

Thanks! Those are great ideas. I got good results from curl "http://localhost:2368/ghost/api/content/posts/?key=key&filter=codeinjection_foot:>now-1d" so I would just need to parse that with JavaScript.

1 Like
6

I now have an Events page! I may not have done it correctly.

  • I tag certain posts as Events.
  • I modified routes.yaml (see above, except the template should be tag-events).
  • I put the event date into the Code Injection Footer (see above).
  • I created a tag-events.hbs that uses components/post-list-events instead of components/post-list.
  • I created post-list-events to use #get instead of #match as post-list does. The code below would be disastrous for archive pages, except that only the Events page uses components/post-list-events.
{{!-- Tag and author pages --}}
    {{#get "posts" include="tags,authors" 
order="codeinjection_foot asc" 
filter="codeinjection_foot:>now-1d" 
limit=@config.posts_per_page as |recent|}}
     {{#foreach posts}}
         {{> "post-card" lazyLoad=true}}
      {{/foreach}}
   {{/get}}
1 Like