1. Einleitung

Durch ein einfaches Skript ist es möglich, Thumbails aus Flickr-Alben in eine Seite einzubinden und das Format beliebig anzupassen.

nach oben

2. Das Skript

Ein Beispieleintrag im HTML-Code sieht folgendermaßen aus:

<!-- Start of Flickr Badge -->
<div class="flickr">
	<p>
         <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&display=random&size=s&layout=x&source=user&user=56835531@N00"></script>
         </p>
</div>
<!-- End of Flickr Badge -->

Dieses Skript stellt vier zufällige Fotos aus allen Alben eines Users dar.

Lassen Sie sich zunächst das Skript auf Externer Link: http://www.flickr.com/badge.gne automatisch generieren. Auf der ersten Seite wählen Sie „HTML Badge“, auf der zweiten Seite wählen Sie die Quelle der Bilder. Auf der dritten Seite können Sie die Anzahl der anzuzeigenden Bilder (kann nachträglich angepasst werden) und die dargestellte Größe bestimmen. Bei „orientation“ muss „none“ ausgewählt werden. Die vierte Seite kann übersprungen werden, da die Farben später im CSS-File definiert werden.

Aus dem generierten Quellcode kopieren Sie nun nur das Skript selbst und fügen es in den oben genannten Beispieleintrag ein.

Flickr Screenshot

Das Grundskript wird mit Externer Link: http://www.flickr.com/badge_code_v2.gne? aufgerufen. Die Parameter werden hinten angefügt, getrennt durch &. Folgende Parameter sind nutzbar:

  • count - die Anzahl der angezeigten Thumbnails.
  • display - die Darstellungsweise. Mögliche Optionen sind random (Zufall) und latest (neueste).
  • size - die Größe der Thumbnails. Mögliche Optionen sind s (kleine Quadrate), t (Thumbnails in Originalformat) und m (große Thumbnails in Originalformat).
  • layout - die Anordnung der Bilder. Optionen sind x (ohne, dafür anpassbar mittels CSS), h (horizontal) und v (vertikal).
  • source - die Quelle, aus denen die Fotos entnommen werden. Mögliche Optionen sind user (nur Album des Benutzers), user_set (Alle Fotos eines bestimmten Sets, siehe auch set) und tag_all (alle Flickr-Fotos, siehe auch tag).
  • user - die Benutzernummer. Diese können Sie ausfindig machen, indem Sie auf der flickr.com Hauptseite den eigenen Photostream öffnen. Ist die Adresse des Photostreams http://www.flickr.com/photos/12345678@N00/, dann ist 12345678@N00 die eigene Benutzernummer.
  • tag - zeigt nur Bilder an, die mit diesem Tag ausgezeichnet wurden. Hier können Zeichenketten angegeben werden.
  • set - zeigt nur Bilder aus diesem Set an, wenn vorher source=user_set ausgewählt wurde. Hier ist die Nummer eines Sets gefordert. Ist die URL eines Sets http://www.flickr.com/photos/12345678@N00/sets/78980421591477605/, dann ist 78980421591477605 die Set-Nummer.

nach oben

3. Die Stylesheets

Der Flickr-Badge wird mit zwei Stylesheet-Einträgen im default.css-File angepasst. Diese Einträge müssen manuell in das CSS-File eingefügt werden. Zum einen jedes einzelne Bild:

.flickr_badge_image {
	margin: 3px;
	float: left;
}

Zum anderen der alle Fotos umschließende DIV-Block:

div.flickr {
	position: relative;
	top: 5px;
	left: 0px;
	margin: 0;
	background-color: #f0f0f0;
	z-index: 1;
	padding-left: 15px;
}

nach oben

4. Beispiel

Ein Thumbnail-Set mit sechs kleinen Vorschau-Bildern, zufällig ausgewählt aus allen Fotos mit dem Tag „Erlangen“, wird folgendermaßen angelegt:

<!-- Start of Flickr Badge -->
<div class="flickr">
	<p>
	<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&display=random&size=s&layout=x&source=all_tag&tag=Erlangen"></script>
	</p>
</div>
<!-- End of Flickr Badge -->

und an der Stelle eingefügt, wo die Fotos erscheinen sollen.

nach oben