Showing line break in post excerpt

Hey, I have the post’s excerpt displayed on the post cards on the index page, but line breaks don’t show up.
How could I make sure if I make a line break when writing the excerpt it shows up at {{Excerpt}} too?

Hey, my journey of adding breaklines to excerpts continues.
My idea is adding a custom handlebars helper. The following should do the job:

Handlebars.registerHelper('breaklines', function(text) {
    text = Handlebars.Utils.escapeExpression(text);
    text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
    return new Handlebars.SafeString(text);
});

Where should I add this to solve my problems with excerpt breaklines?

I’ve merged these 2 topics - XY problems are difficult to navigate. Can you spend some time explaining in more detail what your original problem is? Maybe then someone can then help with that.

Someone correct me if I am wrong; you cannot add custom helpers without editing the core. Ghost uses express-hbs for the helper functions so have a look there.

So you still wanna edit the core? No proplem. Have a look inside versions/<YOUR-VERSION>/core/frontend/services/theme-engine/handlebars/helpers.js and see the structure. Good luck.

@Hannah We would like to have this feature for custom themes, please, including pro users. Should be easily enough to get files from the theme dir.

Yes, theme helpers would be amazing to have! Should I just add the same helper i described above or do I need to modify it to work and show up?

Have a look at versions/4.8.0/core/frontend/helpers/encode.js then create a file called linebreaks or whatever: versions/4.8.0/core/frontend/helpers/linebreaks.js:

// versions/4.8.0/core/frontend/helpers/linebreaks.js

const {SafeString} = require('../services/proxy');

module.exports = function linebreaks(string, options) {
    const  text = string.replace(/(\r\n|\n|\r)/gm, '<br>');
    return new SafeString(text);
};

Magic happens in versions/4.8.0/core/frontend/helpers/index.js (line 9) Then in versions/4.8.0/core/frontend/services/theme-engine/handlebars/helpers.js:

// versions/4.8.0/core/frontend/services/theme-engine/handlebars/helpers.js
const registerAllCoreHelpers = function registerAllCoreHelpers() {
    // Register theme helpers
    registerThemeHelper('asset', coreHelpers.asset);
    
    [..]
    
    // This is your custom file.
    registerThemeHelper('linebreaks', coreHelpers.linebreaks);

   [..]    
};

Usage, I think:

{{linebreaks <p>The wheels on the bus goes round and round</p>}}

Do note that this file gets overwritten whenever you update Ghost.

EDIT:

Even better, modify the excerpt.js file itself :wink:

Almost all of the use cases for custom helpers are XY problems like this one where actually the issue is something else.

https://xyproblem.info/

Therefore there are no plans to add support for custom helpers.

It is far better both for you and for the community if you share and explain your original problem properly so we can look at fixing that, which was the answer I already gave.

1 Like

Hey, I have the post’s excerpt displayed on the post cards on the index page, but line breaks don’t show up.
How could I make sure if I make a line break when writing the excerpt it shows up at {{Excerpt}} too?

Not op here, but I thought the issue was pretty obvious and articulated well enough for anyone to understand: post excerpts do not support line breaks. OP apparently desires line breaks in excerpts. I can sympathize with OP as I have run into situations where I would like to have the option to use line breaks.

Anyhow, this is my understanding of his intent. Does Ghost really intend to add this functionality?

I’d disagree with this statement. Custom helpers could be a game changer. One could be to exclude specific posts when filtering. Another one could be on the homepage when using the foreach: show the first n post then show a banner then show the rest of the post. Millions of use cases I could think of. This will be for another post as I’m hijacking here.

When I added the registerThemeHelper('linebreaks', coreHelpers.linebreaks); line to helpers.js and ran ghost restart it resulted in giving a 502 error when visiting the website or when trying to deploy a new theme (through GitHub autodeploy).

:face_with_monocle::face_with_monocle::face_with_monocle: I havent modified the core since version 1 :joy: Ok… try in these locations:

current/core/frontend/helpers/linebreaks.js

&&

current/core/frontend/services/theme-engine/handlebars/helpers.js

Usage:

{{linebreaks "<p>The wheels on the bus <br> goes round and round</p>"}}

Can confirm the above works when I tried.

Thanks! Seems to be working now!

1 Like

Need just a bit more help. I tried using the same linebreak helper at tags.hbs for the description. since Ghost seems to just ignore linebreaks, but would not work resulting in a deployment error. I tried finding the description.js helper file but failed. Anyone have an idea how to show the linebreaks in a tag’s description?

:wave:t3: @leventdev, you’ll need to provide detailed information on what you have done. We need examples of what you did. To receive help from the community, you need to provide clear examples.

Do note you may not receive any help since you’ve edit the core but I’ll try to help whenever I can. I’m against editing the core, FYI.

I have no issues when I tried it:

<section class="post-card-excerpt">
        <p>
            {{#if description}}
            {{linebreaks description}}
            {{else}}
            A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
            {{/if}}
        </p>
    </section>

Not sure I can help you further since this works for me.

@SylarRuby I just tried adding the same linebreaks helper to the tag.hbs file

<section class="outer">
    <div class="inner posts">
        <div class="post-feed">

            {{#tag}}
            <div class="post-card-resp">
                <h1 class="post-card-resp post-card-title">{{name}}</h1>
                    {{#if description}}
                        <p class="post-card-resp post-card-title">{{linebreaks description}}</p>
                    {{/if}}
            </div>
            {{/tag}}
            

            {{#foreach posts}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}

            {{/foreach}}

        </div>
    </div>
</section>
``` but it just doesnt add the linebreak.

If you look back on your code:

It will only break on the return line. You need to put a return in your description:

Results in…

Tried again, but when i tried to deploy the theme to my ghost server, the autodeploy failed with

Error [ThemeValidationError]: Theme is not compatible or contains errors.

This error is definitely caused by the linebreaks helper, since that is the only change I commited.

Hi @leventdev I was looking for a solution as well and found that triple brackets don’t strip the HTML:

{{#if custom_excerpt}}
    <p class="post-content-excerpt">{{{custom_excerpt}}}</p>
{{/if}}

Live example: https://haaifaai.nl - mouse overs show the post title and custom excerpt. Hope this helps you, cheers!

Thanks for the answer @deeds but unfortunately this still won’t work. The auto deploy fails with the exact same message.

Probably a big hassle, but could you revert your code back to default? I haven’t made any adjustments to core javascript files and the triple brackets work for me.