Flickr Badge konfigurieren

Veröffentlicht am 17.08.2007 | Kommentar schreiben | Tags: xhtml, css, html, flickr

Das Flickr Badge bietet den Zugriff auf die komplette Bilderdatenbank von flickr.com. Durch das setzen von Parametern kann man die Darstellung beliebig verändern.

Verfügbare Konfigurationseinstellungen sind:

count = [1-10]
display = [latest,random]
layout = [v,h,x]
source = [user,user_tag,user_set,group,group_tag,all,all_tag]
size = [s,t,m]

Detailinformationen unter Custom Flickr Badge API Documentation

Aufbau der Syntax:

<div id="flickr_badge_uber_wrapper">
    <div id="flickr_badge_wrapper">
 
        <span id="flickr_badge_source_txt">
        <a href="http://www.flickr.com/photos/">Flickr Fotos</a></span>
        <script  type="text/javascript"
                    src="http://www.flickr.com/badge_code_v2.gne?
 
                            show_name=[ShowTitleTag]&
                            count=[NumberOfImages]&
                            display=[LastestOrRandom]&
                            size=[SizeOfImages]&
                            layout=[KindOfDisplay]&
                            source=[Source]&
                            tag=[UsedTag]&
                            user=[UserID]
        ">
        </script>
        <div id="flickr_badge_source">
            <a href="http://www.flickr.com"
            id="flickr_www">www.<strong style="color:#3993ff">flick
            <span style="color:#ff1c92">r</span></strong>.com</a>
        </div>
    </div>
</div>

Individuelle Bildergröße

Die angebotenen Größen von Flickr sind s, t und m. Für mich war keine richtige Größe dabei. Deswegen habe ich nach einer Lösung gesucht, welche es mir erlaubt, die Bildergröße relativ individuell zu bestimmen.

Prinzip:

Man verwendet size = m. Daraus ergeben sich Bilder in der Größe 240 x 180 Pixel. Die einzelnen Bilder werden mit einer Div-Box umrahmt, welche die Klasse .flickr_badge_image besitzt.

Bei dieser Klasse wird die gewünschte Breite des Bildes festgelegt. Kann ggf. noch um padding und margin erweitert werden.

.flickr_badge_image {
    width: 150px;
}

In diese Div-Box wird das Bild geschrieben. Um das Bild selbst wird noch ein A-Tag gesetzt, welches einen Direktlink auf das Bild beiflickr.com hat.

Das A-Tag legt fest, wie groß das Bild letzten Endes sein soll.

.flickr_badge_image a {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
    overflow: hidden;
}

Die Angabe von position: relative ist wichtig, da die Bilder später absolut in dem A-Tag Positioniert werden.

Nun muss noch das Bild formatiert werden.

.flickr_badge_image a img {
    position: absolute;
    left: -20px;
    top: -20px;
}

Das Bild wird absolut im A-Tag positioniert, das erlaubt es, die Größe des Bildes anhand der Größe des A-Tags festzulegen. Damit dies möglich wird, muss das Bild auf jeden Fall größer als die Maße des A-Tags sein, da sonst hässliche Ränder entstehen.

Der Rahmen, in dem die Größe des Bildes variieren kann ist begrenzt, da horizontal und vertikal ausgerichtete Bilder berücksichtigt werden müssen.

Den kompletten Code für das Flickr Badge kann man sich unter www.flickr.com/badge.gne generieren. Dafür ist jedoch ein Yahoo-Account notwendig.

Zurück zur Artikel-Übersicht

Kommentare