Hallo,
ich möchte in meiner Haupt-Navigation ein Image aus den Eingenschaften mit anzeigen.
Dazu habe ich die Video-Anleitung von Wolfgang gefunden, wo er das Image als Hintergrundfoto für den Main-Bereich nutzt und TypoScript reicht.
Meine Recherchen haben mich dazu geführt, dass ich zunächst im TypoScript mit Hilfe des FileProcessors die Vorbereitung für das Fluid Template schaffen muss.
Hier mein Typoscript, wobei die 20 = ... meine hinzugefügten Zeilen sind:
["{$navigation.main.menuType}" in ["default", "bootstrap", "smartmenus"] && "{$navigation.main.enabled}" == "1"]
mainMenuProcessing = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
mainMenuProcessing {
entryLevel = {$navigation.main.entryLevel}
levels = {$navigation.main.levels}
expandAll = 1
includeSpacer = {$navigation.main.includeSpacer}
as = mainMenu
titleField = nav_title // title
excludeUidList = {$navigation.main.excludeUidList}
includeNotInMenu = {$navigation.main.includeNotInMenu}
dataProcessing {
10 = T3Bootstrap\Core\Frontend\DataProcessing\IconProcessor
10 {
if {
isTrue = {$navigation.main.showIcon}
}
}
# Neues DataProcessing für das Seitenbild
20 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
20 {
if.isTrue = 1
references.fieldName = media # oder dein eigenes Feld (z. B. tx_site_image)
as = image # Variable im Fluid-Template
}
}
}
[END]
Im Template kommt das Image jedoch nicht an. Ich habe das mit <f:debug>{menuPage}</f:debug> überprüft und sehe z.B. das Incon von 10.. aber nichts von 20...
Hier mein html Template der Navigation:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:section name="Default">
<f:if condition="{mainMenu}">
<ul id="nav-main" class="nav nav-main navbar-nav flex-row d-print-none {menuClass}">
<f:for each="{mainMenu}" as="menuPage" iteration="iteration">
<li class="nav-item{f:if(condition: menuPage.children, then: ' dropdown')} nav-item-{menuPage.data.uid}">
<f:if condition="{menuPage.spacer}">
<f:then>
<span class="spacer"></span>
</f:then>
<f:else>
<t3bc:link aria-label="{menuPage.data.title}" class="nav-link nav-item-{menuPage.data.uid}{f:if(condition:menuPage.children,then:' dropdown-toggle')}" currentClass="current high-ct-inverted" activeClass="active high-ct-inverted" href="{menuPage.link}" current="{menuPage.current}" active="{menuPage.active}" target="{menuPage.target}">
<f:if condition="{menuPage.icon.available}">{menuPage.icon.svg -> f:format.raw()}</f:if> {menuPage.title}
</t3bc:link>
</f:else>
</f:if>
<f:if condition="{menuPage.children}">
<ul class="dropdown-menu{f:if(condition:settings.header.dark,then:' dropdown-menu-dark')}" role="menu">
<f:for each="{menuPage.children}" as="subMenuPage" iteration="subIteration">
<f:render section="NavItem" arguments="{menuPage:subMenuPage}"/>
</f:for>
</ul>
</f:if>
</li>
</f:for>
</ul>
</f:if>
</f:section>
<f:section name="NavItem">
<li class="nav-item-{menuPage.data.uid}{f:if(condition: menuPage.hasSubpages, then: ' dropdown-submenu')}">
#### an dieser Stelle oder Bereich möchte ich das Image zeigen ####
<f:if condition="{menuPage.spacer}">
<f:then>
<hr class="dropdown-divider"/>
</f:then>
<f:else>
<t3bc:link aria-label="{menuPage.data.title}" class="dropdown-item{f:if(condition:menuPage.children,then:' dropdown-toggle-submenu')}" currentClass="current high-ct-inverted" activeClass="active high-ct-inverted" href="{menuPage.link}" current="{menuPage.current}" active="{menuPage.active}" target="{menuPage.target}">
<f:if condition="{menuPage.icon.available}">{menuPage.icon.svg -> f:format.raw()}</f:if> {menuPage.title}
</t3bc:link>
</f:else>
</f:if>
<f:if condition="{menuPage.children}">
<ul class="dropdown-menu{f:if(condition:settings.header.dark,then:' dropdown-menu-dark')}" role="menu">
<f:for each="{menuPage.children}" as="subMenuPage">
<f:render section="NavItem" arguments="{menuPage:subMenuPage}"/>
</f:for>
</ul>
</f:if>
</li>
</f:section>
</html>
Hat Jemand eine Idee was ich tun kann um die Anzeige umzusetzen?
Herzliche Grüße
Thomas