sf_filecollection_gallery

Einfache FileCollection Galerie

Einfache Bildergalerie, die eine Dateisammlung mit statischen oder ordnerbasierten Bildern rendert. Es bietet ein einfaches Layout mit Seitenumbruch und Leuchtkasten. Basierend auf der fluid-Vorlage kann das Frontend-Layout schnell und einfach bearbeitet werden.

Da diese Galerie einen Satz von Dateien einer Dateisammlung rendert, kann sie etwas anderes als eine Bildergalerie rendern, abhängig von der bereitgestellten Vorlage. (z.B. Liste der herunterladbaren Dateien).

Installation

Installieren Sie die Simple FileCollection Gallery und fügen Sie die statische Vorlage hinzu.

Einstellungen

Die Simple FileCollection Gallery bietet Einstellungen zur Anpassung der Ausgabe.

view.templateRootPaths = Der Wurzelpfad für Vorlagen als Fallback-Array
view.partialRootPaths = Der Wurzelpfad für Partiale als Fallback-Array
view.layoutRootPaths = Der Wurzelpfad für Layouts als Fallback-Array

settings.lightbox = Zusätzlicher Ausgang für Leuchtkasteneinstellungen, Standard'lightbox'
settings.enableLightbox = Switch if lightbox is enabled  HINWEIS: Sie benötigen eine andere Erweiterung (oder etwas anderes), um diesen Leuchtkasten darzustellen.
settings.cssFile = Pfad zur CSS-Datei

settings.image.width = Breite des einzelnen Bildes
settings.image.height = Höhe des einzelnen Bildes
settings.image.lightboxWidth = Die maximale Breite des Leuchtkastenbildes

Verwendung

Erstellen Sie eine FileCollection irgendwo im Seitenbaum Ihrer TYPO3-Installation. Wählen Sie die FileCollection(s) im Plugin über den Wizard oder den Seitenbaum aus. Die Reihenfolge der Bilder ist wie die Sortierung in der FileCollection und die Reihenfolge der Sammlungen im Plugin.

Es gibt noch einige weitere Optionen für das Plugin:

fileCollection = die ausgewählte(n) fileCollection(s)
imagesPerPage = Legt die Anzahl der zu rendernden Bilder pro Seitenumbruch fest
numberOfPages = Legt die Anzahl der sichtbaren Seiten in der Paginierungsliste fest
insertAbove = Schaltet die Seitennummerierung über der Bilderliste um
insertBelow = Schaltet die Seitenzahl unter der Bilderliste um
enableLightbox = Schaltet um, ob ein Leuchtkasten für die Bilderliste aktiviert ist  HINWEIS: Sie benötigen eine andere Erweiterung (oder etwas anderes), um diesen Leuchtkasten darzustellen.
enableDescription = Wenn die Metadaten 'description' angegeben sind, wird die Beschreibung unterhalb eines einzelnen Bildes gewechselt

Templattieren

Seit der Version 1.2.0 ist es möglich, verschachtelte Layouts mit einem Vorschaubild pro enthaltener Dateisammlung zu verwenden. Dank an Ferhat36

Seit der Version 1.1 von sf_filecollection_gallery ist es möglich, die Option templateRootPaths-Array, um weitere Vorlagenordner mit Fallback bereitzustellen.

Derzeit werden zwei Vorlagen verwendet, siehe Ressourcen/Private/Vorlagen:

• Gallery/List.html für die Galerieansicht
• Paginate/Index.html für das Seitenumbruch-Widget

Erstellen einer eigenen Vorlage

Wenn Sie eine eigene Vorlage erstellen möchten, fügen Sie einfach einen weiteren Eintrag zum templateRootPaths-Array in Ihrem TS hinzu:

plugin.tx_sffilecollectiongallery {
    view.templateRootPaths.1 = fileadmin/path/to/Templates
}

Sie sollten vielleicht einige Schiebereglerfunktionen hinzufügen, also haben wir bxSlider für dieses einfache Tutorial verwendet. Alles, was Sie tun müssen, ist, die Elemente der Dateisammlung als ungeordnete Liste darzustellen, vorausgesetzt, Sie haben das CSS und JS integriert für bxSlider bereits, fügen Sie einige praktische JS-Initialisierung auf document.ready hinzu.

Ihre neue Gallery/List.html-Datei könnte etwa so aussehen:

{namespace s=SKYFILLERS\SfFilecollectionGallery\ViewHelpers}}

<f:layout name="Default"/>

<f:section name="main">
    <f:if condition="{imageItems}">
        <ul class="fadeImages">
            <f:für jedes="{imageItems}" als="object">
                <li class="sf-filecollection-gallery-image-container">
                    <f:image image="{object}" width="{settings.image.width}" height="{settings.image.height}" alt="{object.properties.alternative}" title="{object.properties.title}"/>
                </li>
            </f:for>
        </ul>
    </f:if> if>
</f:section>

Und die JS, um dies in Gang zu bringen, ist wie folgt:

$(document).ready(function(){)
    $('.fadeImages').bxSlider();
});

Glänzend! Natürlich können Sie auch komplexere fluid-Templates hinzufügen.

Inhaltselement uid in Vorlage verwenden

Seit der Version 1.1.4 ist es möglich, die Elemente uid in Ihrer Vorlage zu verwenden. Dies ist für einige JS-Funktionen wie Leuchtkästen oder Schieberegler notwendig. Auf die uid kann über: {currentUid}

Credits

Diese Erweiterung verwendet einige Codes von Drittanbietern.

• Array Seitenumbruch Widget Ein Array Pagination Widget von Paul Beck und Armin Ruediger Vieweg
• InklusiveFileViewHelper Ein ViewHelper zum Einbinden der css-Datei über das Extension-Layout, das Georg Ringer in seiner News-Erweiterung zur Verfügung stellt.