Add customized handlebars helpers?

Currently, there is no way to do anything fancy with ghost themes as there is no way to have any customized handlebars helpers.

That leaves any manipulation of data in the front-end to be done through JS, obviously harming SEO and experience for the user (the design “jumps” as manipulations apply).

Can we have a way to add customized helpers?
Or at least the very useful handlebars-helpers - npm included?

The helpers that come with Ghost are quite powerful; if you share what you’re trying to do, Ghost might already have support for it! :slightly_smiling_face:

I’m trying to get some customized metadata on posts using tags.
Now, you have the has helper, but the metadata I want to set is dynamic so I need the value.

for example, set a tag like #field:technology, so I want to get the tags that start with field and then slice on the : to get the technology part alone

Hi @snirda,
I’ve implemented something similar a few weeks ago.

1 - Add custom helper

First, you need to add a custom helper to your ghost app. To do so, create file for your helper in :
core/frontend/helper
This is where all of Ghost’s helpers live and are automatically loaded on every ghost startup.

Beware that changing ghost versions will remove these custom helpers.

2 - Create helper

In your newly created file (extractTag.js in my case), add the following content :

// # Extract content from custom tags with a prefix.
// Usage: `{{extractTag tags=[] prefix=''}}`
//
// Returns a specific tag value from a query prefix.
//
const { SafeString } = require('../services/rendering');

module.exports = function extractTag(tags=[], prefix="") {
    for (let tag of tags) {
        let split = tag.name.split(':');

        if (split.length != 2) {
            continue;
        } else if (split[0] == prefix) {
            return new SafeString(split[1]);
        }
    }
    return new SafeString(`No tag found with prefix: ${prefix}.`);
};

I use it to extract content from custom tags with any prefix followed by the ‘:’ separator.

3 - Usage

Example:

{{#get "posts" limit="1" include="tags"}}
	{{#foreach posts}}
		<div>{{extractTag tags "location"}}</div>
	{{else}}
		<p>No posts!</p>
	{{/foreach}}
{{/get}}

Hope this helps! Cheers :grinning:

It does, and I actually already did it myself.
I was hoping for a solution for the hosted managed ghost service, but sadly this (and some additional bonuses) pushed me toward self-hosting.
If anything the tragedy is that I was willing and wanting to pay for Ghost and contribute to the efforts

I’m self hosting so I hadn’t thought of these limitations. Sure is a bummer for Pro users!
When using tags to store data, beware of special characters: Escape special characters in tags for filtering - #5 by charliebegood

1 Like