Bildergalerien und Slideshows im ePaper integrieren am Beispiel von Flickr

Des Öfteren erreichen uns Anfragen bezüglich der Bildergalerien im ePaper. Oft steht dahinter der Wunsch, die Galerien individueller zu gestalten, oder an das ePaper anzupassen. In diesem Tutorial möchten wir Ihnen daher an einem konkreten Beispiel zeigen, wie Sie diesbezüglich eigene Vorstellungen in unseren ePapern mit Hilfe von externen Links und der Shadowbox, realisieren können. Dabei steht weniger eine genaue Schritt für Schritt Anleitung, sondern eher die Vorgehensweise im Mittelpunkt, denn diese können Sie auf alle diese Dienste anwenden, die es erlauben, Ihre Seiten in einem Frame wie der ePaper Shadowbox zu öffnen.

 

1. Flickr Account anlegen

 

Eines der beliebtesten Fotoportale der Welt ist Flickr. Flickr ist ein Dienst von Yahoo, der es Ihnen ermöglicht, kostenlos eine gewisse Zahl an Fotos in einen Account zu laden, diese in Fotoalben (Ordnern) oder Galerien zu sortieren und zu organisieren, vor allem aber diese über das Internet mit anderen Menschen zu teilen. Auf http://www.flickr.com/ können Sie sich über Google oder Facebook anmelden. Unabhänig davon können Sie sich auch neu registrieren, um einen Account anzulegen. Sie erstellen in diesem Fall einen Yahoo Acount, über den Sie sich für Flickr anmelden können.

01.Registrieren_bei_flickr.png

 

Anschließend können Sie umgehend Fotos hochladen. Fassen Sie die Fotos, die Sie in einer Galerie verwenden möchten, in einem Album (Ordner) zusammen. So fällt es Ihnen leichter, den Überblick zu bewahren und gegebenenfalls Fotos in diesem Ordner auszutauschen. Der Vorteil liegt letztendlich darin, dass Sie so einfach zu pflegende Bildergalerien erhalten, die Sie in mehreren ePapern wieder verwenden können. Letztendlich, in Abhänigkeit wie es ein Anbieter, also ein Fotoportal oder Hoster ermöglicht diese Galerien zu aktualisieren, können Sie so, unabhängig vom CMS, Galerien in einem bereits publizierten ePaper pflegen und warten.

Im hier gezeigten Beispiel bin ich auf die geschilderte Weise vorgegangen. Ich habe 7 Bilder für meine Galerie bei Flickr hochgeladen und diese in einem Album zusammengefasst.

 

02.Mein_Flickr_album.png

 

Schön wäre es nun, wenn ich aus diesem Album auf Flickr eine Galerie erstellen und diese in einer Shadowbox im ePaper integrieren könnte. Ganz so einfach ist es jedoch nicht. Wie Eingangs schon kurz erwähnt, erzeugt die Shadowbox über Javascript einen HTML-Frame, in welchem dann die über eine URL (Webadresse) angegeben Inhalte geladen und angezeigt werden. Es wird sozusagen eine andere Webseite innerhalb einer Webseite geladen. Nun gibt es Anbieter, die nicht möchten, dass Ihre Webseiten auf diese Weise in anderen Seiten integriert werden. Zu diesen Anbietern gehören unter anderem Google und Facebook, aber auch Flickr. Generell sollte man sich in Bezug darauf also Folgendes merken: Innerhalb einer Shadowbox des ePapers können nur Webseiten geladen werden, die es erlauben, in einem HTML-Frame aufgerufen zu werden.

 

2. Eine Slideshow erstellen

 

Zum Glück gibt es für Flickr gleich mehrere Tools und Dienste, über die Sie auf Ihre Flickr Fotos und Alben zugreifen können und die es erlauben, Inhalte in Frames zu öffnen. Einer dieser Dienste ist SlideFlickr und unter http://www.slideflickr.com/ im Internet erreichbar. Über diese Seite können Sie sich in nur einer Minute eine einfache Slideshow erstellen, die Sie sofort in Ihrem ePaper verwenden können. Da wir diese Slidedshow an unser ePaper anpassen wollen, werden wir uns für ein Paar zusätzliche Einstellungen etwas mehr Zeit lassen.

 

03.SF_create_slideShow.png

 

Auf SlideFlickr können Sie sich wiederum registrieren oder über Ihren Flickr Account, also mit der dazugehörigen Yahoo ID, anmelden. Das ist allerdings nicht unbedingt erforderlich. Wenn Sie sich nicht auf dieser Seite anmelden möchten, klicken Sie einfach auf den Button Create your own slideshow. Sie bekommen dann die folgende Seite angezeigt, auf der Sie ein Paar Einstellungen festlegen können. Ich werde Ihnen diese kurz erklären.

 

 04.SF_flickr_url.png

 

 

