A way to get current route using handlebars?

Themes
1

I have a page that’s a collection of posts called portfolio.hbs, and I have a routes file that uses this page in a couple ways.

routes:
  /:
    controller: channel
    filter: tag:-portfolio+tag:-project
    template: homepage

  /portfolio/figure-drawing/:
    controller: channel
    filter: tag:figure-drawing
    template: portfolio

  /portfolio/pixel-art/:
    controller: channel
    filter: tag:pixel-art
    template: portfolio

I want to have a different icon shown on portfolio/pixel-art and a different icon on portfolio/figure-drawing, but I’m not sure how to do that properly? The only answer I can think of is making two different handle bars pages with different icons then make the shared code a partial, but I feel there might be another solution.

Thanks!

2

Take a look at https://ghost.org/docs/themes/helpers/has/

In your portfolio.hbs

                    {{#has tag="figure-drawing"}}
                        <img src="...">
                    {{else}}
                       {{> icons/pixel-art}}
                   {{/has}}
1 Like
3

Thanks for reply! I did try has tags before, but it didn’t quite work and I’m not sure why. I just modified the code of porfolio.hbs (which is just a modified version of edge’s index.hbs)

{{!< default}}

<main class="gh-main gh-outer site-main">
    {{#has tag="figure-drawing"}}
        <div class="page-header-image">
            <img src="/assets/images/figures_headerx2.png" alt="Figures">
        </div>
        <div class="page-header-background">
            <img src="/assets/images/header_backgroundV2x2.png" alt="">
        </div>
    {{else}}
        {{#has tag="pixel-art"}}
            <div class="page-header-image">
                <img src="/assets/images/pixelart_headerx2.png" alt="Pixel Art">
            </div>
            <div class="page-header-background">
                <img src="/assets/images/header_backgroundV2x2.png" alt="">
            </div>
        {{/has}}
    {{/has}}

    <div class="post-feed gh-feed has-header">
        <div class="grid-item grid-sizer"></div>
        {{#foreach posts}}
            {{> "loop-portfolio"}}
        {{/foreach}}
    </div>

    <pre>
        {{log page}}
    </pre>
</main>

It still doesn’t seem to work with tags, although the inner html works fine when I remove the has, but of course it doesn’t switch based off the route. I was thinking the has tag needs be used in the scope of a post, which is why I didn’t originally try it in this context, but I’m still very new to ghost.

Anyways any all help is appreciated, thanks!

4

Oh, hang on - are you trying to change the behavior of the portfolio template, not posts in the portfolio/figure-drawing collection?

Unfortunately, I think two separate templates will be the way to go. But you can consider something like this:

portfolio-figure.hbs:

{{!< default }}
{{> sharedpartial icon="figure"}}

(Do the same for portfolio-pixel, but set icon to “pixel”)

Then in partials/sharedpartial.hbs:

... lots of stuff ...
{{#match icon "figure"}} 
  ... do some stuff ...
{{else}}
  ... do some other stuff
{{/match}} 
  ... more shared stuff

Note that depending on what context you’re in when you have that match check, you might need ../icon or even ../../icon. Context can be ‘fun’.

I highly recommend starting Ghost with ghost run -D, which gets you lots of logging to the console, and then adding {{log icon}} or {{log this}} or {{log …/icon}} etc to check that values are what you’re expecting. Much easier than silent failure. :)

5

Only a post has a tag like figure-drawing or pixel-art.
Try the code from outside the post loop

{{#has tag="figure-drawing"}} 
 ....
{{else}}
...
{{/has}}

inside the {{#foreach posts}} loop:

 <div class="grid-item grid-sizer"></div>
        {{#foreach posts}}

            {{log this}}

             {{#has tag="figure-drawing"}} 
                 ...
                {{else}}
                 ...
              {{/has}}
           
           {{> "loop-portfolio"}}
        {{/foreach}}

Very useful is to debug the posts {{log this}}: ghost run -D
https://ghost.org/tutorials/debug/

6

Thanks for the responses! I ended up using Cathy’s answer and it worked of course plus the shared partial for the icons was a nice add for tidiness. Also thanks for the tips on debugging Joe/Cathy, will definitely help me find issues faster in the future!

1 Like