Изменить заголовок ссылки меню на изображение с помощью typoscript

Другое решение — определить собственный класс для каждой ссылки, а затем изменить фоновое изображение только для соответствующих ссылок. Таким образом, вы можете полностью контролировать внешний вид меню с помощью 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;
}

РЕДАКТИРОВАТЬ: я рекомендую вышеуказанное решение, потому что это быстрая и довольно чистая настройка для обращения к одному пункту меню. Однако, если вам нравится чистый пример из учебника typoscript:

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 имеет идентификатор страницы 99.

Я рекомендую использовать поле «Медиа» целевых страниц меню, чтобы определить, какие страницы в меню должны отображаться с использованием изображения. Поле «Медиа» находится на вкладке «Ресурсы» в свойствах страницы. Это идеальное решение для вашей проблемы, потому что вы можете свободно выбирать любое изображение для любого пункта меню:

Для элементов меню, которые вы хотите отображать в виде изображения, используйте поле «Медиа» на соответствующей странице меню и выберите изображение для использования. Для всех элементов меню, которые вы хотите отображать в виде текста, просто оставьте поле «Медиа» пустым.

Вот код 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
    }

  }

ОБНОВЛЕНИЕ ДЛЯ TYPO3 6.2 С FAL:

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 в приведенном выше коде.

Вот так lib.footernav.1.NO.stdWrap.wrap = <img src="|.gif" />?

Обязательно добавьте wrap.htmlSpecialChars = 1, чтобы избежать нарушения кода HTML, если редактор вводит специальные символы HTML.

Сначала вам нужно добавить изображение в медиа страницы в разделе «Страница-> редактировать», а затем добавить изображение в медиа. Далее используйте следующий типотекст:

stdWrap.override.cObject = COA
stdWrap.override.cObject{
      10 = IMAGE
      10.file.import = uploads/media/
      10.file.import.field = media
      10.altText.field = title
}