Home » Webdesign » flickr auf der Homepage
- Anzeige -
Software Asset Management beim Fachmann

flickr-Bilder auf der eigenen Homepage

Fotos und Bilder auf der eigenen Homepage, das können eigentlich alle. Doch nicht selten stösst man auf einige Probleme. Die Bilder müssen verkleinert werden, je nach Software Thumbnails erstellt werden. Je nach Auflösung des Clients - stichwort responsive Design - müssen die Bilder in verschiedenen Auflösungen bereitgestellt werden. Ich habe schon lange nach einer einfachen Lösung überlegt. Wie wäre es die Bilder auf eine öffentliche Bilddatenbank abzulegen und von dort anzuzapfen?

flickr

Beim Web-Dienstleistungsportal flickr kann man Bilder und kurze Videos hochladen und mit anderen Teilen. Die Fotos können in Alben sortiert werden.

Wie sieht es bei flickr mit dem Urheberrecht aus?

Bezüglich Urheberrecht sind verschiedene Einstellungen möglich. Bei mir war per Standard "Alle Rechte vorbehalten" eingestellt. Dies entspricht den Rechten im Sinne des Urheberrechts. Es sind aber auch weitere Einstellungen wie z.B. "Public Domain Work" möglich.

Album veröffentlichen

Wenn man ein Album in flickr aufruft, kann man in eine Slideshow wechseln, in dem man in die Adressleiste /show anhängt (es geht auch irgendwie über ein Menü, das ist jedoch gekonnt so versteckt, dass es kaum jemand findet).

flickr-Bilder auf der eigenen Homepage

Von dort aus kann man mit dem Link "Teilen" einen Code erzeugen, der sich auf die eigene Homepage einbinden lässt. Allerdings ist das Ergebnis nicht besonders schön (zumindest meiner Meinung nach). Ich habe daher nach einer aneren Lösung gesucht.

Ich bin auf folgende Lösung gestossen:

<div class="video-container">
<iframe src="https://www.flickr.com/photos/116733674@N04/sets/72157654361993749/player/" 
frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen 
oallowfullscreen msallowfullscreen>
</iframe>
</div>

Die URL kann man aus der flickr-URL entnehmen. Die Klasse video-container spannt den container immer auf die volle Breite (responsive Design). Sie ist in einem CSS so definiert:

.video-container 
{ 
position: relative; /* keeps the aspect ratio */ 
padding-bottom: 56.25%; /* fine tunes the video positioning */ 
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}

Die Klasse setze ich auch für die Einbindung von Youtube-Videos ein.

Das folgende funktioniert so nicht. Flickr Badge zeigt nur die letzten Bilder! Ich suche derzeit nach einer Alternative, eventuell hilft hier dieser Artikel weiter: Using the Flickr API: We Don’t Need No Stinkin’ Badges.

Nun haben wir die Diashow einigermassen sauber eingebunden. Aber jetzt sollten wir auch noch die Thumbnails sehen können. Wie lässt sich das regeln? Hier hilft der Dienst flickrbadge.com.

flickr-Bilder auf der eigenen Homepage

Auch hier gibt man wieder die URL des Albums ein und definiert die Anzahl der Bilder und Breite der Thumbnail-Darstellung.

Leider ist der erzeugte Code nicht responsiv. Ich habe daher eine Breite gewählt, die auf gängigen Smartphones noch komplett angezeigt wird.

flickr-Bilder auf der eigenen Homepage


War der Artikel hilfreich? Bitte liken und sharen. Danke!

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.