Best way to add handlebars helpers to custom theme?

[etanb]

Hi there,

I’ve seen a lot of activity on this topic of adding handlebars helpers to your ghost theme in the past (Safely Creating Custom Handlebars Helpers For Ghost Blogs) but wanted to see what the mainstream best way is?

The impetus of my issue is that, for whatever reason, {{ghost_head}} automatically outputs all the tags for that post in the meta data and we don’t want that at all. I’m not sure why that’s default functionality but we’d like to remove it.

Either help with removing that meta data or how to add handlebars helpers to a custom blog theme would be great.

[John]

@etanb

for whatever reason, {{ghost_head}} automatically outputs all the tags for that post in the meta data and we don’t want that at all. I’m not sure why that’s default functionality

Because that’s how tags are intended to work, they are public. If you don’t want a tag to be output publicly, then use an internal tag, prefixed with a hash. Eg. #video.

[etanb]

Good to know! Is that in the docs? I missed that when I checked the section for {{ghost_head}}. Would be happy to add for you.

However, if you use the #video, or some such, for a tag, it still outputs:

<meta name="twitter:label2" content="Filed under">

Albeit it is empty. Is there a way to remove that meta tag entirely if there’s only a hashtag tag associated with a post?

[etanb]

Hmmm the # method won’t work for me since I’m using tags on the theme side to output certain stuff (ie: tag === blue, make header blue) and it seems like if you do #blue it doesn’t output anything to {{tags}}.

Are custom taxonomies coming anytime ?

Besides that, it seems like adding my own handlebar helper is the way to go. Any tips there would be great.

[etanb]

Closing the loop here, yes you can make internal tags visible in the .hbs template: {{tags visibility="all"}}

Would still love help with custom helpers

[Kevin]

@etanb

I’m using tags on the theme side to output certain stuff (ie: tag === blue, make header blue)

I think you may want to look at the {{#has}} helper?

<header class="my-header {{#has tag="#blue"}}my-header--blue{{/has}}">

[Hannah]

There isn’t a way to add a custom helper right now without editing core files. We fully intend to add a way to do this, but right now we’re focused on making sure the built-in API is as good as it possibly can be for everyone.

We believe our theme API is incredibly powerful, but we also know it’s really not that well documented.

In the majority of cases, whatever it is you want to do can already be achieved with the tools available.

If you come across a genuine limitation, we encourage you to come and share it with us. This way we can not only make sure that the tools are great for everyone, but that your Ghost install stays performant and easy to upgrade

Some recent examples of helper’s we’ve added thanks to community suggestions include the {{reading_time}} helper, as well as all of the recent additions to the {{#has}}.

It’s also worth noting that removing {{ghost_head}} in favour of your own helper is really not a good solution here - removing {{ghost_head}} would make the theme invalid. Having finer control over the meta data output is a legitimate concern and something we’re thinking about - but it wouldn’t be solved via a custom helper.

[etanb]

{{has}} helper looks incredibly useful, I appreciate the nudge in that direction!

As for custom helpers, as our theme gets more complex, I can see us wanted to do more robust customization. Mostly we’d use it for custom taxonomies that I think internal tags + {{has}} can handle.

Definitely won’t be removing {{ghost_head}}, wanted some granular information on it! Maybe instead of string, it could be delivered as an object? Or have an attribute to do so?

[etanb]

Here’s a good use case for a custom helper:

We want the first word of each blog post a certain style. Sort of akin to the image I’ve attached. I’d like to do it without adding HTML to the WYSIWYG editor since the authors are all non-technical. (yes, there is a :first-letter selector but we want the whole word).

[HauntedThemes]

The only way to achive that at this moment is with Javascript. Something like:

$(".kg-card-markdown p:first-of-type").html(function(){
  var text= $(this).text().trim().split(" ");
  var first = text.shift();
  return (text.length > 0 ? "<span class='red'>"+ first + "</span> " : first) + text.join(" ");
});

A small demo should help.

I don’t think kg-card-markdown class is the best way to do it. Might change in the future. You should change to something that is inside your post.hbs.