About Automatically add anchors and IDs to Headings

Adds an id attribute to every heading with a slug of the text. Intended for easily creating linkable sections

Category Text Formatters
Textformatter modules that provide run-time formatting for blocks of text (typically used with Text/Textarea fields).
Release StateStable
Should be safe for use in production environments. *
Authormartinmuzatko
Module Version1.0.1
Class NameTextformatterAutoAnchor
Compatibility2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 3.0
Date AddedNovember 13, 2015
Recommended ByNew recommendations may take up to 1 day to appear.

Instructions

This module's files should be placed in /site/modules/TextformatterAutoAnchor/
How to install or uninstall modules

README

TextformatterAutoAnchor

ProcessWire Module: Automatically add anchors and IDs to Headings

What is it doing?

This Textformatter adds an id attribute to every heading with a slug of the text. Intended for easily creating linkable sections.

Demo

Currently it is used at http://www.happy-css.com

AutoAnchor in action: http://happy-css.com/lessons/riotjs/reusable-components/

Preview

Before Before After Before

Configurable Variables

Heading Selector

Determine which headings you want to have the ID + anchorUse a regex-like range or list, e.g.: 2-6 or 346.

Anchor Class

Your css classes that are attached to the anchor link.

Anchor Content

The text for your anchor. If you prefer an icon, you could also use HTML for example.

What are the Alternatives?

There are existing tools like Anchorific JS but its dependency is jQuery. I love to have an alternative that is PHP only.

Known issues

  • Anchors are placed in front of the text. This could be a future configurable setting.
  • The slug is also not configurable yet, currently it is lowercased and space is replaced with hyphens/dashes

Comments

No comments yet. Be the first to post!

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.