1. Insert a Flickr username or URL: Da sich in meinem Flickr Account bisher nur ein öffentliches Fotoalbum befindet, genügt es hier, wenn ich meinen Flickr Username angebe. Haben Sie auf Flickr bereits mehrere Alben angelegt, können Sie auch eine direkte URL zu einem dieser Alben angeben. Diese URL wird Ihnen z.. B. in der Adressleiste Ihres Browsers angezeigt, wenn Sie auf Flickr ein konkretes Album geöffnet haben. Ebenso können Sie die URL zu einer Flickr Gruppe herausfinden und angeben.

2. Customize your Slideshow (Optional): Darunter verbergen sich die Einstellungen, die Sie zur Gestaltung der Slideshow vornehmen können. Im Folgenden werde ich die einzelnen Einstellungen kurz erläutern.

 

05.sf_customize_slideshow.png

 

Unter den oberen vier Optionen, die in Form von Karteireitern angelegt sind, können Sie die Auswahl der Fotos, die Sie in Ihrem Flickr Account hochgeladen haben, noch einmal grob filtern. Wählen Sie die Option All, werden in der Slideshow alle verfügbaren Fotos Ihres Flickr Accounts verwendet. Wählen Sie hingegen Sets können Sie ein bestimmtes Album angeben, dessen Bilder in der Slideshow verwendet werden sollen. Dazu ist es aber nötig, dass Sie im 1. Schritt zumindest Ihren Flickr Username angegeben haben. Klicken Sie auf Tags, können Sie, per Komma getrennt, Tags angeben. Dann werden die Bilder gezeigt, die Sie auf Flickr mit diesen Tags versehen haben. Tags sind im Grunde genommen nichts weiter als kleine Schilder oder besser Bezeichnungen, mit denen Sie Ihre Fotos versehen ordnen und filtern können. Über die Option Favorites hingegen, können Sie eine Slideshow erstellen die Ihre beliebtesten öffentlichen Fotos enthält. Diese letzte Funktion spielt für eine gezielte Auswahl in einer Slideshow sicher die geringste Rolle. Für mein Beispiel habe ich, da ich, wie gesagt, bisher nur ein Fotoalbum auf Flickr erstellt habe, dessen Fotos alle verwendet werden sollen, die Option All verwendet.

Die erste der unteren Optionen ist Width & Height. Darüber legen Sie die Breite und Höhe der Slideshow fest. Für mein Demo habe ich eine Breite von 600px und eine Höhe von 400px entschieden. Unter Text können Sie eigene Formulierungen, Begriffe oder Übersetzungen angeben, die einem Betrachter angezeigt werden sollen, wenn die Slideshow geladen oder pausiert wird, welche Nachricht er zu lesen bekommt, wenn er am Ende der Slideshow angekommen ist, sowie wenn Sie wieder von vorn beginnt.

 

06.sf_customize_text.png

Unter dem Reiter Background können Sie eine Hintergrundfarbe auswählen. Es ist auch möglich eine URL zu einem jpg-Bild anzugeben. Optimalerweise sollten Sie dieses aber vorher bereits in der Größe anlegen, die die Slideshow letztendlich haben soll.

 

07.sf_customize_bg.png

 

Unter Speed können Sie die Geschwindigkeit, in den Stufen Langsam, Mittel und Schnell, in der die Bilder in der Slideshow angezeigt werden sollen, bestimmen. Außerdem können Sie über die Checkbox Start Paused festlegen, ob die Checkbox beim ersten Aufruf im Pause Modus startet, oder gleich mit dem Durchlauf der Bilder beginnt.

 

08.sf_customize_speed.png

Der Punkt Logo & URL klingt etwas vielversprechender, als er tatsächlich ist, denn ein richtiges Logo können Sie nicht verwenden. Immerhin können Sie aber einen kurzen Satz eingeben, der oben in der Slideshow angezeigt wird. Im unteren der beiden Felder ist es möglich, eine URL einzutragen, die geöffnet werden soll, sobald jemand auf diesen Logo-Satz klickt.

 

09.sf_customize_logo.png

Außerdem ist es möglich, unter dem Reiter Music die URL zu einer mp3-Datei anzugeben, die zum Beispiel auf Ihrem Webserver liegt. Diese Datei wird dann abgespielt sobald die Slideshow aufgerufen wird. Es wäre also durchaus möglich, die Slideshow als mp3-Player umzufunktionieren und im ePaper zu integrieren. Aber vielleicht lassen sich dafür noch geeignetere Dienste finden.

 

10.sf_customize_sound.png

