Something Neos III - The content elements new clothes

By: Florian Weiss

Assigning new templates to existing content elements

When creating my website I chose to go for a Zurb Foundation (http://foundation.zurb.com/) template.
After choosing the base template I liked the most - I assigned the main template to my site as described at: http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/AdjustingOutput.html

This didn't prove to be too much of a challenge, but when thinking about the small teaser boxes I have in my template I wondered how this is normally implemented.
Doing an own content element for these boxes would be possible (like described in http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/CustomContentElements.html but then again all I needed was a text, an image and a link on the image.

(I'd show you some pictures but there is an access right problem for uploading images at the moment - I'll post those as soon as I get the according permissions)

Sounds familiar eh? Yeah.. that's what text /w image does - so why should I reinvent the wheel for that one.

If only there was a way I could tell NEOS to use the standard text /w image content element with a different template but only for a specific part of my page... oh wait - there is!

When we check out the Typoscript Cookbook ( http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/TypoScriptCookbook.html ) we can see an example that assigns a specific width and height to each YouTube content element inside a "ThreeColumn" element with prototyping.
We can use the same approach to assign a new template.

But wait.. how do I know how the according variables are named? (of course you could guess it is named "template" - but who wants to waste his time betting on that?)
Well ChristianM on #typo3-neos to the rescue! He pointed me towards:
https://git.typo3.org/Packages/TYPO3.Neos.NodeTypes.git/blob/HEAD:/Configuration/NodeTypes.yaml where we can see a list of the basic node types and https://git.typo3.org/Packages/TYPO3.Neos.NodeTypes.git/blob/HEAD:/Resources/Private/TypoScript/Root.ts2 where we can see the typoscript used to use them. From the latter one we can learn that the var we seek is called "templatePath".

 So I just used it that way in my own packages Root.ts2 (I skipped using {} for better path comprehension)

page.body.content.thumbPreviews = TYPO3.Neos:ContentCollection
page.body.content.thumbPreviews.nodePath = 'thumbPreviews'
page.body.content.thumbPreviews.prototype(TYPO3.Neos.NodeTypes:TextWithImage).templatePath = 'resource://Weissheiten.Home/Private/Templates/Page/AltTemplates/SmallTeaserBox.html'

Now we have to put the according template at the correct place:
(I'll show you mine)

{namespace neos=TYPO3\Neos\ViewHelpers}
<neos:contentElement node="{node}">
 <div class="large-3 small-6 columns">
 <f:render partial="Image" arguments="{
			image: image,
			alternativeText: alternativeText,
			title: title,
			link: link,
			hasCaption: hasCaption,
			caption: caption,
			maximumWidth: maximumWidth,
			maximumHeight: maximumHeight,
			fluidTemplateTsObject: fluidTemplateTsObject
		}" />
 <h6 class="panel"><neos:contentElement.editable property="text">{text -> f:format.raw()}</neos:contentElement.editable></h6>
 </div>
</neos:contentElement>

When using a text /w image element now Neos searches for our own template - but does produce an error.
That is because the "Image" object is part of the text /w image template and Neos searches for a partial in the same directory it cannot find.
To solve this I opted to copy the Image.html template of the core and put it in my own AltTemplates directory in case I wanted to tamper with the image later.

You find the Image Template in: /Resources/Private/Templates/TypoScriptObjects/Partials and need to create an own "Partials" folder at the place you did put your new template in (/Weissheiten.Home/Resources/Templates/Page/AltTemplates/Partials in my case)

This should do the trick and whenever you create a text /w image at the according place defined in your typoscript now it should correctly use the new template.