October 1, 2013

Something Neos III - The content elements new clothes

Category: Florian Weiss

By: Florian Weiss

Assigning new templates to existing content elements

When creating my website I chose to go for a Zurb Foundation ( template.
After choosing the base template I liked the most - I assigned the main template to my site as described at:

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 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 ( ) 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: where we can see a list of the basic node types and 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>

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.





No comments yet. Be the first to comment on this!

Sorry, comments are closed for this post.