Loading...
Navigation überspringen
Bitte beachte, dass sich diese Dokumentation auf die neuste Version dieser Erweiterung bezieht. Wenn eine ältere Version eingesetzt wird, kann diese abweichen. Die jeweils passende Dokumentation befindet sich im Dokumentation-Verzeichnis der Erweiterung.

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

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>
Dokumentation
TYPO3 Isotope Erweiterung

TYPO3 Isotope

Diese Erweiterung nutzt die Isotope JavaScript-Bibliothek (via CDN - isotope.js ist kein Teil dieser Erweiterung! Bitte respektiere die Lizenzbestimmungen, siehe https://isotope.metafizzy.co/#license) für die Darstellung von Bildern und Texten.

Menü

Kontaktanfrage

Du kannst uns jederzeit kontaktieren

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
QWQ_________5CD______
__X____P____9_E___9Q5
__2___4IA___51P______
__8____M______O___3RN
__1_________XJF______