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 respektieren Sie die Lizenz-Bestimmungen dieser Bibliothek! Siehe: https://isotope.metafizzy.co/#license

Links

Installation

Installieren Sie diese Erweiterung wie gewohnt und fügen Sie anschließend die statischen TypoScript-Template hinzu.

Verwendung

Zuerst müssen Sie einen Daten-Container im Seitenbaum anlegen, wo Sie ihre erforderlichen Datensätze ablegen werden. In diesem Container müssen Sie die Kategorien für das Kategorie-Menü anlegen. Wenn Sie diese Kategorien angelegt haben, können Sie damit starten Ihre Isotope-Elemente anzulegen.

Mögliche Felder in Isotope-Elementen:

  • Titel: Der Titel des Isotope-Elements.
  • Template-Section: Sie haben 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 wechseln Sie in das Seiten-Modul und erstellen an gewünschter stelle ein Isotope-Plugin. In diesem Plugin müssen Sie die Datensatz-Container auswählen, in dem Sie Ihre Datensätze erstellt haben. Für mehrere Isotope-Plugins benötigen Sie jeweils einen Datensatz-Container.

Eigene Isotope-Element Templates anlegen

Zuerst müssen Sie einen Auswahlbox-Eintrag für das TYPO3-Backend definieren. Dazu fügen Sie einfach das folgende Page-TypoScript/tsconfig hinzu:

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

Danach müssen Sie einen weiteren Template-Rootpfad definieren, so dass Sie die erforderliche Fluid-Template Datei überschreiben können. 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 müssen Sie die Resources/Private/Partials/Isotope/Item.html Datei in das Fluid-Partial Verzeichnis kopieren und Ihre 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>