Blogshox

Valide flickr Badges

Wie euch vielleicht schon aufgefallen ist, habe ich ganz am Ende der Seite endlich meine flickr Bilder eingebunden.
Am Einfachsten wäre es ja gewesen ein vorgefertigtes flickr badge zu nehmen und den Code hier einzufügen. Kleiner Nachteil dieser Variante: der Code ist nicht valide.
Deshalb habe ich mich selbst ans Werk gemacht.

Zuerst erstellt man bei flickr ein HTML badge. Das Design ist dabei erst einmal egal. Das machen wir ja sowieso nach eigenen Vorstellungen.
Interessant ist für uns erst mal nur folgender Code:

Natürlich stellt die “x”-Reihe eure User-ID dar. Deshalb muss eben zuerst ein flickr HTML badge erstellt werden, um diese zu bekommen.
Hier ändern wir erst einmal alle & zu & ab und legen die Anzahl der Bilder fest: in meinem Fall 4. Der Code sieht dann so aus:

Als nächstes bauen wir das Skript in unseren HTML Code ein. Zum Beispiel so:

Danach noch die notwendigen Einträge im Stylesheet:

Der “flickr” Text wurde von mir als Hintergrundbild platziert.
Durch “position: absolute;” kann man das Bild unabhängig von den anderen Elementen positionieren. Je nach “Einsatzort” muss hier bei euch jedoch relative stehen, um nicht andere Elemente zu überlagern.
Die Dimensionen der flickr Bilder wurden mittels width und height Angaben im Stylesheet definiert.
Um die Rahmen zu erhalten, habe ich eine Hintergrundfarbe festgelegt und ein “padding” von 4px Breite benutzt.
Der Abstand zwischen den einzelnen Bildern wurde durch die “margin” Angaben erreicht. (Achtung: die 3. Angabe kann hier – entgegen meinem Screenshot – auch Null sein! Bei Bildanordnung untereinander ist hier aber ein Abstand schöner).

Das wars auch schon. Somit habt ihr gesehen, dass es gar nicht so schwer ist, valide flickr badges einzubinden.