Possibility to add custom helpers natively

So this has been proposed earlier multiple times, but no other answers since then and I can’t comment on that either… But I’ve been struggling with that today and had to find a workaround.

It’d be nice to be able to add custom helpers to ghost handlebars. I was trying to add a simple beginsWith. Saw all the linked posts in both the linked discussions, nothing works, tried to add straight to the core/frontend/helpers, despite no errors, Ghost does not recognize my new helper even though it loads it…

I’m more than happy to offer my work as a PR to help improve ghost this way, it’d be amazing to have this feature.

2 Likes

Hey @khaosdoctor :wave:

I’d be very interested to know what the end goal is for this, just in case there’s a solution with existing code within Ghost :blush:

1 Like

Hey David! Thanks for the reply!

I was trying to add the social icons following the ghost tutorial on secondary navs, but I wanted to add them dynamically, so I prefixed all labels with icon- and I wanted all the nav items with icon- to be turned into icons. However, the {{#has}} helper only works in specific properties and {{#if}} does not work for logic.

So. I tried to create a simple helper within core/frontend/helpers like:

module.exports = function begins_with (original, compare) { return original.startsWith(compare) }

Even though there were no errors in runtime, when I used the helper in the theme, I got an error on the website. The index.js file seemed ok, the helper was being loaded (I logged all the objects within the index.js file) but Ghost wasn’t recognizing the helper.

There could be a way for us to implement custom helpers inside a directory in the theme, like helpers and Ghost could read this directory along with the helpers it already has installed.

Ah I see what you mean. I would’ve thought this is all possible with CSS? You could make the default behaviour a string of text, for semantic labelling, and then hide it when the class name is prefixed with “icon-”. The label would then be applied as a class name. This would be a lot more manageable and would prevent you from editing the core of Ghost, editing the core effectively means you’re opting out of future updates

1 Like

That could be a possibility, but I’d need to remove the label from the element in CSS too… I think that’s a bit too much when talking about a simple template update on handlebars. That’s one use, but being able to add helpers not in the core, but in the theme, would be awesome to extend ghost’s functionalities.

This is probably a bad idea actually. Icons should have labelling so accessibility tools announce the label and tell the user what the link is. You may be able to re-use the semantic structure of the links and just modify the presentation to visually show an icon or a label :blush:

Yes, but I’d need to remove the visual text, not the label itself, via CSS. I think that might be just too much. It’s a lot of work to put icons in a menu… Which could be easily done with an if statement or with custom labels that could be used in a has helper.

Btw, thanks for the heads up on accessibility! I wasn’t putting labels in the icons :smiley:

I gave up on trying to do that and hardcoded the icons in the page, because it’d be way easier to understand, since it does not depend on anything but the HTML, and it’d be easier to give maintenance because it’s just HTML. Even if I had to add or remove icons.