Panel - footnotes

Hi! I try to create a blog template. For each blog post there is a page. In the blog post page there is a large textarea. I want to let the client to be able to upload images and foot notes and connect them to specific words or sentences in this textarea. Eventually I want that when the user click on some marked text it will show the relevant picture/side note.

I thought of some ways to do that through the ‘add link’ in the text area and then to let the client give id to each image or footnote and to add JS to connect between all of them. But I was wondering if there is anything that Kirby offers that can help me achieve it in an easier way through the textarea? is this too much to ask :sweat_smile:?

Thanks in advance!

In what form do these footnotes exist given that they are uploaded?

Here’s a demo for this page that we made with webflow. there are two kinds of footnotes: texts and images with captions. all of them are divs that are set to fixed position in the corner of the screen.

inside the text there are two kinds of ‘links’ (one for image, another one for text). each link is connected to an image/text, and by clicking on the link it shows the image/text (and shut the others)

I hope it was understood :slight_smile:

Markdown Extra has footnotes, but I’m not sure if that would render what you need: PHP Markdown Extra

The alternative would probably be two custom KirbyTags or kirbytext hooks: KirbyTags | Kirby CMS

There’s also this Footnotes plugin: GitHub - sylvainjule/kirby-footnotes: Footnotes plugin for Kirby 3

Adding to Sonja’s answer:

I recently created a blocks field for footnotes on the bottom of article pages…

…and a custom Kirbytag (with a custom button) that references these footnotes by ID…

…for this page: PRÄ|POSITION | #11 Joshua Groß

This way the footnote’s content is completely up to you and doesn’t crowd the actual text too much.

1 Like