Templating issue // Stack content item(s) with conditions

Using Neos & Flow
1

Hello Community,

i’m trying to implement a template into a Neos project. This worked quite good so far. But now i want to stack some content elements, but that is giving me some brain bugs and challenges.

I’m having a Bootstrap template where i want to add several teaser in different variations to the footer of the website. For this, i have added a NodeType called “teaser”, which i’ve added as one of the childNodes to Page. It looks like the following:

'Vendor.Name:Page':
  superTypes:
    'Neos.NodeTypes:Page': true
  ui:
    inspector:
      groups:
        footernav:
          label: 'Footer Menu'
  childNodes:
[...]
    teaser:
      type: 'Neos.Neos:ContentCollection'
      constraints:
            nodeTypes:
              '*': false
              'Vendor.Name:Teaser': true

After that, i have defined this teaser in my Root.fusion like this, so i can use it inside my Page:

teaser = Neos.Neos:ContentCollection {
nodePath = ‘teaser’
attributes.class.@process.collectionClass >
attributes.class = ‘container page-teasers’
//@if.hasContent = ${q(node).find(‘teaser’).children().count() > 0}
}

And finally added to my Template:

<ts:render path=“teaser” />

This is working and i can add a Teaser element, which i have defined with several properties, and i can add it to my ContentCollection:

image

But the part that breaks me right now, is that when i add a new teaser, they are not stacked since a new

<div class="row"></div> will be created (defined inside the NodeType)

That means the teaser is below the other teaser, and not inside the class row:

Is:

image
image400×539 12.8 KB

How it should be:

image

I think i’m seaching for a way to put all teasers with name “Teaser 1-3” into that row class instead of adding a new row for each teaser.

The fact that i also want to create teasers with other sizes, arrangements and rows is not making it more easy.

Did someone faced something like this and maybe can resolve my bug? Any help would be appreciated! Thank you a lot! :slight_smile:

2

Hi Benjamin :smile:

How is your <div class="row"> added to your rendering of the elements in the teaser? You might have it one level for far “up” :slight_smile:

3

Thank you for your reply Søren! :slight_smile:

The <div class="row"> is inside the Private/Templates/NodeTypes/Teaser.html, which defines every single Teaser (1-3) element like this:

<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 page-teaser-element element-size-1-3 text-only color-4>">
<div class="page-teaser-text">
<div class="cta">
<h2><a href="{url}" class="main-target-link">{ctaText}</a></h2>
<span class="hidden-xs">{linkText}</span>
</div></div></div></div>

I think also the question for me is, how i could put the class row one level up so i can fill the row with only:

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 page-teaser-element element-size-1-3 text-only color-4">[...]</div>

Like a wrapper before the Teaser.html with only <div class="row"> or something like that.

But there are different types of teasers with different element-sizes. So i need to seperate them all under different ContentCollections i think. Or maybe i think to complex about it :smiley:

4

You should be able to remove the row class wrapper from your html file and add

@process.wrap = ${'<div class="row">' + value + '</div>'}

to your teaser element - then you will only have it once :slight_smile:

1 Like
5

That is working perfectly! Thank you a lot!

Now only the order of the div elements is not correct so the design is not working properly. I’ve added it like the following:

		teaser = Neos.Neos:ContentCollection {
			nodePath = 'teaser'
			attributes.class.@process.collectionClass >
			attributes.class = 'container page-teasers'
			@process.wrap = ${'<div class="row">' + value + '</div>'}
		}

So the order is currently like that:

<div class="row">
  <div class="container pages-teasers">

But i need it the other way around, like:

<div class="container pages-teasers">
  <div class="row">

Is there also a trick for that? :smiley:

6

Hey @sorenmalling,

i just used your trick and i hope thats okay to do it like that:

		teaser = Neos.Neos:ContentCollection {
			nodePath = 'teaser'
			attributes.class.@process.collectionClass >
			@process.wrap = ${'<div class="container page-teasers"><div class="row">' + value + '</div></div>'}
		}

:smiley:

Thank you a lot!

1 Like
7

Awesome, super solution for your case :slight_smile:

It’s totally okay if it solves your issue :partying_face:

1 Like