TYPO3 RTE parseFunc to customize links.

Here I had a requirement to add a button style to RTE link. By adding the link class, I was able to add some class to link and able to generate the links like below.

<a herf=”#” class=”btn”>My link</a>

But according the my designer, the link should have a <span> tag inside the <a> tag. It should look like below.

<a herf=”#” class=”btn”><span>My link</span></a>

So, I have used a RTE parseFunc to do this.

Below are the steps.

1. Add the below typoscript in TS template setup.

includeLibs.userFunc= EXT:mycustom_config/Classes/UserFunction/Addspan.php
tt_content.text.20.parseFunc.tags.link {
postUserFunc= user_addSpan->addSpan
postUserFunc{
class = btn
ATagTitle.field = title
}
}

If we use namespaces, we no need to include the php file by using “includeLibs”. In that case, we can call the userfunction directly like below

postUserFunc= Namespace\Myext\UserFunctions\Addspan->addSpan

2.  On file Addspan.php we need to add below code.

<?php
class user_addSpan{
/*
* Adds span inside <a> tag, if the link class ‘btn’ is selected
*/
function addSpan($content,$conf) {
$class = $conf[‘class’];
if (preg_match(‘/class\=”(.*’. $class .’.*)”/i’, $content, $res)) {
$content = preg_replace(‘@>(.*)</a>@i’, ‘><span>$1</span></a>’, $content);
}
return $content;
}
}
?>

In this php function, I am checking for link class “btn” and adding a <span> tag.

That’s it. We can use this technique for generating Record links too, In that case we can generate the typolink to record detail view and replace “href”.

Cheers!

Adding the Icon for Menu from page media property

From typo3 6.2.x, please use the following code  to generate the icon for menus from its page’s media property.

lib.menu = HMENU
lib.menu {
entryLevel = 1
expAll = 1
1 = TMENU
1{
wrap = <ul class=”leftmenu”> | </ul>
expAll = 1
NO = 1
NO{
before.wrap = <li>|
stdWrap.cObject = COA
stdWrap.cObject {
10 = FILES
10 {
# Get the images related to the current page
references {
table = pages
fieldName = media
}
# Render each image and wrap it as appropriate
renderObj = TEXT
renderObj {
typolink {
parameter.data = file:current:publicUrl
forceAbsoluteUrl = 1
returnLast = url
}
wrap = |,
}
stdWrap {
# Take only the first image if several are defined
listNum = 0
# Use default image if none is available
ifEmpty.cObject = TEXT
ifEmpty.cObject.typolink {
parameter = path_to_images/logo.png
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <img src=”|” title=”image” />
}
}

20 = TEXT
20.field = title
20.wrap = <span>|</span>
}
after.wrap = |</li>
}
ACT < .NO
ACT.before.wrap = <li class=”active”> |

CUR < .NO
CUR.before.wrap = <li class=”active”> |
}
}