Multiple Images over one background

maschad · July 22, 2016, 6:25pm

I am a tad confused about how to go about doing something like this. Maybe I am not understand NEOS documentation well, but here is my attempt to get something like this.

'Country.Germany:MultipleImageLayover':
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    label: 'Multiple Image Layover'
    group: 'general'
    inspector:
      groups:
        image:
          label: 'Image'
          icon: 'icon-image'
          position: 1
  properties:
    headline:
      type: string
      defaultValue: 'Replace by your headline value ...'
      ui:
        label: 'Headline'
        inlineEditable: TRUE
    text:
      type: string
      ui:
        label: 'Text'
        reloadIfChanged: TRUE
    headline2:
      type: string
      defaultValue: 'Replace by your headline value ...'
      ui:
        label: 'Headline'
        inlineEditable: TRUE
    text2:
      type: string
      ui:
        label: 'Text'
        reloadIfChanged: TRUE
    headline3:
      type: string
      defaultValue: 'Replace by your headline value ...'
      ui:
        label: 'Headline'
        inlineEditable: TRUE
    text3:
      type: string
      ui:
        label: 'Text'
        reloadIfChanged: TRUE
    image:
      type: TYPO3\Media\Domain\Model\ImageInterface
      ui:
        label: 'Image'
        reloadIfChanged: TRUE
        inspector:
          group: 'image'

christianm · July 23, 2016, 10:27am

I would probably go about it as separate elements. A three column element with a background image and then inside the three columns standard text/headline/whatever elements.

maschad · July 25, 2016, 7:46pm

Hey Christian, thanks. That looks a good idea. I am not sure if I am doing the three column element correctly but here is what I have.

MultipleImageLayover.ts2

# Code originates from the TYPO3 Neos Demo Package
# Section was added to allow for schema support
prototype(TYPO3.Neos.NodeTypes:MultipleImageLayover) {
    attributes.class = 'row'
    columns.iterationName = 'multiColumnIteration'
}

MultipleImageLayover.yaml

'TYPO3.Neos.NodeTypes:MultipleImageLayover':
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    label: 'Multiple Image Layover'
    group: 'general'
    inspector:
      groups:
        image:
          label: 'Image'
          icon: 'icon-image'
          position: 1
  properties:
    image:
      type: TYPO3\Media\Domain\Model\ImageInterface
      ui:
        label: 'Image'
        reloadIfChanged: TRUE
        inspector:
          group: 'image'
    'layout':
      defaultValue: '4-4-4'
      ui:
        inspector:
          editorOptions:
            values:
              '33-33-33': ~
              '50-25-25': ~
              '25-50-25': ~
              '25-25-50': ~
              '4-4-4':
                label: '33% / 33% / 33%'
              '6-3-3':
                label: '50% / 25% / 33%'
              '3-6-3':
                label: '25% / 50% / 25%'
              '3-3-6':
                label: '25% / 25% / 50%'

MultipleImageLayover.html

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<f:section name="stylesheets">
	<link rel="stylesheet" href="{f:uri.resource(path:'Styles/styles-system-new.css', package:'Country.Germany')}" />
	<link rel="stylesheet" href="{f:uri.resource(path: '3/css/bootstrap.min.css', package: 'TYPO3.Twitter.Bootstrap')}" media="all" />
</f:section>
<section class="section" id="highlight-one" <f:if condition="{image}">style="background-image: url({media:uri.image(image: image)});" </f:if>>
</section>

But I keep getting cannot load exception.

mficzel · July 27, 2016, 9:18am

I think the problem is that you use the TYPO3.Neos.NodeTypes namespace … i think this will make neos lookup the template inside that package.

Nevertheless i would suggest a simpler approach:

Define your node as an aggregation of the existing ones

YourFullPackageName:MultipleImageLayover
  superTypes:
    TYPO3.Neos.NodeTypes:ThreeColumn: TRUE
    TYPO3.Neos.NodeTypes:ImageMixin: TRUE

In TypoScript just use the TYPO3.Neos.NodeTypes:ThreeColumn as base prototype

prototype(YourFullPackageName:MultipleImageLayover) < prototype(TYPO3.Neos.NodeTypes:ThreeColumn)

The template file should afterwards be placed in YourFullPackageName:MultipleImageLayover/Resources/Private/Templates/NodeTypes/MultipleImageLayover.html you can start with a copy of TYPO3.Neos.NodeTypes/Resources/Private/Templates/NodeTypes/MultiColumn.html

Warning: I did’nt try this so this code can contain typos.

maschad · July 27, 2016, 8:03pm

Thanks much for your help, got it working.

mad · July 28, 2016, 9:02am

Hey @maschad,

cool!

I know it generates more work. But I’m almost sure, the forum would be an even bigger help (across different levels of knowledge), if all of us would share the final solution. To read other approaches and skim extracts of well-working code, solve more than seldom completely different troubles – at least sometimes …

collaborative regards

maschad · July 28, 2016, 8:24pm

Good point , well my solution is a little bit different but I will share nonetheless. I have a contentbox element which holds the text and headlines in a transparent box, and I also made my own custom three column element. Here is the image background with the three columns, only allowing that special contentbox in each column.

NodeTypes.MultipleImageLayover.yaml

'Country.Germany:MultipleImageLayover':
  superTypes:
    'Country.Germany:ThreeColumn': TRUE
    'TYPO3.Neos.NodeTypes:ImageMixin': TRUE
  ui:
    label: 'Three Column Teaser over Image'
    group: 'general'
    inspector:
      groups:
        image:
          label: 'Image'
          icon: 'icon-image'
          position: 1

multipleImageLayover.ts2

prototype(Country.Germany:MultipleImageLayover) < prototype(Country.Germany:ThreeColumn) {

	templatePath = 'resource://Country.Germany/Private/Templates/NodeTypes/MultipleImageLayover.html'

}

MultipleImageLayover.html

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
{namespace ts=TYPO3\TypoScript\ViewHelpers}
<f:section name="stylesheets">
	<link rel="stylesheet" href="{f:uri.resource(path:'Styles/styles-system-new.css', package:'Country.Germany')}" />
	<link rel="stylesheet" href="{f:uri.resource(path: '3/css/bootstrap.min.css', package: 'TYPO3.Twitter.Bootstrap')}" media="all" />
</f:section>
<div{attributes -> f:format.raw()}>
	<section class="section" id="highlight-one" <f:if condition="{image}"> style="background-image: url({media:uri.image(image: image)});" </f:if>>
		<div class="row">
			<div class="col-md-4"><ts:render path="col1" /></div>
			<div class="col-md-4"><ts:render path="col2" /></div>
			<div class="col-md-4"><ts:render path="col3" /></div>
		</div>
	</section>
</div>

mficzel · July 29, 2016, 7:02am

Nice … thanks for sharing