Accessing routes filter/data from a custom template

Developer help Routing
1

Hi all,

I’ve been reading about routes, following previous discussions on the topic and I can’t seem to find a solution for what I’m after.

I want to show in a single view (route) a list of both posts and pages that have a given private tag. I have done this by coding a custom template that is assigned to my route, but when I try to further filter that list by other tags (primary), I don’t know how to pass the information to my template.

In my custom template I am using the Ghost API to fetch both posts and pages because I need them to be properly sorted by date (e.g., they can be interleaved, so I can’t just query first posts and then pages and output that, which I already had done without the API). Now what I need to do is to add a filter to further refine the list by a number of tags that would be defined by the route.

In routes.yaml I can’t find any way to make it work. I have tried:

 /test/:
    template: pagepost
    data:
      posts:
        type: browse
        resource: posts
        filter: "tag:otherTag"
      pages:
        type: browse
        resource: pages
        filter: "tag:otherTag"

Then read in my custom pagepost.hbs the filter data like this:

const filterTag = “{{@data.posts.filter}}” || “”;

This returns always an empty string.

I have tried also these other approaches (separately):

  /test/:
    template: pagepost
    filter: 'tag:otherTag'

  /test/:
    template: pagepost
    filter: tag.otherTag

  /test/:
    template: pagepost
    data: tag:otherTag

But I can’t read nothing from @data or @tag or anything in my custom template.

I could just create 5 different templates and have the filter done directly in the query, but it seems overkill (and bad practice) to replicate templates when there might be a proper mechanism to pass a variable to this custom template. This is what I struggle with: is there no way to programatically access these variables from the custom template? I read in the docs that I can, for example, do in routes:
data: tag.myTag

And access the data in my template as:

{{@tag}}
<h2>{{ slug }}</h2>
{{/tag}}

But I just get empty text.

I am sorry if this has been asked already or if it should be clear… I just can’t get this to work at all.

Thank you all!

2

My first reply (which is wrong - I missed a paragraph somewhere in what you were trying to do)
Your first format isn’t valid. Or if it is, I’ve just learned something. (I’m guessing it’s an AI hallucination.)

Your second group of formats should work - is one of those in routes, not collections? To get access to the data, you can just do {{title}} etc, from within the {{#tag}} … {{/tag}} context.

BTW, if you’re running locally, starting Ghost with ghost run -D gets you access to the output of the log helper. {{log this}} is magic for figuring out what’s available and what it is called.

My better reply:
There’s no collections for pages. They’re strictly one-off.

I’d think really hard about whether you really really need to have posts and pages. Maybe you need to just have posts, which would make this problem go away. (It would also make the posts searchable.)

Another option would be to use javascript to pull content from the api, sort it, and draw it on the page.

Oh, here’s another thought: Get goofy with css. Get the pages and the posts separately and loop over them. Add to the outer container of each one style="order: {{date published_at format='YYYYMMDD'}}" . Let the CSS do the sorting for you. (IMPORTANT: this is going to be a problem for tab navigation and screen readers, so I don’t love it. Sorting and rendering with JS is probably better.)

3

Thanks so much! I will admit to the first syntax that I posted coming from machine hallucinations - however, it did help me solve previous syntax problems :) Good thing to know, though, that it’s nonsense - I was going crazy looking at the docs and not finding parts of what AI gave me as suggestion.

Anyway, to the point: I have a site with both pages and posts, need all the content and I don’t want to redo all the pages as posts so as to have just one type of content. So I’m afraid that’s one thing I can’t let go of (for the time being at least!). This set of content need not be a Collection. I have a working version where this is a channel and it works fine but sadly I can’t respect the original publish order by date, interleaving posts and pages.

My current approach is indeed to use the API, fetch both posts and pages, sort them and then render them. This works fine. The part that didn’t work is getting the proper filter value from the routes to filter the query (the posts / pages returned by the API).

So I checked again since you mentioned that the routes should be fine (btw, they are simple routes, not Collections) and SHAME ON ME: I was using {{@tag}} in my custom template instead of {{#tag}}. So yes, if I use:

routes:
  /test/:
    template: pagepost
    data: tag.otherTag

I do get the tag’s data in my template and thus I can use it to build the query that I send the API. Hurray!

This solution will not be perfect anyway because the correct order between posts and pages will happen only within the number of results I get from the query (e.g. if I do limit=5 and I get 5 posts from date Z and 5 pages from Z,Z-1,Z-2,Z-3,Z-4, the next query might get another 5 posts from Z or Z-1, and the order would be incorrect when displayed as I do them in batches… not querying the whole history at once). But at least I think it will work for some time well enough.

Thank you so much once again @Cathy_Sarisky !