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>

Erstellt: 03/2014| Geändert: 10/2015

Nachtrag

Einfacher geht es auch mit:

backgroundImage  = TYPO3.TypoScript.TypoScriptObjects:ValueImplementation {
        @class = 'TYPO3\\TypoScript\\TypoScriptObjects\\ValueImplementation'
        value = ${q(node).property('backgroundImage')}
}

Erstellt: 03/2014| Geändert: 10/2015