CODEWITHSUNDEEP
menutypo3typoscript
BetaRide
BetaRide

Reputation: 16844

Change menu link title into image with typoscript

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.

Upvotes: 0

Views: 6437

Answers (5)

Vivek Parmar
Vivek Parmar

Reputation: 771

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
}

Upvotes: 0

Bharat Parmar
Bharat Parmar

Reputation: 1880

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
  }    


}    
}

Upvotes: 0

Jpsy
Jpsy

Reputation: 20862

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.

Upvotes: 6

pgampe
pgampe

Reputation: 4578

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.

Upvotes: 1

Mateng
Mateng

Reputation: 3734

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

Upvotes: 2

Related Questions