Anchor tags collide if two entries exist in the same DOM.

[nmjk]

What are you trying to do?

I have on occasion needed to be able to load a second entry into a modal, such that:

• the primary entry being shown has footnotes
• the second entry has its own footnotes

When anchor links are enabled, this leads to collisions and confusing UX because the DOM now has two occurrences each of:

• <a id="fnref:1" href="#footnote-1">
• <li id="footnote-1"><a href="#fnref:1">
• (etc.)

What's your proposed solution?

Generate a unique ID when the Footnotes service is instantiated. When anchor links are enabled, use that unique ID as a prefix for the footnote number.

Then, for the primary entry being shown, its footnote links could look like this:

• <a id="fnref:69fd2fc0f32d8.1" href="#footnote-69fd2fc0f32d8.1">
• <li id="footnote-69fd2fc0f32d8.1"><a href="#fnref:69fd2fc0f32d8.1">
• (etc.)

And for the second entry (potentially loaded into a modal), its footnote links could be as follows:

• <a id="fnref:69fd315d9914b.1" href="#footnote-69fd315d9914b.1">
• <li id="footnote-69fd315d9914b.1"><a href="#fnref:69fd315d9914b.1">
• (etc.)

I've attached a patch where the unique ID is generated using PHP's uniqid() function, but this could also be achieved using the entry's ID as the prefix. There are definitely better ways to add this feature, but the simplistic, non-structural changes in the patch have allowed me to maintain these tweaks for years after each upgrade.

I have also attached a docs patch with a draft of how the usage documentation could be updated. (Side note: numbered footnotes seem like a good occasion to use ordered lists (<ol>), which would make usage even simpler.)

verbb__footnotes_service.patch
verbb__footnotes_docs.patch

Additional context

No response

[engram-design]

Thanks for this! I've re-worked it a little more, just to handle GraphQL and added a new footnotes_items() if you want to make it easier in the future.

{% for item in footnotes_items() %}
    <li id="{{ item.listAnchorId }}">
        {{ item.numberHtml | raw }} {{ item.text }}
        <a href="#{{ item.referenceAnchorId }}">back</a>
    </li>
{% endfor %}

footnotes_items() returns

[
    'number' => 1,
    'text' => 'Footnote text',
    'numberHtml' => '<a name="footnote-entry-123.1">1</a>',
    'listAnchorId' => 'footnote-entry-123.1',
    'referenceAnchorId' => 'fnref:entry-123.1',
]

To get this early, run composer require verbb/footnotes:"dev-craft-5 as 6.0.1".