Footnote support in editor

These are two excellent points.

To reiterate:—

  1. Whilst footnotes are now easy using Ulysses or whatever to populate a markdown box on a page, footnotes should also transcribe across several Markdown boxes on a page to one single set of footnotes at the bottom of the page. So, not multiple sets of footnotes, each with a number [1] etc at the bottom of each markdown box . Indeed, it should not just work with markdown boxes. In fact it will have to work in a different way.

  2. Ghost, as a well known proponent of evidence based blogging and an advocate for that and for independent blogging, should prioritise this feature. It’s not ‘pretty’ and it’s not about pictures and so forth. It’s boring difficult coding. But it’s important, please get it done :blush:

6 Likes

I checked to see if I could find any references to footnote support in the Lexical editor framework being used, and I can’t find it. That doesn’t mean it doesn’t support footnotes, just that it doesn’t include any special handling for them.

1 Like

Thanks for looking. Footnotes work fine, but if there is more than one required in a page and all are to be collated at the bottom of the page, then all the page text content must be in one Markdown box. Any other boxes must be either above that or below (obviously!) which has an impact on page design. Not a problem for a simple text-based page with a picture above and something below the footnotes.

Alright guys, I stumbled over this topic because I was looking for a footnote solution but there still seems to be no native Ghost implementation.

I have absolutely zero coding skills but with 2h of fiddling and try and error here is a workaround that expands on the proposed solution from @Kevin but with proper formatting including backlinking so everything looks neat.

It requires to add an html card at the location for the footnote collection (snippet 2) as well as another html card for every passage you want to reference (snippet 1). In all cards you replace the desired text and edit the numbers for the referencing within the code for each footnote manually (1, 2, 3, 4…).

It’s quite a hastle and subtly disturbing if you’re just a writer and not an ex-Google Tech lead but it solves the problem.

If anyone finds that helpful, send me some love, I’m going to bed now.

Cheers!

Snippet 1:

<p>This is the text for the footnote.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>

Snippet 2:

<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>This is the text for the first footnote with an and-sign: &amp; more text in the first footnote with a line break:<br>
This is the new line for the first footnote. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>This is the text for the second footnote. <a href="#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>

The result looks like this (editor):

And post:

5 Likes

This is a huge improvement on what’s currently required.

At present, using markdown, it is possible to achieve the same, just so long as the whole text of the post is in a single HTML Card, plus there being no additional cards or text below the the single HTML Card with the footnotes (because, if there is, then the footnotes appear above the additional cards or text). So, currently (and fortunately now solved by @kutschkerf), if the footnotes are referenced from more than one HTML Card, then they appear at the bottom of each of those cards. Which is basically such a rigid system that it’s rarely applicable to anything but purely text pages.

@kutschkerf offers a solution that circumvent that ‘single html card’ limitation

It does require a disciplined use of saved Snippets (the Snippets we have been given today by @kutschkerf) on every new post/page with footnotes. Which is not ideal and not as good as pre-2018.

But thank you. This is workable and not too time consuming and allows several cards of different types to be used on one page/post with the footnote references remaining organised correctly at the bottom of the page/post where the second ‘Snippet’ we have been shown today should be placed.

I still maintain that it’s extraordinary that Ghost does not offer this out of the box.

Ghost is a bastion of evidence-based blogging - why is citation not built in?

Oh, and that not enough users have upvoted it is a poor excuse.

Why?

Because Ghost should ALSO follow its Mission statement, not just its user ‘ticks’ here.

Moderators: A reminder from your Mission Statement:

Our mission is to create the best open source tools for independent journalists and writers across the world, and have a real impact on the future of online media.

Rant over.

5 Likes

I suggest to save the code blocks as snippets in the Ghost editor so they can be summoned with “/“ and the first one or two letters of the snippet name. If you do a lot of referencing, you should get fairly quick soon.

1 Like

Agreed :blush: And thanks :blush:

I’ve got some code that makes a better user experience than this. Let me see if I can dig it up.

(Link updated)

9 Likes

The new Mission Statement is

Turn your audience into a business.

Supporting footnotes well is a non-trivial piece of work. The feature is marked as planned and we’ve been working towards it for a very long time.

Our previous editor framework had a fixed storage format and a few other limitations that meant we just couldn’t add footnote support to it. That was one of the key drivers to the year+ engineering effort that went in to re-writing our editor with an entirely new framework underneath.

The footnotes feature request hasn’t been forgotten/ignored, it’s still planned and we’re still working towards it. When there are updates we’ll post them here.

14 Likes

Glad to hear it, it did felt that way :grimacing:

Is your implementation similar to this one from @dan ?

I’ve tried setting that up, but no luck.

Yup, that’s Bigfoot, same as what I’m using.

What exactly about your setup isn’t working, and/or do you have live page to look at?

Thanks, @Stromfeldt.

The live page is: https://www.redlinealpine.com/how-to-train-pure-speed/

From what I can tell you’ve loaded all the JS and CSS properly, as well as inserted the footnote content properly, but having skimmed through Dan’s post I think he may have something wrong/missing there, which you seem to have replicated. Adding a link to the footnote isn’t as simple as inserting ^[1]^, as Dan mentions, but requires some HTML. Which looks like this:

<p>
    <sup id="fnref:1">
        <a href="#fn:1" rel="footnote">1</a>
    </sup>
</p>

You can read about that linkage on the Bigfoot site via the usage section.

Thanks a lot for looking into this.

I think that I’ve made all of the necessary changes, but it’s still not working… I updated the bigfoot script links as well, but still no luck.

An error in the source console is:

The trouble here is that those scripts—jquery and bigfoot—don’t actually live at those locations. When the browser tries to load them, they 404.

You need to download the bigfoot code and include it in your theme or load the footnote library via a CDN (if available).

Doh. Thanks. I see what you mean now.

I’ve loaded them via CDN, but still no luck.

Hi all, is there an update on this? I’m wondering how do I use footnotes for my blog :)

1 Like