TYPO3 - Isotope

Diese Erweiterung nutzt die Isotope JavaScript-Bibliothek (via CDN - isotope.js ist kein Teil dieser Erweiterung!) für die Darstellung von Bildern und Texten.

Achtung:

Die isotope.js library ist kein Teil dieser Erweiterung und wird via CDN-URL geladen. Bitte respektiere die Lizenz-Bestimmungen dieser Bibliothek! Siehe: 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

Installiere diese Erweiterung wie gewohnt und füge anschließend die statischen TypoScript-Template hinzu.

Verwendung

Zuerst musst Du einen Daten-Container im Seitenbaum anlegen, wo Du Deine erforderlichen Datensätze ablegen wirst. In diesem Container musst Du die Kategorien für das Kategorie-Menü anlegen. Wenn Sie Du diese Kategorien angelegt hast, kannst Du damit starten Deine Isotope-Elemente anzulegen.

Mögliche Felder in Isotope-Elementen:

• Titel: Der Titel des Isotope-Elements.
• Template-Section: Du hast die Möglichkeit verschiedene Template-Sections für verschiedene Verhalten zu definieren. Folgende Templates sind vordefiniert:
  • Default: Einfaches Isotope-Element. Wenn ein Link gesetzt ist, wird dieser um das Element gelegt.
  • LightBox: Ein weiteres einfaches Isotope-Element, aber das Element wird mit einem Link zum original Bild umschlossen, so dass ein LightBox-Verhalten erstellt werden kann.
  • LightBox Gallery: Dieses Isotope-Element hat ein Bild-Galerie beim Klick mit einer LightBox-Funktion.
• Link: Der Link ermöglicht es Ihnen einen Link auf das Isotope-Element zu legen. Dieser Link ist nicht verfügbar in beiden LightBox-Elementen!
• Beschreibungstext: Der Beschreibungstext des Isotope-Elements.
• Bild: Das Bild des Isotope-Elements.
• Datei-Kollektion: Die Datei-Kollektion ermöglicht es mehrere Bild bspw. für eine Bilder-Galerie auszuwählen.
• Kategorien: Die ausgewählten Kategorien eines Isotope-Elements. Alle verfügbaren Kategorien in allen Isotope-Elementen werden verwendet um das Kategorie-Menü zu bauen.

Abschließend wechselst Du in das Seiten-Modul und erstellst an gewünschter Stelle ein Isotope-Plugin. In diesem Plugin musst Du die Datensatz-Container auswählen, in dem Du Deine Datensätze erstellt hast. Für mehrere Isotope-Plugins benötigst Du jeweils einen Datensatz-Container.

Eigene Isotope-Element Templates anlegen

Zuerst musst Du einen Auswahlbox-Eintrag für das TYPO3-Backend definieren. Dazu fügst Du einfach das folgende Page-TypoScript/tsconfig hinzu:

TCEFORM.tx_isotope_domain_model_item {
    template_section {
        addItems {
            SectionKeyInFluidTemplate = Dies ist das Label
        }
    }
}

Danach musst Du einen weiteren Template-Rootpfad definieren, so dass Du die erforderliche Fluid-Template Datei überschreiben kannst. Dies kann mit TypoScript-Konstanten geschehen:

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/
            }
        }
    }
}

Abschließend musst Du die Resources/Private/Partials/Isotope/Item.html Datei in das Fluid-Partial Verzeichnis kopieren und Deine neue Section hinzufügen:

<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>

Eine eigene CSS-Klasse für den aktiv Status des Filters verwenden

Um eine spezielle aktiv CSS-Klasse für den Status zu verwenden, einfach ein Attribut data-active-class="my-class" einsetzen.

<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>