Seitenhintergrund
Hier wid das Hintergrundbild angezeigt als Header oder Hintergrund. Man kann es aber auch verwenden für Page Menus, die statt Text einen Thumbnail der Seite anzeigen, welcher dieses Bild verwendet.
Nodes
Um ein Seiten Hintergrundbild einzusetzen folgendes in Configuration/NodeTypes.yaml:
'TYPO3.Neos.NodeTypes:Page':
ui:
inspector:
groups:
background:
label: 'Background'
position: 900
properties:
backgroundImage:
type: TYPO3\Media\Domain\Model\ImageVariant
ui:
label: 'Image'
reloadIfChanged: TRUE
inspector:
group: 'background'
Typoscript
Um es nun ausgeben zu können muss man es in TypoScript in Root.ts2 definieren:
backgroundImage = TYPO3.TypoScript:Case {
default {
condition =${q(node).property('backgroundImage')}
type = TYPO3.TypoScript:Value
value = ${q(node).property('backgroundImage')}
@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\ValueImplementation'
}
fallback {
condition = TRUE
type = TYPO3.TypoScript:Value
value = ''
@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\ValueImplementation'
}
}
Einfacher geht es auch mit:
backgroundImage = TYPO3.TypoScript.TypoScriptObjects:ValueImplementation {
@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\ValueImplementation'
value = ${q(node).property('backgroundImage')}
}
Fluid Template
Mit dem TYPO3.Media ViewHelperkann man es dann Rendern in Default.htm:
{namespace media=TYPO3\Media\ViewHelpers}
<f:if condition="{backgroundImage}">
<f:then>
<div class="container" style="background: url({media:uri.image(image:backgroundImage)}) 80px 61px no-repeat;">
</f:then>
<f:else>
<div class="container">
</f:else>
</f:if>
Nachtrag
Einfacher geht es auch mit:
backgroundImage = TYPO3.TypoScript.TypoScriptObjects:ValueImplementation {
@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\ValueImplementation'
value = ${q(node).property('backgroundImage')}
}