Sanity check for Handlebars logic

Themes
1

Hey everyone! I’m pretty new to Ghost and still learning, but I’m hoping someone can point me in the right direction.

Our theme has a unique footer on /inspiration and another footer everywhere else. This is thanks to footer.hbs (which is imported by default.hbs) containing some pretty simple logic (small sample below):

<a class="hidden lg:block lg:h-10 lg:w-56 {{#is "inspiration"}} fill-[#000]{{else}}fill-[#0166FF]{{/is}}" href="{{@site.url}}" aria-label="{{@site.title}}">

This {{#is “inspiration”}} is used throughout footer.hbs to adjust the footer based on the page.

I’d like to make it so the inspiration-styled footer is not only on /inspiration but also any post with the inspiration primary tag. I’ve been racking my brain on this and the best I’ve come up with is this:

<a class="hidden lg:block lg:h-10 lg:w-56 {{#is "inspiration"}} fill-[#000]{{else}}{{#post}}{{#has tag="inspiration"}} fill-[#000]{{else}} fill-[#0166FF]{{/has}}{{/post}}{{/is}}" href="{{@site.url}}" aria-label="{{@site.title}}">

Obviously, it’s not very graceful as, in the example, I have to specify the same color twice. The below doesn’t work, but it’s closer to what I would wish for:

<a class="hidden lg:block lg:h-10 lg:w-56 {{#has tag="inspiration"}} fill-[#000]{{else}} fill-[#0166FF]{{/has}}" href="{{@site.url}}" aria-label="{{@site.title}}">

or even

<a class="hidden lg:block lg:h-10 lg:w-56 {{#is "page, post"}}{{#has tag="inspiration"}} fill-[#000]{{else}} fill-[#0166FF]{{/has}}{{/post}}" href="{{@site.url}}" aria-label="{{@site.title}}">

Am I missing something obvious? Is there a better way to achive our desired outcome?

Thanks in advance!

2

Hey!

Welcome to Ghost. This theme looks great!

I think there are a few ways to achieve what you want to acheive. Logic in your theme. Routes that tie a custom template to the inspiration tag. CSS that gets applied only to posts with the tag.

Let me show you the third one.

Your body has a class name tied to the tag for the post, tag-inspiration, which gives you a really useful way to scope some CSS for pages that carry a specific tag.

Here’s a really brutal example. If I do this in dev tools:

body.tag-inspiration footer {
    display: none;
}

The footer is gone. In your style sheet, you can use that selector to build out the custom styling that applies to the posts that have this tag :+1:

Other ways are valid and might be better in certain use cases, but I hope that helps open things up for you.

2 Likes
4

Another option is to have two partials for the footer, one for the “inspiration” (footer-inspiration.hbs) style and the other for the rest of the site (footer-general.hbs).
You can remove all the checks within this partials, and instead apply the style/classes directly in each.

The logic can move to the default.hbs, where you can check which footer to include (the same logic you used in your working example, difference is you don’t have to do multiple checks for different elements):

{{#is "inspiration"}}
  {{> footer-inspiration}}
{{else}}
  {{#post}}
    {{#has tag="inspiration"}}
      {{> footer-inspiration}}
    {{else}}
      {{> footer-general}}
    {{/has}}
  {{/post}}
{{/is}}

Your last two examples don’t work because for the {{#has tag="..."}} helper to work, it has be in the post/page context, which is provided by {{#post}} or {{#page}}.

4 Likes
5

Big thanks to both of you!

@jonhickman , I ended up using your tip for another part of the same update. Super easy!

@brightthemes, the note about context makes perfect sense. I was running into weird behavior with the two footer.hbs files and logic so I ended up making it extra long (and simple).

{{#is "page"}}
    {{#is "inspiration"}}
       {{> footer-inspiration}}
    {{else}}
      {{> footer-default}}
   {{/is}}
{{/is}}
{{#is "post"}}
  {{#post}}
    {{#has tag="inspiration"}}
      {{> footer-inspiration}}
        {{else}}
          {{> footer-default}}
        {{/has}}
    {{/post}}
{{/is}}

Thanks again!

1 Like