Mit imageTweak eine FlexSlider Galerie erstellen

imageTweak for kitFrameworkBildergalerien gibt es wie Sand am Meer - beim AMASP Projekt sind über zwei Dutzend Galerien für WebsiteBaker gelistet und das ist nur ein Bruchteil des Angebots, warum also noch eine Galerie? Weil die Auswahl riesig, die Qualität jedoch erschreckend niedrig ist.

imageTweak stellt eine Schnittstelle zur Verfügung die eine rasche und flexible Bereitstellung von Galerien mit folgenden Merkmalen ermöglicht:

  • automatisches Auslesen von Bildern aus einem beliebigen Verzeichnis 
  • alle Bilder werden automatisch optimiert und in zwei Größen zur Verfügung gestellt: fullsize und thumbnail
  • die Ausgabe passt sich automatisch und ohne Einschränkungen an (Responsive Webdesign)
  • Mehrsprachigkeit: für jedes Bild kann in beliebig vielen Sprachen ein alt und title Tag, eine Beschreibung mit und ohne HTML sowie ein Link mit einem eigenen title Tag zur Verfügung gestellt werden
  • Sandbox für Webdesigner und Entwickler ermöglicht die Entwicklung und Bereitstellung von eigenen Galerien und Varianten

Das kitCommand

~~ imagetweak action[gallery] directory[example] ~~

liest das Media Verzeichnis /example aus und zeigt einen FlexSlider mit der Basisfunktionalität an. Das dürfte in vielen Fällen schon völlig ausreichen.

Mit dem zusätzlichen Parameter mode[] im kitCommand können Sie das Layout des FlexSlider beeinflussen:

  • mode[thumbnail] - zeigt zusätzlich Thumbnails als Mosaik unterhalb des Sliders an (FlexSlider Demo)
  • mode[thumbnail_slider] - zeigt zusätzlich Thumbnails als Navigationsslider unterhalb des Sliders an (FlexSlider Demo)
  • mode[carousel] - zeigt den Slider in einem Carousel Modus an (FlexSlider Demo)

duzu kommen noch etwa 20 optionale Parameter mit denen der FlexSlider gesteuert werden kann - die Hilfedatei zum imageTweak kitCommand liefert Ihnen hierzu alle Information und viele Beispiele.

Das sieht zwar alles nett aus, bis hierhin unterscheidet sich eine imageTweak Galerie jedoch kaum von zahlreichen Bildergalerien, die im großen Add-on Teich rumdümpeln. Es ist an der Zeit, sich intensiver mit den einzelnen Bildern der Galerie zu beschäftigen und ihnen ein wenig Inhalt einzuhauchen.

gallery.json im Konfigurationseditor bearbeitenimageTweak legt in dem Verzeichnis, das mit dem Parameter directory[] angegeben wird, automatisch ein Unterverzeichnis /gallery an und platziert dort die optimierten Bilder für die Galerie. Außerdem erstellt imageTweak die Datei gallery.json im Verzeichnis /gallery.

Verwenden Sie zum Bearbeiten der JSON Datei gallery.json den kitFramework ConfigurationEditor - Sie finden den Editor unter den Admin-Tools des von Ihnen verwendeten Content Management System (CMS). Wählen Sie die gallery.json in der Drop-Down Liste aus. Der Editor zeigt Ihnen nun den Inhalt der gallery.json an. Rechts daneben finden Sie einen Hilfetext mit Erläuterungen zu der gallery.json (siehe Screenshot).

Die Datei enthält einen Eintrag zu jedem einzelnen Bild, das in der Galerie verwendet wird. Klicken Sie auf den Dateinamen eines Bildes um den Eintrag aufzuklappen. Die darunter befindlichen Einträge fullsize und thumbnail enthalten die URL sowie Größenangaben, hier sollten Sie nichts ändern. Der Eintrag locale enthält die Beschreibungen für jede verfügbare Sprache (mindestens en und de, Sie können in der config.imagetweak.json weitere Sprachen festlegen).

Öffnen Sie z.B. de (Deutsch), finden Sie:

  • description - hier können Sie eine Beschreibung für das Bild angeben, die im alt und title Tag des jeweiligen Bildes verwendet wird
  • content - hier können Sie Beschreibung für das Bild angeben, die sichtbar am unteren Rand des Bildes eingeblendet wird. Die Beschreibung kann aus unformatiertem Text oder aus einem beliebigen HTML Inhalt bestehen
  • link > url - das Bild wird mit der angegebenen URL verlinkt, bitte geben Sie hier vollständige Adressen einschließlich http:// an
  • link > target - da die Gallerie in einem iFrame ausgeführt wird, ist diese Angabe wichtig: _parent öffnet den Link im übergeordneten CMS, _blank öffnet den Link in einem neuen Fenster
  • link > title - der eingetragene Text wird angezeigt, wenn mit der Maus auf den Link gezeigt wird.

auf einer mehrsprachigen Seite nehmen Sie die Einträge bei jedem Bild und für jede verwendete Sprache vor.

Die folgende FlexSlider Galerie wird mit dem kitCommand

~~ imagetweak action[gallery] directory[example] mode[thumbnail_slider] ~~

generiert:

Bei dieser Galerie sind alle Bilder sowohl mit einer description als auch einem content als Beschreibung versehen, ein paar Bilder sind zusätzlich verlinkt - nutzen Sie die Hilfe zu imageTweak um weitere Einstell- und Anpassungsmöglichkeiten zu entdecken.

Der FlexSlider kann und soll nicht alle Einsatzszenarien einer Bildergalerie abdecken. imageTweak stellt Webdesignern und Entwicklern die Basisfunktionen für die Gestaltung eigener Galerien in Form einer Sandbox zur Verfügung. Mit

~~ imagetweak action[gallery] type[sandbox] directory[example] ~~

erhalten Sie die Ausgabe aller Daten der gallery.json in einem eigenen Template. Sie finden das sandbox.twig Template im Verzeichnis

/kit2/extension/phpmanufaktur/phpManufaktur/imageTweak/Template/default

das sandbox.twig Template enthält zusätzliche Hinweise. Nutzen Sie dieses Sandbox Template um eine eigene Galerie zu erstellen - imageTweak liefert Ihnen alle Daten hierzu.

Sehr gerne können Sie uns eigene Galerien, die auf imageTweak aufbauen, zur Verfügung stellen - wir kümmern uns um eine Einbindung und stellen allen Nutzern des kitFramework zur Verfügung.

ANONYMOUS, 23.07.2014