Change menu link title into image with typoscript - menu

Question

My typo3 websites has a menu with the follwing typoscript definition:
lib.footernav = HMENU
lib.footernav.special = directory
lib.footernav.special.value = 38
lib.footernav.entryLevel = 0
lib.footernav.1 = TMENU
lib.footernav.1.NO {
ATagParams = class = "footer-link"
}
The menue works just fine. What I want to do is, change the link text into an image, like this:
<a class="footer-link" href="index.php?id=43&L=1">Facebook</a>
to
<a class="footer-link" href="index.php?id=43&L=1"><img src="facebook.gif"/></a>
How can I do that?
If it helps I could also create a new menu for this facebook link.

Answer 1

I recommend to use the "Media" field of the menu's target pages to define, which pages in the menu should be displayed using an image. The Media field can be found in the "Resources" tab of the page properties. It is the perfect solution for your problem because it allows you to freely choose any image for any menu item:
For menu items that you want to appear as an image, use the Media field of the corresponding menu page and select an image to use. For all menu items that you want to appear as text, simply leave the Media field empty.
Here is the TS code to create that behavior:
1 = TMENU
1.NO {
ATagParams = class="footer-link"
# Replace menu item text with image if defined in page tab "Resources"-->"Media"
stdWrap.override.cObject = COA
stdWrap.override.cObject{
10 = IMAGE
10.file.import = uploads/media/
10.file.import.field = media
10.altText.field = title
}
}
UPDATE FOR TYPO3 6.2 WITH FAL:
TYPO3 6.2 includes FAL – a new media resource management system. As the resources tab of the page properties is now also based on FAL, you need a different TypoScript approach to access those image(s). Here is an up-to-date solution:
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.override.cObject = FILES
stdWrap.override.cObject {
references {
table = pages
fieldName = media
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:uid
file.treatIdAsReference = 1
titleText.data = file:current:title // field:nav_title // field:title
altText.data = file:current:alternative // field:nav_title // field:title
}
# start with first image
begin = 0
# show only one image
maxItems = 1
}
}
}
The parameter begin defines which of multiple images should be used (e.g. if you need one image as a headline background for the page and another one as an icon in the menus).
If you increase the maxItems parameter, multiple images will be returned (if multiple images are defined in the resources tab).
If you want to append/prepend the image to the menu text instead of replacing it, you have to change stdWrap.override.cObject to after.cObject or before.cObject in the above code.

Answer 2

Another solution is to define a custom class for each link, then change the background image only for according links. This way you can fully control the menu's appearance by css:
lib.footernav.1.NO {
ATagParams = class="footer-link {field:title}"
ATagParams.insertData = 1
}
Results in following html:
<a class="footer-link Facebook" href="index.php?id=43&L=1">Facebook</a>
css:
.Facebook {
background: transparent url(facebook.gif) no-repeat;
text-indent:9999px;
}
EDIT: I recommend the above solution, because it's a quick and fairly clean setup to address a single menu item. However, if you like a clean example from the typoscript textbook:
lib.footernav = COA
lib.footernav.10 = HMENU
lib.footernav.10 {
special = directory
special.value = 38
excludeUidList = 99
1 = TMENU
1.NO {
ATagParams = class = "footer-link"
}
}
lib.footernav.20 = TEXT
lib.footernav.20 {
field = title
typolink.parameter = 99
typolink.ATagParams = class = "footer-link"
}
Assuming that your facebook menu item is page ID 99

Answer 3

Like so lib.footernav.1.NO.stdWrap.wrap = <img src="|.gif" />?
Make sure to add a wrap.htmlSpecialChars = 1 to avoid breaking the HTML code if an editor enters HTML special chars.

Answer 4

lib.footerSocialMedia = HMENU
lib.footerSocialMedia {
special = directory
special.value = 167
1 = TMENU
1 {
wrap = <ul class="social-list right">|</ul>
expAll = 1
noBlur = 1
NO {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.htmlSpecialChars = 1
stdWrap.field =
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
ACT = 1
ACT {
wrapItemAndSub = <li class="skew-25">|</li>
doNotLinkIt = 0
stdWrap.field =
stdWrap.htmlSpecialChars = 1
ATagParams =data-title="{field:title}" data-tooltip="true"
ATagParams.insertData=1
stdWrap.wrap = <span class="{field:tx_menuicon_menuicon}"></span>|
stdWrap.wrap.insertData=1
}
}
}

Answer 5

First you need to add image in media of page under Page->edit and then add the image in media. Further, use the following typoscript:
stdWrap.override.cObject = COA
stdWrap.override.cObject{
10 = IMAGE
10.file.import = uploads/media/
10.file.import.field = media
10.altText.field = title
}