phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

Anchor Plus

Anchor Plus BBCode 1_New.png
Description
This BBCode allows to place anchors anywhere in posts. They become targets for hyperlinks using URL BBCodes allowing to jump directly to specific positions in posts.
It allows to create shortcuts to specific words, titles, paragraphs or images, and of course, tables of content.

This version of the Anchor BBCode has the following features:
  • Can be used stand-alone anywhere or by wrapping a word, title, paragraph of multiple lines or image
  • Do not require any GoTo BBCode (uses the URL one instead)
  • Allows to display or hide a link icon, customizable via Font Awesome v4.7 icon HTML code (cf. FAQ)
  • Properly manage the specific case of long titles or paragraphs on multiple lines, by separating the anchor and the link icon.
    The anchor, invisible, is placed before the 1st character (so the hyperlink always target the 1st line) and the link icon, if requested, is placed at the end of the text, sometimes few lines below, where it's supposed to be.
  • Properly manage images the same way: invisible anchor just before the image and link icon next to the top right corner of the image
  • At last, in case the website of the forum has a sticky header, it also can manage an offset of the anchor, ensuring that the 1st line to display is always indeed positioned below the sticky header and never under (cf. FAQ).
Instructions
Hyperlink leading to an anchor: use the URL BBCode and only #AnchorName as URL...
[url=#AnchorName]Hyperlink title[/url]

Anchor with no visible link icon:
[anchor name=AnchorName][/anchor]
[anchor name=AnchorName]Word, Title or Paragraph[/anchor]
[anchor name=AnchorName][img]url[/img][/anchor]

Anchor with visible link icon: add "visible=yes"...
[anchor name=AnchorName visible=yes][/anchor]
[anchor name=AnchorName visible=yes]Word, Title or Paragraph[/anchor]
[anchor name=AnchorName visible=yes][img]url[/img][/anchor]

Other information:
- The anchor itself is always invisible and always located where the anchor BBCode starts, so before the text or image when the BBCode is wrapping some text or an image.
- What can be made visible is a link icon. This icon is always located where the anchor BBCode ends, so after the text or at the top right corner of the image when the BBCode is wrapping some text or an image. To make this icon visible, please add the visible=yes attribute to the BBCode.
- Wrapping a word, title, paragraph or image is optional. Not wrapping any text or image allows you to position the anchor and the link icon together, where ever you want.
- The anchor "name" can only contain letters w/no accent, numbers, dashes and/or underscores.

Special thanks to JoshyPHP for his advises!
  • Author -=ET=-
  • Last updated Sat Jul 10, 2021 2:15 am
  • Rating
    (1)
  • Categories Misc

Public performance attribution has been waived.

Demo

Hyperlink leading to an anchor: use the URL BBCode and only #AnchorName as URL...
[url=#AnchorName]Hyperlink title[/url]

Anchor with no visible link icon (standalone, wrapping some text, wrapping an image):
[anchor name=AnchorName][/anchor]
[anchor name=AnchorName]Word, Title or Paragraph[/anchor]
[anchor name=AnchorName][img]https://www.phpbb.com/assets/images/images/hb-what-is-phpbb.png[/img][/anchor]

Anchor with visible link icon (standalone, wrapping some text, wrapping an image): add "visible=yes"...
[anchor name=AnchorName visible=yes][/anchor]
[anchor name=AnchorName visible=yes]Word, Title or Paragraph[/anchor]
[anchor name=AnchorName visible=yes][img]https://www.phpbb.com/assets/images/images/hb-what-is-phpbb.png[/img][/anchor]

Settings

BBCode Usage: Select all
[anchor name={IDENTIFIER} visible={CHOICE=yes;optional}]{TEXT}[/anchor]

HTML Replacement: Select all
<span><span id="{@name}" style="display: block; position: relative; top: -0px;"></span><span style="vertical-align:top;">{TEXT}</span><xsl:if test="@visible='yes'"><a href="#{@name}"><i class="icon fa-link" style="font-size:11px; color:#368ad2; position: relative; top: -4px; padding-left: 4px; padding-right: 4px" aria-hidden="true"></i></a></xsl:if></span>

Help Line: Select all
Hyperlink that lead to an anchor (use URL BBCode and only #AnchorName as URL): [url=#AnchorName]Hyperlink title[/url] - Anchor (only letters w/no accent, numbers, dashes & underscores for names): [anchor name=AnchorName visible=yes]Title[/anchor]
Anchor Plus BBCode 3_New.png Anchor Plus BBCode 2_New.png
  • Revisions
    Version
    phpBB Version(s)
  • Anchor Plus 1.0.1
    1.0.1
    3.3.x
    Validation time: Jul 10, 2021 2:15 am
    BBCode Usage: Select all
    [anchor name={IDENTIFIER} visible={CHOICE=yes;optional}]{TEXT}[/anchor]

    HTML Replacement: Select all
    <span><span id="{@name}" style="display: block; position: relative; top: -0px;"></span><span style="vertical-align:top;">{TEXT}</span><xsl:if test="@visible='yes'"><a href="#{@name}"><i class="icon fa-link" style="font-size:11px; color:#368ad2; position: relative; top: -4px; padding-left: 4px; padding-right: 4px" aria-hidden="true"></i></a></xsl:if></span>

    Help Line: Select all
    Hyperlink that lead to an anchor (use URL BBCode and only #AnchorName as URL): [url=#AnchorName]Hyperlink title[/url] - Anchor (only letters w/no accent, numbers, dashes & underscores for names): [anchor name=AnchorName visible=yes]Title[/anchor]