Typo3 Neos: How to build a custom content slider?

Question

I want to integrate a custom content slider. Therefore i have read the documentation: http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorsCookbook/IntegratingJavaScriptSlider.html

I think this should render the slides array:

<!-- Wrapper for slides -->
{carouselItems -> f:format.raw()}

My question is now how can i render a simple slide. A Slide could contain any NodeTypes. In the example only Images are rendered. But i need to access any NodeType.

Html (Sites/Vendor.Site/Private/Templates/TypoScriptObjects/CarouselItem.html)

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div{attributes -> f:format.raw()}>
    <f:if condition="{image}">
            <f:then>
                    <media:image image="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" />
            </f:then>
            <f:else>
                    <img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.png')}" title="Dummy image" alt="Dummy image" />
            </f:else>
    </f:if>
    <div class="carousel-caption">
            <f:if condition="{hasCaption}">
                    {neos:contentElement.editable(property: 'caption')}
            </f:if>
    </div>
</div>

Edit

My content slider has the following DOM-Structure: Every thing in the jkslide div has nothing to do with the slider.

<div class="jkslider">
    <div class="jkslide">
        <p>The first slide element could be an image with a header underneath</p>
        <img src="layout/wallpaper-1-1600-900.jpg">
        <h2>Wallpaper 1, Width: 1600, Height: 900</h2>
    </div>
    <div class="jkslide">
        <div class="row">
            <div class="span6>
                <p>First column text</p>
            </div>
            <div class="span6>
                <p>Second column text</p>
            </div>
        </div>
    </div>
    <div class="jkslide fade">
        Some Text<br>
        <div class="someclass2">
            <div class="somelcass3">
                  Text
            </div>
        </div>
    </div>
</div>

One slide item should be rendered this way: One slide item should also be a content collection i think!?!?

<div class="jkslide">
    Here i want to print the raw node type / content collection? 
</div>

With that code i will get the slide items.

sliderItemArray = ${q(node).children('sliderItems').children()

So now i need to display these children. But remember the child could be anything from an image to normal text or a two column element.

Hope i have now explained my problem a little bit better.

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

EDIT 2

Could this be a solution to your question?

Step 1: Update the Page nodetype in Vendor.Site/Configuration/NodeTypes.yaml

'TYPO3.Neos.NodeTypes:Page':
  childNodes:
    firstContainer:
      type: 'TYPO3.Neos:ContentCollection'
    secondContainer:
      type: 'TYPO3.Neos:ContentCollection'
    thirdContainer:
      type: 'TYPO3.Neos:ContentCollection'

Step 2: Update the body section of Page typoscript template in Vendor.Site/Resources/Private/TypoScripts/Library/Root.ts2

content {
    firstContainer = ContentCollection {
        nodePath = 'firstContainer'
    }
    secondContainer = ContentCollection {
        nodePath = 'secondContainer'
    }
    thirdContainer = ContentCollection {
        nodePath = 'thirdContainer'
    }
}

Step 3: Update your template file by adding the containers in the div classes you want like this

<div class="jkslider">
    <div class="jkslide">
        {content.firstContainer -> f:format.raw()}
    </div>
    <div class="jkslide">
        <div class="row">
            {content.secondContainer -> f:format.raw()}
        </div>
    </div>
    <div class="jkslide fade">
        {content.thirdContainer -> f:format.raw()}
    </div>
</div>

Step 4: Use ./flow node:autocreatechildnodes --node-type TYPO3.Neos.NodeTypes:Page

If you want to have extra divs (like <div class="span6">) inside your containers you can extend the nodetype you want to use to have an extra field/variable and use that variable in the html as a {class}.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 28 '13 at 12:03

barcasal

309
3
11

yeah thats only for an image slider with a caption. i need to place any content element in the slider. – Jürgen Kleiß Dec 30 '13 at 17:50
You can place any node type in a slider element, you only have to change the `instanceof` type. I'm not sure if you can add more than one children, haven't test it myself to confirm or deny it. – barcasal Dec 31 '13 at 10:04
The instanceof is exactly the problem i have. I dont want this check for the node type. I want to create a content slider. This
element should be able to contain any other node type. For example in the first
element should be an image. In the second
there should be a two column text element and so on. I have updated the question.
– Jürgen Kleiß Dec 31 '13 at 13:36
Happy new year @JürgenKleiß! By taking a look at your updated question, it seems to me that a content collection would be more suitable to your needs rather than a content slider. A nodetype with 3-4 childnodes, where you can place anything in there and render them in your html file. – barcasal Jan 01 '14 at 13:02
At the moment i think you should not extend the content collection. So do you know when it will be possible to build this kind of feature? Also happy new year! – Jürgen Kleiß Jan 02 '14 at 11:07

Typo3 Neos: How to build a custom content slider?

Edit

1 Answers1

EDIT 2