Release of TYPO3 extension "Speaking URL fragments" (EXT:content_slug)

URL fragments ("domain.com/page/#interesting-section")–often referred to as "anchors" or "jump links"–are a handy feature for directly navigating a specific section of a web page.

For example, the two TYPO3 content elements of type "Section Index" will generate page menus, which also list and link the content elements of the listed pages. The respective UID of the content element (e.g. #c123) serves as a URL fragment. This works fine but is not very meaningful. Especially if you want to share a certain text fragment with another person, a human-readable anchor would be desirable.

The new extension "content_slug" is intended to help here:

1. Editors will get a new input field to set URL fragments in TYPO3 content elements.
2. Optionally, the editor can add an anchor link to the header on the website. A checkbox in the content element is provided for this purpose.
3. The TYPO3 menus of type "Section Index" will use the new URL fragments, if given. For all content elements without a custom URL fragment, the UID is still linked.

Backward compatibility: As the new URL fragments are added to the header, all previous links to content elements with #c123 remain valid. As mentioned above, TYPO3 menus will take content elements with and without their own URL fragment into account.

To illustrate this, I have added a "Section Index" element as the table of contents:

The use of characters in URL fragments or id attributes is limited. With HTML 5 the restrictions were lifted, but for compatibility reasons, the rules of HTML 4 are applied in this extension.

This means that the URL fragments may contain the following characters:

• ASCII characters (a–z)
• digits (0–9)
• underscores (_)
• hyphens (-)
• periods (.)

When the content element is saved …

• … all characters are converted to lowercase.
• … HTML elements are removed completely.
• … space characters are converted to the hyphen character.
• … special characters (e.g. äöü߀) are converted to ASCII equivalents.

Also, uniqueInPid will check whether a content element with an identical URL fragment already exists on the same page. In this case, a number is added to the end of the fragment (e.g. "content0").
There is currently a problem that will affect multilingual websites: uniqueInPid does not differentiate between the language of the content elements. Therefore an identical URL fragment is not yet possible for localized content.

The navigation to a URL fragment works with the global HTML attribute id. The name attribute will work as well, but according to the HTML 5 specification, it may only be used for certain elements.
Before you give an editor the privilege to set id attributes in a web page, you must ensure that this will not cause problems: an id with the same name could be used in the template …

• … to select it with CSS or
• … for JavaScript functionalities.

Because of this, the extension will–by default–set a prefix with the content element's UID to the user-defined URL fragment.

If you have full control over your website's template, you can modify the name of all id attributes used in the template: either use capital letters or two consecutive hyphens in it. In the input field for the fragment, this would be transformed by the evaluation. This approach will prevent duplicates.

Afterward, you can remove the UID in the Fluid templates with a clear conscience (as I did in my blog).

With upcoming versions, I want to improve the extension:

• Immediate evaluation of the URL fragment when the editor leaves the form field (via JavaScript).
• A new button that allows the editor to generate a URL fragment from the current content of the header field.
• Configuration of the entire URL fragment using TypoScript (that is, field value, prefix and/or suffix). This would make customization of the Fluid templates easier.

Of course, the aforementioned issue with uniqueInPid should be addressed, too.