Add customized handlebars helpers?

Themes
1

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?

2

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:

3

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

4

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:

5

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

1 Like
6

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
7

Hi @ charliebegood How do you handle the gscan error when uploading the theme. I know you can add helpers in lib/specs/v3.js but this doesn’t seem like a good way even in a self hosted enviroment.

8

Hi @Torsten_Zander,

Yes you’re right it’s not really a solution. I’ve actually created a script that temporarily removes all unknown helpers when zipping the theme. Once the theme is uploaded, I run another script to “re-install” the helpers.

If you don’t have too many, then the best is to comment out the lines and uncomment them once the theme is uploaded.

Hope this helps :slight_smile:

9

Thanks @charliebegood

ok thanks, I see you also work your way around. Since I build my own docker image I will probably add and modify the files while building it. This way I can handle updates easier.

Hopefully there will be a better solution in future releases.

10

hi i am new in the forum and i was looking for something similar to my problem. I am looking for a method to create a custom grid in my home. I would like to create 6 lines which will go from 6 to 12 posts at the most. A post takes up an entire line if the post contains a certain tag called “Gold”. otherwise the post will take up half the line. In this case the line will be completed by the next post not containing Gold tag. I already have a clear idea of ​​the (trivial) algorithmic strategy to obtain an ordering that allows me to do this. But being new to using ghost I don’t understand how to create a helper which took a number of posts to give me this sorted array on which to then call mine post-card.hbs for render post. in particular I have problems in understanding where to write my function and how to register it. my version is 4.23.