Skip navigation
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.

TYPO3 - Isotope

This extension uses the Isotope JavaScript library (via CDN - isotope.js is not part of this extension!) for displaying Images and text.


The isotope.js library is not part of this extension and will be loaded by a CDN-URL. Please respect the license terms of this library! See: https://isotope.metafizzy.co/#license



Install the extension as usual. Afterwards include the static template.


First of all, create a Storage-Container in page tree, where you will store the required records. In this Container you have to create the categories for the category menu. Now that you have created your required categories, you have to start to create your items.

Possible fields in Isotope items:

  • Title: The title text of the Isotope item.
  • Template-Section: You're able to define different Template-Sections for individual behaviours. Following Templates are predefined:
    • Default: Simple Isotope item. If a link is set, it will be wrap the item.
    • LightBox: Another simple Isotope item, but the item is wrapped with a link to original image file, for creating a lightbox behaviour.
    • LightBox Gallery: This Isotope item has an image gallery on click in a Lightbox feature.
  • Link: The link enables you to link the Isotope item. This link is not available in both LightBox items!
  • Description text: The description text of the Isotope item.
  • Image: The image of the Isotope item.
  • File collection: The file collection is for assigning more image for example fe an image gallery.
  • Categories: The selected categories of the Isotope item. All available categories in Isotope items will be uses for building the categories menu.

Finally go to the Page-Module and create a Isotope plugin. In this plugin you've to select the record storage, so that the plugin knows where your items are stored. For multiple Isotope plugins on your website you'll need a Storage-Container for each instance.

Define an own Isotope item template

First you have to define the selection entry for the TYPO3 backend. For this you simply add the following Page-TypoScript/tsconfig lines:

TCEFORM.tx_isotope_domain_model_item {
    template_section {
        addItems {
            SectionKeyInFluidTemplate = This is the label

After that you need to define another Template root path for overriding the Fluid Templates. This can be done by TypoScript-Constants:

themes.configuration {
    extension {
        isotope {
            view {
                templateRootPath = EXT:your_sitepackage/Resources/Private/Templates/
                partialRootPath = EXT:your_sitepackage/Resources/Private/Partials/
                layoutRootPath = EXT:your_sitepackage/Resources/Private/Layouts/

Finally copy the Resources/Private/Partials/Isotope/Item.html into your Partial folder and add your custom section:

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    <f:section name="SectionKeyInFluidTemplate">
        <div id="isotope-item-{item.uid}" class="isotope-item {item.categoryClasses}">
            <f:image src="{item.image.uid}"
            <div class="description"><f:format.html>{item.description}</f:format.html></div>
    <f:section name="Default">
        <!-- ... -->
    <f:section name="LightBox">
        <!-- ... -->
    <f:section name="LightBoxGallery">
        <!-- ... -->

A custom CSS class for the active state of the filter

For using a custom active CSS class within the filter just add an attribute data-active-class="my-class".

<div id="isotope-{uid}-filter" class="button-group" role="group" data-active-class="is-checked">
    <button data-filter="*" type="button" class="button active"><f:translate key="tx_isotope_label.show_all" /></button>
    <f:for each="{categories}" as="category">
        <button data-filter=".category-{category.uid}" type="button" class="button">{category.title}</button>
TYPO3 Isotope Extension

TYPO3 Isotope

This extension uses the Isotope JavaScript library (via CDN - isotope.js is not part of this extension! Please respect the License, see https://isotope.metafizzy.co/#license) for displaying Images and text.


Contact request

You can contact us at any time

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question