Adding a lightbox effect to your content in TYPO3 Neos

• Tue, Mar 10, 2015
• 3-minute read

The problem

Neos was designed to provide a small but stable base for content management needs. This implies, that certain functionality or features are not provided by the creators of Neos upfront - but can be implemented as needed by everyone that needs it.

For us, this meant that the well known “enable click-enlarge” checkbox from TYPO3 CMS just doesn’t exist in Neos - and also no lightbox effect is implemented on content images right away.

This might sound strange in the first run - but opens a wide range of ways to approach something and gives us (the implementors) a great flexibility which I think is a fine idea.

Read on to see how we managed to get that requirement implemented:

One possible solution

The Javascript-Part is based on Fancybox which actually does the whole visual magic. But to enable the Fancybox plugin to work, the genereated Markup for an image in the content section must be modified a bit.

The rendering of pages and content elements in Neos is built on top of the Fluid templating engine. As the Image-Prototype is rendered as a partial, the solution starts there: We define a new path for the Partials-Directory (where Fluid looks for the Partials-Files):

Resources/Private/TypoScript/Root.ts2

prototype(TYPO3.Neos.NodeTypes:Image) {
       partialRootPath = 'resource://Vendor.Site/Private/Templates/NodeTypes/Partials'
}
prototype(TYPO3.Neos.NodeTypes:TextWithImage) {
       partialRootPath = 'resource://Vendor.Site/Private/Templates/NodeTypes/Partials'
}

Then add the new partial file to the path mentioned above:

Resources/Private/Templates/NodeTypes/Partials/Image.html

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<figure{f:if(condition: imageClassName, then: ' class="{imageClassName}"')}>
    <f:if condition="{image}">
        <f:then>
            <f:if condition="{link}">
                <f:then>
                    <a href="{link}"><media:image asset="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" allowCropping="{allowCropping}" allowUpScaling="{allowUpScaling}" /></a>
                </f:then>
                <f:else>
                    <f:if condition="{image.originalImage}">
                        <f:then>
                            <a href="{f:uri.resource(resource: image.originalImage.resource)}" class="lightbox">
                                <media:image asset="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" allowCropping="{allowCropping}" allowUpScaling="{allowUpScaling}" />
                            </a>
                        </f:then>
                        <f:else>
                            <a href="{f:uri.resource(resource: image.resource)}" class="lightbox">
                                <media:image asset="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" allowCropping="{allowCropping}" allowUpScaling="{allowUpScaling}" />
                            </a>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </f:then>
        <f:else>
            <f:security.ifAccess resource="TYPO3_Neos_Backend_GeneralAccess">
                <f:if condition="{node.context.workspace.name} != 'live'">
                    <img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.svg')}" title="Dummy image" alt="Dummy image" class="neos-handle" />
                </f:if>
            </f:security.ifAccess>
        </f:else>
    </f:if>
    <f:if condition="{hasCaption}">
        <figcaption>
            {neos:contentElement.editable(property: 'caption', node: node)}
        </figcaption>
    </f:if>
</figure>

The original file which makes a perfect base can be copied from the TYPO3.Neos.NodeTypes Package (in Resources/Private/Templates/NodeTypes/Partials/Image.html).

What we changed is basically that we wrapped all images into links that point to the original image and have a class="lightbox". With this class, we can now point the fancybox plugin and enable the lightbox effect only on those images that have that class:

in your Site’s JavaScript

jQuery('.typo3-neos-nodetypes-image a.lightbox, .typo3-neos-nodetypes-textwithimage a.lightbox').fancybox();

For further information on configuring the plugin, have a look at the Fancybox Documentation.

Live Demo

You can see the Lightbox in a “live demo” if you want to name it that way, just head over to the Moto Lifestyle Website

Limitations

What we didn’t implement at the moment is the above mentioned and missed checkbox to enable/disable the click-enlarge feature as we didn’t see a need for that in the curren project. But this should be easily extendable if needed.

Thanks

I’d like to thank Christian Müller and Robert Lemke from Flownative who provided the initial solution - I can only recommend their support services around Neos!