Ihre Fotos von Panoramio auf der eigenen Webseite zeigen
Ihre auf Panoramio eingestellten Fotos können Sie auf der eigenen Webseite anzeigen lassen. Die API von Panoramio bietet zwei Wege für das Einbinden der Fotos. Zum einen per HTML in Form eines iframes und zum anderen per JavaScript. Die HTML-Variante lässt sich zwar einfach kopieren und einfügen in eine bestehende HTML-Seite aber dafür auch nur bedingt konfigurieren. Eine Interaktion mit dem Rest der Webseite ist so nicht möglich. Anders mit JavaScript. Mit dem Einbinden der JavaScript Bibliothek von Panoramio kann auf den ganzen Funktionsumfang zurückgegriffen werden. Wie das im Resultat ausschaut, möchte ich hier in Beispielen kurz vorstellen.
Konzept der Panoramio Widget API
Über einen „Request“ können bestimmte Fotos, die gezeigt werden sollen, ausgewählt werden. Das Widget als grafisches Element zeigt die selektierten Fotos schließlich an.
Nach diesem Prinzip können z.B. alle Fotos zu einem Benutzernamen angezeigt werden oder alle Fotos zu einem bestimmten Schlagwort (tag). Zudem können alle Fotos ausgewählt werden oder nur die Fotos die für Google Earth ausgewählt sind oder die zuletzt hochgeladenen Fotos. Die Fotos lassen sich darüber hinaus noch auf- oder absteigend nach Datum sortieren. Auch die Anzahl der angezeigten Fotos ist konfigurierbar.
Vordefinierte Layouts bzw. Templates
Panoramio bietet bereits vorkonfigurierte Templates, die über die URL aufgerufen und mit den Requests kombiniert werden können.
Was ist ein Template?
Ein Template ist eine Designvorlage für die Anordnung von Elementen, in denen bestimmte Daten angezeigt werden sollen. Das äußere Erscheinungsbild einer Webseite oder einem Teil davon kann mit einem Template festgelegt werden. In Content-Management-Systemen können damit Inhalt und Layout voneinander getrennt werden, so dass das Design der Webseite geändert werden kann ohne Inhalte verändern zu müssen bzw. die komplette Webseite zu bearbeiten.
Und so einfach sind die Templates für Panoramio aufrufbar.
http://www.panoramio.com/wapi/template/list.html (Fotoliste)
http://www.panoramio.com/wapi/template/photo.html (einzelnes Foto)
http://www.panoramio.com/wapi/template/slideshow.html (einzelnes Foto mit Play/Pause Knopf)
http://www.panoramio.com/wapi/template/photo_list.html (einzelnes Foto und Fotoliste)
Das visuelle Erscheinungsbild der Templates kann in Höhe, Breite, Hintergrundfarbe, Anzahl der Spalten und Zeilen, Ausrichtung angepasst werden.
Requests
Was ist ein Request?
Ein Request ist eine Abfrage von bestimmten Parametern, die bei der Ausgabe der Fotos berücksichtigt werden sollen. Für die Requests gibt es verschiedene Optionen, die das Erscheinungsbild in der Ausgabe der Bilder beinflussen. Mehrere Optionen lassen sich auch in Kombination anwenden. Getrennt werden die Einzeloptionen mit dem "&" Zeichen.
Die folgenden Optionen können in jedem der oben genannten Templates verwendet werden
|
Option |
Beispiel |
Beschreibung |
|
user |
user=12345 |
Mit dieser Abfrage werden alle Fotos eines bestimmten Nutzers angezeigt. Hier der Benutzer mit der ID 12345. |
|
tag |
tag=stadt |
Mit der Option tag kann ein beliebiges Schlagwort (tags) ausgewählt werden. Es werden nur Bilder angezeigt, die diesen "tag" enthalten. |
|
set |
set=all |
Alle Fotos werden angezeigt. |
|
|
set=public |
Alle Fotos, die für Google Earth ausgewählt sind, werden angezeigt. Das ist die Standardeinstellung, wenn die set-Option nicht verwendet wird. |
|
|
set=recent |
Neu hochgeladene Fotos werden angezeigt. |
|
order |
order=date_desc |
Fotos werden in aufsteigender Reihenfolge angezeigt. Also die ältesten Fotos zuerst. Ohne diese Angabe werden die Bilder standardmäßig absteigend angezeigt. Diese Option kann nur verwendet werden, wenn die Option user verwendet wird. |
Die set Optionen können nicht zusammen mit der user oder tag option verwendet werden. In der folgenden Fotoliste wurde die Option user zusammen mit tag=2011 verwendet.
Fotoliste, Option user und tag=2011
Mit den folgenden Optionen kann das Erscheinungsbild der Templates verändert werden. Nicht alle Optionen können für alle Templates verwendet werden. Grundsätzlich sind bei jedem Template Standardwerte hinterlegt, so dass diese Optionen lediglich alternativ verwendet werden sollten.
|
Option |
Beispiel | Template |
Beschreibung |
|
width |
width=400 |
alle |
Breite des Templates in Pixel. |
|
height |
height=300 |
alle |
Höhe des Templates in Pixel. |
| bgcolor | bgcolor=%23FF0000 |
alle |
Die Hintergrundfarbe kann mit CSS-Farbnamen wie bgcolor=steelblue oder mit Hex-Farbcodes wie bgcolor=%234682b4 angepasst werden. Eine Besonderheit ist hier, dass dem Hex-Farbcode 4682b4 die Zeichenfolge %23 anstelle der Raute # vorangestellt wird. (Liste mit Farbcodes: http://www.mediaevent.de/tutorial/farbcodes.html) |
|
columns |
columns=4 |
list |
Anzahl der Spalten in denen die Fotos angezeigt werden sollen. |
|
rows |
rows=1 |
list |
Anzahl der Zeilen in denen die Fotos angezeigt werden sollen. |
|
orientation |
orientation=vertical orientation=horizontal |
list |
Ausrichtung der Fotoliste. Vertikal oder Horizontal. Mit der Ausrichtung wird die Position der Pfeile, die Scroll-Richtung und die Sortierreihenfolge festgelegt. |
|
list_size |
list_size=6 |
photo_list |
Anzahl der Fotos in der Liste. |
|
position |
position=bottom position=left position=right position=top |
photo_list |
Ausrichtung der Liste. |
|
delay |
delay=2.5 |
slideshow |
Zeitverzögerung in Sekunden bis zum Einblenden des nächsten Fotos. |
Beispiele
Fotoliste, Ausrichtung vertikal
Einzelnes Foto
Hier wird ein einzelnes Foto in einer Größe von 400 x 300 Pixel angezeigt. Als Schlagwort (tag) wurde 2011 gewählt. Wird der Mauszeiger über das Bild gelegt, erscheinen rechts und links Schaltflächen mit denen zum nächsten bzw. vorherigen Bild geklickt werden kann. Zudem könnte hier noch die Hintergrundfarbe angepasst werden.
Slideshow
Einzelnes Foto mit Play/Pause Knopf in einer Größe von 400 x 300 Pixel. Der Intervall ist variabel einstellbar. In diesem Beispiel 3 Sekunden.
Einzelnes Foto mit Fotoliste
Hier werden ein einzelnes Foto in Großansicht mit einer Liste von Miniaturansichten zur Vorschau der nächsten Fotos kombinert.
Mehr Beispiele finden Sie unter: http://www.panoramio.com/api/widget/api.html