Die Einstellungen, die Sie unter CC (betrifft Lizenzen) und Comments (betrifft Kommentare) vornehmen können, sind für die Gestaltung der Slideshow eher unerheblich. Sie sollten sich damit aber noch einmal befassen, wenn Sie vorhaben, diesen Dienst zu nutzen. Für dieses Beispiel habe ich unter CC die Option No License eingestellt und unter Comments die Checkbox Allow comments, also Kommentare erlauben, aktiviert.

3. Hit Preview: Nachdem Sie alle Einstellungen getroffen haben, können Sie im 3. Schritt auf den rosaroten Preview! Button klicken. Damit wird Ihre Slideshow erstellt.

 

11.sf_hit_preview.png

Sie erhalten nun eine Vorschau-Ansicht der Slideshow, in der Sie alle Ihre ausgewählten Bilder sehen sollten. Kopieren Sie den Code aus dem Feld unter Embed in die Zwischenablage.

 

12.sf_preview.png

 

 

3. Die Slideshow im ePaper einbinden

 

Alles, was Sie jetzt noch erledigen müssen, ist, die Slideshow in einem ePaper zu integrieren. Dazu fügen wir den Embed Code, den wir gerade in die Zwischenablage kopiert haben, in einem Texteditor ein. Wir benötigen nämlich nicht den gesamten Code, sondern nur die in diesem Code angegebene URL zur Resource, also zu der Slideshow. Im folgenden Bild ist der Code etwas übersichtlicher formatiert. Die URL, auf die es ankommt, ist gelb hervorgehoben. Kopieren Sie sich diese URL wieder in die Zwischenablage.

 

13.embed_code.png

 

Im Anschluss daran wechseln Sie einfach ins ePaper CMS und klicken auf das Seite bearbeiten Symbol für die Seite, auf der Sie die Bildergalerie bzw. Slideshow hinzufügen wollen. Klicken Sie im sich darauf öffnenden Dialog Fenster auf neues Element hinzufügen und wählen Sie einen externen Link aus dem Drop-Down-Menü. Tragen Sie im Link hinzufügen Fenster Ihre Kurzbezeichnung und Beschreibung ein. Um die Slideshow Ihren Lesern wie eine Galerie erscheinen zu lassen, können Sie als Icon das galery.png wählen. Als Link-Adresse fügen Sie die URL ein, die Sie aus dem Embed Code herauskopiert haben. Aktivieren Sie zum Schluss die Checkbox für Link in Shadowbox öffnen, geben Sie unter Breite und Höhe die Maße Ihrer Slideshow an und speichern Sie Ihre Angaben.

 

14.cms_Link_hinzufuegen.png

 

Nach dem Speichern steht Ihre neue Galerie auch schon in der ePaper Vorschau zur Verfügung. Je nach Ihren Einstellungen lässt sie sich über einen Klick auf das Item in der Mediabox oder auf den Rahmen öffnen.

 

15.epaper_vorschau.png

 

Im folgenden Bild sehen Sie die Slideshow, die ich für dieses Beispiel erstellt habe.

 

16.slide_1.png

 

Durch einen Klick auf den oben stehenden Satz, also das, was wir auf der SlideFlickr Seite für das Logo eingetragen haben, öffnet Sich die 1000° ePaper Seite. Ein Leser kann über den Pause Button den Durchlauf der Bilder anhalten, über die Thumbnails zu bestimmten Bildern springen und die Lautstärke der Hintergrundbeschallung regeln.

 

17.slide_2.png

 

Fährt der Leser mit der Maus direkt über ein Bild in der Slideshow, werden weitere Navigationselemente angezeigt. Zusätzlich erscheint in der Mitte ein mit i gekennzeichneter Infobutton.

 

18.slide_3.png

 

Durch einen Klick auf diesen Infobutton wird ein Layer über dem Bild geöffnet, in dem der Titel sowie die Beschreibung des Bildes angezeigt werden, die Sie dafür auf Flickr angegeben haben. Darüber können Sie also im Handumdrehen eigene Beschreibungstexte für Ihre Bilder hinzufügen.

Dieses Tutorial sollte Ihnen zeigen, wie Sie mit relativ einfachen Mitteln ePaper an Ihre Bedürfnisse anpassen können. Ein weiteres kurzes Beispiel finden Sie unter folgendem Link:

Bei der Findung eigener Lösungen wünschen wir Ihnen viel Spaß und Erfolg. Wir sind auf Ihre Lösungen schon sehr gespannt und freuen uns darauf.

 

Jetzt ePaper Standard testen!

Jetzt anmelden und alle Features des ePaper Professionals ausprobieren!

 

Zur Übersicht Rund um´s 1000° ePaper

Zur Übersicht Tipps und Tricks

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich
Haben Sie Fragen? Anfrage einreichen

Kommentare