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!
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
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!
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. :)
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/
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