Implementing footnotes in ghost pro - links and/or pop-ups

Developer help
1

It use footnotes in most of my blog posts and I’d like to make them a little more user-friendly… In one of two ways:

  • Linking footnote number (within the article) to the corresponding footnote text at the end, with a ‘go back’ link to take you back to the footnote number

  • A pop-up text-box, containing the footnote text, that appears when you mouseover the footnote number.

Can anyone take me through the process of doing this? Please note, my knowledge of code is close to absolute zero, so you’ll have spell it out in baby-steps, I’m afraid!

Many thanks,

Andrew Clifton

2

Hey Andrew, share your blog URL so we can understand more clearly what you want to do :slight_smile:

1 Like
3

Hi Jeff, thanks. The URL is https://www.thinkbubbles.org. Here’s a typical post, with quite a few footnotes: https://www.thinkbubbles.org/the-growth-delusion-1/

Andrew

4

@aclifton777 footnotes are already built into the editor, just using the Markdown Card.

Here is what it looks like to create a footnote in the Ghost editor in the Markdown Card:

footnotes-in-ghost
footnotes-in-ghost932×572 26.7 KB

To create a page looking like this in the default Casper theme:

footnotes-displayed-in-casper
footnotes-displayed-in-casper668×785 32.4 KB

Now here is that very same page where I have just selected a different theme a different theme which has a built-in feature to display footnotes in a popup when the number is clicked:

footnotes-popups-in-ghost

Here is another post with some further tips:

2 Likes
5

Thanks for this. Very helpful!

Andrew

6

You’re most welcome, @aclifton777! That Footnotes Popup feature can be integrated into any theme. It can also be customized with different popup behaviors (i.e. hovering over the number instead of clicking on it to trigger the popup) and positioning, and of course different looks.

7

Here are two more options…