Footnotes

Footnotes module can be used to easily create automatically numbered footnote citations to references into any formatted text with full CK Editor 5 support.

About footnotes (and 4.x branch)

The footnotes 4.x branch is a rework of the module to support WYSIWYG content within the footnote reference itself (eg, bold, links, italics) like a typical reference area needs. It does this by loading a modal window when clicking the footnotes toolbar icon (like media does) instead of using the balloon (like a simple link does).

Screenshot of the CK Editor 5 modal

Screenshot of sample front-end output

Terminology

• Citation
  The link within the text like [1] [2] [3] [custom link] that takes the user down to the full reference source
   
• Reference
  The text output typically at the bottom of the page containing the source details, eg author information, external link, etc
   
• Backlink
  The link from within the references that takes the user back to the citation
   

Features

1. Automated number
   Automatically number citations, including across multiple formatted text blocks (optional). It is also possible to manually set specific citation text (or a combination of the two).
    
2. Automated combining same references
   Automatically set a citation number to an existing number if the reference is an exact match (optional)
    
3. Adjacent citation theming
   Automatically group multiple citations directly next to each other into a theme-able template to support different reference styles
    
4. Reference backlinks to citations
   Automatically backlink to the citations from within the references, including multiple backlinks if the reference is cited more than once
    
5. Multiple formatted texts on a page
   Decide whether to output the footnote references after each formatted text block, or group them and output all references in a block (eg, useful when there are multiple Paragraphs or Layout Builder blocks containing citations).
    
6. Support for ajax loaded citations
   Separate footnote references block (optional) to output the citations via JavaScript instead of PHP in the case that footnotes may be loaded via ajax (eg, BigPipe, Views Ajax, etc)
    
7. Formatted text within the references
   Modify the formatting options allowed within the footnote reference: See the 'Footnotes' text format that gets installed (note that Drupal Core does not support modals within modals, so Media Library for example is not supported, but balloons like links are fine)
    
8. References shown in pop-ups
   Optionally progressively enhance the reference functionality to have the reference appear in a dialog when a citation is clicked instead of jumping the user down the page.
    
9. Test coverage
   Automated test coverage for all of the above
    

Using footnotes without CK Editor 5 (hand-coding html)

<footnotes data-value="" data-text=""></footnotes> is the default markup; however, if you are hand-coding your HTML, writing nested HTML within the data attribute is extremely painful. Therefore it is possible to do <footnotes data-value="">Reference text <strong>here</strong></footnotes> to make that easier.

Note that there is currently no conversion path between the two options so it is strongly recommended to stick to either all CK Editor 5 or none and not allow the user to switch back and forth.

Pending features

Paste from Word is close but needs work #3413998: Handle paste from office for footnotes.

Installation instructions

General setup:

1. Follow the Drupal.org instructions on how to install a module
2. Edit the desired text format(s) to add the footnotes toolbar icon
3. Enable the footnotes filter
4. Optionally move the footnotes filter after 'Convert line breaks to HTML' to avoid line breaks within citations

Outputting the footnotes as a block combining all footnotes from multiple formatted texts:

1. Disable the footnotes output via the filter configuration
2. Add the Footnotes Group block
3. Set the block configuration for 'Current entity context for caching' to 'Node from URL'

Theming

There are three template files which can be copied into your theme and modified:

• footnote-links.html.twig
  When multiple citations in the text appear next to each other, they are wrapped in this. This is useful if you for example want to do [1-3] instead of [1] [2] [3]
   
• footnote-link.html.twig
  The individual citation link markup
   
• footnote-list.html.twig
  The list of references add the end of the text or outputted in a separate block depending on your configuration
   

Many Footnotes users don't want the footnotes to show in teasers (such as the front page listing). The correct way to prevent that is by using CSS.

Upgrading from 3.x

# Find all fields within 'node' that have text, text_long, or text_long_with_summary, checking if they have footnotes in them and converting.
drush footnotes:upgrade-3-to-4 node

# Do the same for a nested entity.
drush footnotes:upgrade-3-to-4 paragraph

# Do the same for another entity type.
drush footnotes:upgrade-3-to-4 block

# Do the same but where the target site is not using CK Editor 5.
drush footnotes:upgrade-3-to-4 node --use-data-text=FALSE

Other documentation

• View the module homepage details from the 3.x branch
• View general footnotes configuration instructions

Copyright and acknowledgements

1. Footnotes.module is copyrighted by Henrik Ingo and other contributors. It is licensed by the same conditions as Drupal itself. (GPL license)
2. Footnotes.module was originally created by henrik.ingo@avoinelama.fi ("hingo" on drupal.org) in the summer of 2006.
3. The HTML footnotes were seriously enhanced by "beginner" (on drupal.org) and later on by other users comments and code snippets.
4. Footnotes was originally developed for http://openlife.cc/onlinebook
5. Beginner was the second to use it on his site at http://www.reuniting.info
6. From "hingo": I wish to thank all contributors for letting me experience the miracle of maintaining an Open Source module living its own life!
7. Scott Euser at Soapbox has taken over development and maintenance, upgrading to the 4.x branch.