Hey everyone,
looks like I could use some help
I’m trying to get bigfoot.js to recognize the footnote markup used by Webflow’s RTF fields. But even after taking a basic Jquery course I don’t even know where to start. (Probably, taking a javascript course would have been more useful but what I want seems to demand a more advanced skillset anyway.)
Okay, so Bigfoot.js is installed and running on my site. The problem is the script is looking for footnotes that look like this:
<sup data-footnote-backlink-ref="ffn3" data-footnote-ref="#fn3"> <a id="ffn3" href="#fn3" class="footnote">3</a></sup>`
but the RTF-compiler changes the markup to this:
<a href="#fn7" data-footnote-backlink-ref="" data-footnote-ref="#fn7">7</a>
As a consequence bigfoot.js is incapable of recognizing the footnotes in my blog posts.
You can see this in action here if you scroll down and look at the sidebar. You can see the tiny little bubbles that indicate a footnote. Click them, it’s fun
http://foolzevolution.webflow.io/articles
Obviously, it works because I embedded the text as code.
However, if you take a look at a page on my collection template, where (so far) I can’t embed the text as code, it looks like this:
http://foolzevolution.webflow.io/posts/how-to-find-your-purpose-by-using-your-fears-as-a-compass#fn1
I know, ‘meh’ sums it up quite nicely.
(it might actually seem like it worked on a superficial look, because for some weird reason the Bigfoot script got confused and attached the sidebar bubbles to the first footnotes in the blog text. Once you scroll down you’ll see what I mean. )
So, I figured there are basically two ways to go from here (three actually, if you’d consider not using footnotes at all, which I won’t ):
-
make the RTF ‘behave’, i.e. change how it treats the HTML markup. This doesn’t seem a viable option to my admittedly not-so-code-savvy self; I’ am, however, open to suggestions.
-
Change what the Bigfoot.js identifies as appropriate markup to act on. That seems more doable, at least for someone who knows javascript. I have the script here:
But when I look at it I don’t have a clue. My best guess, - after reading the usage guide on http://www.bigfootjs.com about thousand times,- is to change the ‘anchorPattern’ in the options part of the script:
anchorPattern: /(fn|footnote|note)[:\-_\d]/gi,
The question is: What do I have to change here so it recognizes footnotes that look like this:
<a href="#fn7" data-footnote-backlink-ref="" data-footnote-ref="#fn7">7</a>
Does anyone have an idea? I’d love to hear it!