0

我的typo3 网站有一个带有以下印刷定义的菜单：

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"
}

菜单工作得很好。我想要做的是，将链接文本更改为图像，如下所示：

<a class="footer-link" href="index.php?id=43&L=1">Facebook</a>

到

<a class="footer-link" href="index.php?id=43&L=1"><img src="facebook.gif"/></a>

我怎样才能做到这一点？

如果有帮助，我还可以为此 facebook 链接创建一个新菜单。

4

5 回答 5

6

我建议使用菜单目标页面的“媒体”字段来定义菜单中的哪些页面应该使用图像显示。媒体字段可以在页面属性的“资源”选项卡中找到。它是您问题的完美解决方案，因为它允许您为任何菜单项自由选择任何图像：

对于要显示为图像的菜单项，请使用相应菜单页面的媒体字段并选择要使用的图像。对于您希望显示为文本的所有菜单项，只需将媒体字段留空即可。

这是创建该行为的 TS 代码：

  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
    }

  }


FAL 的 TYPO3 6.2 更新：

TYPO3 6.2 包括 FAL——一种新的媒体资源管理系统。由于页面属性的资源选项卡现在也基于 FAL，因此您需要不同的 TypoScript 方法来访问这些图像。这是一个最新的解决方案：

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
        }

    }
}

该参数begin定义应该使用多张图片中的哪一张（例如，如果您需要一张图片作为页面的标题背景，另一张作为菜单中的图标）。

如果增加maxItems参数，将返回多个图像（如果在资源选项卡中定义了多个图像）。

如果您想将图像附加/添加到菜单文本而不是替换它，您必须更改stdWrap.override.cObject为after.cObject或before.cObject在上面的代码中。

于 2013-07-10T15:12:19.127 回答
2

另一种解决方案是为每个链接定义一个自定义类，然后仅为相应链接更改背景图像。这样您就可以通过 css 完全控制菜单的外观：

lib.footernav.1.NO {
  ATagParams = class="footer-link {field:title}"
  ATagParams.insertData = 1
}

结果如下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;
}

编辑： 我推荐上述解决方案，因为它是解决单个菜单项的快速且相当干净的设置。但是，如果您喜欢印刷术教科书中的一个干净示例：

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"
    }

假设您的facebook 菜单项是页面 ID 99

于 2012-05-17T21:08:52.897 回答
1

像这样lib.footernav.1.NO.stdWrap.wrap = <img src="|.gif" />？

wrap.htmlSpecialChars = 1如果编辑器输入 HTML 特殊字符，请确保添加一个以避免破坏 HTML 代码。

于 2012-05-17T11:14:32.083 回答
0 
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
  }    


}    
}
于 2014-12-24T14:19:20.197 回答
0

首先，您需要在 Page->edit 下的页面媒体中添加图像，然后在媒体中添加图像。此外，请使用以下排版：

stdWrap.override.cObject = COA
stdWrap.override.cObject{
      10 = IMAGE
      10.file.import = uploads/media/
      10.file.import.field = media
      10.altText.field = title
}
于 2015-06-12T07:49:40.987 回答