TYPO3 - Isotope

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

Attention:

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

Links

• https://www.typo3-isotope.de
• https://www.coding.ms/documentation/typo3-isotope/
• https://www.coding.ms/typo3-extensions/typo3-isotope/

Installation

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

Usage

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"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:isotope="http://typo3.org/ns/CodingMs/Isotope/ViewHelpers">
    <f:section name="SectionKeyInFluidTemplate">
        <div id="isotope-item-{item.uid}" class="isotope-item {item.categoryClasses}">
            <f:image src="{item.image.uid}"
                     treatIdAsReference="1"
                     maxWidth="300"
                     alt="{item.image.title}"
                     title="{item.image.title}"/>
            <h3>{item.title}</h3>
            <div class="description"><f:format.html>{item.description}</f:format.html></div>
        </div>
    </f:section>
    <f:section name="Default">
        <!-- ... -->
    </f:section>
    <f:section name="LightBox">
        <!-- ... -->
    </f:section>
    <f:section name="LightBoxGallery">
        <!-- ... -->
    </f:section>
</div>

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>
    </f:for>
</div>