I am new to Fluid and Typo3 and trying to write my own template-extension based on Bootstrap 4. I like the cards of BS4 and added them as contentelement into my template-extension with no problem.
If I add content with my new card-contentelement now, I want this element and all other card-contentelements be wrapped into <div class="card-group> ... card div and other card-stuff ... </div> or better, I need the following structure:
<div class="card-group">
<div class="card">
CARD ONE
</div>
</div>
<div class="container">
OTHER CONTENT-ELEMENTS
</div>
<div class="card-group">
<div class="card">
CARD TWO
</div>
<div class="card">
CARD THREE
</div>
</div>
As you can see, I want to be one or more card-content-elements to be wrapped into a "card-group" div.
But I don't know how to do this within my layout, template nor typoscript. The only result I get is, that every card is wrapped in its own "card-group" div. =(
Any ideas? I am going nuts, sitting couple hours for a solution. Thanks in advance,
Chris
Any content element (CE) does know nothing about other CEs.
As a result each CE can only wrap itself.
If you want a wrap around multiple CEs you either have to build a container or do nasty things in javascript.
last one first:
you have to analyze the HTML-source end remove the wrapping between adjacent cards. As this easily can go wrong I would not realize it. You need to remove a </div><div class="card-group"> where the closing div also needs to be a class card-group. very difficult to identify!
As Phillip suggested: there are multiple solutions to use container-CEs in TYPO3.
The container CE will do the outside wrap (<div class="card-group">|</div>).
The contained CEs do the subrendering (<div class="card">|</div>)
Container CEs could be defined easily with EXT:gridelements, EXT:mask, ...
Another way of container would be a "page column". here the drawback is a very static layout. A markup like your example would need two reserved columns for cards.