Flickr-Fotos ganz einfach in einem Blogbeitrag einbinden

Geschätzte Lesezeit: 2 Minuten

Wenn ich Fotos auf meinem Blog veröffentliche, stelle ich mir oft die Frage, in welcher Größe ich sie hochladen soll. Einerseits soll die Performance nicht leiden, andererseits das Bild optimal dargestellt werden. Je nach Aufnahme verwende ich meist eine Breite von 600 bis 800 Pixel.

Als ich allerdings letztens eine Diashow in meinem anderen Blog mit etlichen Bildern einbinden wollte, dachte ich mir, „Wenn ich ständig mehrere Fotos für einen Blogbeitrag hochlade, sind bald meine Datenbankkapazitäten ausgeschöpft“.

Daher wählte ich die Alternative, per flickr ein Album als Diashow einzubinden. Das sieht sogar richtig gut aus und ein Terabyte Speicherplatz sind auch nicht zu verachten.

Aber der Reihe nach.

Wie funktioniert das Einbinden?

Code eines Flickr-Bildes generierenDazu wähle ich das gewünschte Bild aus und klicke einmal darauf. Am unteren Rand erscheinen nun ein paar Icons. Mit Klick auf den Kasten mit Pfeil öffnet sich ein Kontextmenü. Je nach Auswahl wird nun ein Code generiert. Bevor ich diesen kopiere, wähle ich per Dropdown-Menü eine voreingestellte Größe aus.

Ich wechsel im WordPress-Editor nun in den Textmodus und füge den ausgewählten Code an der gewünschten Stelle ein.

Das sieht bei Verwendung des Embed-Codes beispielsweise so aus (bitte mit der Maus über das Foto fahren):

Bei Einbinden auf diese Weise sollte man allerdings beachten, dass Besuchern des Blogs ermöglicht wird, den gesamten Fotostream des flickr-Accounts anzuschauen.

Daher bietet sich zum Einbinden eines ganz bestimmtes Bildes eher die Verwendung des html-Codes an. Die Anzeige des Fotos wirkt etwas schlichter:

P1020750

Einbinden einer Diashow

Diashow startenDiese Funktion hat flickr ein bisschen versteckt.

Zum Einbinden eines kompletten flickr-Albums wähle ich das gewünschte Album und darin ein beliebiges Bild aus. Ich starte die Diashow, indem ich auf die drei Punkte am unteren Rand klicke und im Kontextmenü „Diashow anzeigen“ auswähle.

Nun wird bereits ein html-Code generiert, den ich auswählen kann …

Html-Code übernehmen oder anpassen

 

… oder ich klicke noch einmal auf den Link „Dieses HTML anpassen“. Es öffnet sich ein weiteres Fenster.

 

Weitere Html-Einstellungen

 

Hier werden mir weitere Optionen angeboten, um die gewünschte Größe zu bestimmen. Nun kann ich den individuellen Code kopieren und im Textmodus des Blogbeitrages einfügen.

 

Und so sieht letztendlich das Ergebnis aus:

Diese Diashow ist doch wirklich sehr schick, oder? Und präsentiere ich nur hin und wieder auf diese Art Fotos, spare ich mir die Installation eines Slideshow-Plugins. smilie

Edit 18.08.2014

Flickr hat die Bedienoberfläche modifziert. D. h. dass nicht mehr auf die oben beschriebene Weise (Anklicken der drei Punkte) das Aufrufen der Diashow möglich ist. Mit einem kleinen Trick funktioniert dieses aber noch.

Ihr wählt das gewünschte Album aus und fügt hinter die Album-Url „show“ hinzu. Dadurch sind die oben beschriebenen Menüpunkte für die Optionen und zum Einbetten der Slideshow wieder verfügbar.

Schöner fände ich es aber, wenn flickr demnächst eine komfortablere Variante anbieten würde.


Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen, sei es über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

20 Kommentare

Kommentare hinzufügen
  • Liebe Sylvi,
    auch ich bin dazu übergegangen, Fotos über Flickr im Blog einzubingen, um Webspace zu sparen. Das geht ganz prima. Allerdings stören mich zwei Dinge daran:
    Ich kann den einzelnen Bildern in einer Dia-Show oder beim Einbinden einer Galerie oder eines Albums leider keine Bildtexte hinzufügen. Jedenfalls habe ich die Funktion noch nicht gefunden.
    Und ich muss für Blog-Fotostrecken Fotos in meinen Flickr-Stream hochladen, die nicht fotografisch überzeugen, sondern nur dokumentarischen Charakter haben und so ein bisschen mein Portefolio verwässern.
    Aber das alles wiegt die Vorteile des Einbindens doch bei weitem auf.
    LG, Susanne

    • Hallo Susanne,

      da gebe ich Dir recht, die fehlenden Bildunterschriften sind (noch) ein Manko. Vielleicht bessert ja flickr irgendwann einmal nach.

      Regulär lade ich auch immer noch Foto bzw. Screenshots – allerdings weboptimiert – hoch und einzelne Bilder binde ich eher selten über flickr ein.

      In meiner „bunten Blogwelt“ ist trotzdem noch ein Slideshow-Plugin installiert. Aber die Bilder sind eben von geringerer Auflösung, während flickr-Diashows hochauflösend dargestellt werden – je nachdem, in welcher Qualität ich sie dort hochgeladen habe.

      Da muss wohl jeder für sich entscheiden, welches die bessere Lösung für ihn ist.

      Lieben Gruß
      Sylvi

  • Hallo Sylvi,

    hast du denn bei deinem Webspace Anbieter eine Begrenzung was den Speicherplatz angeht? Ich lade meine Bilder auch in 800*600 Pixel hoch teilweise auch größer. Im JPG Format sind die doch gar nicht so groß.

    Lg Manuel

    • Hallo Manuel,

      mir stehen 12 GB Webspace zur Verfügung. Darüber laufen momentan 7 Seiten (einschl. Testseiten). Es ist alles im grünen Bereich, weil ich die Bilder optimiere. 3 GB sind momentan belegt und ich kann zur Not problemlos erhöhen.

      Aber es ist ja nicht verkehrt, sich nach einer Alternative umzuschauen, um hochauflösende Bilder in Beiträgen zu präsentieren, ohne den eigenen Webspace zu belasten.
      Ich persönlich mache davon aber eher selten Gebrauch.

      Gruß Sylvi

  • Danke für den schönen Artikel. Leider gibt es noch einen Nachteil, für den ich bisher keine Lösung gefunden habe. Eingebundene Flickr-Fotos kann man nicht als Artikelbild definieren. Oder irre ich mich?

    • Hej Horst,

      stimmt, als Beitragsbild kann man flickr-Bilder nicht festlegen. Ich habe in diesem Artikel extra eine Grafik als Beitragsbild hochgeladen.
      Für Blogs die Thumbnails automatisiert als Beitragsbild generieren, kann ich nur empfehlen, ein Standardbild für solche Bildbeiträge hochzuladen und über die Funktion „benutzerdefiniertes Feld hinzufügen“ den Link zu dieser Grafik einzufügen.
      Ich habe mal getestet, ob das auch mit einem Link zum flickr-Bild funktioniert, aber in meinem Blog existiert dieser Automatismus nicht. Kommt auf einen Versuch an.

      Gruß Sylvi

  • […] hat heute zum Thema einen interessanten Artikel “rausgehauen”. Sie gibt einige Anregungen und Tipps zur Handhabung des ja nun schon seit einiger Zeit kostenlosen Flickr-Accounts. Einige […]

  • Hallo, da habe einige gute Anregungen bekommen. Weist du auch eine Möglichkeit eine Flickr-Diashow so einzubinden, dass sie auch auf einem Android läuft?

  • Vielen Dank für die schnelle Antwort. Ich suche allerdings eine Löschung mit der ich sicherstelle, dass alle Besucher meiner Seite die Diashow sehen können. Daher würde ich gerne auf Flash verzichten.

    • Da gibt es meines Wissen momentan keine alternative Lösung.

      Vielleicht ist ja über dieses WordPress-Plugin das Anschauen per Android-Tablet bzw. -Smartphone für jeden Besucher möglich.

      Übrigens finde ich die Jetpack-Variante auch sehr ansprechend, weil sie so schön schlicht ist. Und sie funktioniert auf meinem Smartphone tadellos. Hier ein Beispiel am Ende des Beitrages.

      Setzt allerdings das Hochladen der Bilder auf den eigenen Webspace voraus.

  • Hallo,

    super Anleitung. Ich habe eine Frage zu diesem Code-Schnipsel im Rahmen der Diashow:
    Was macht
    „jump_to=9069925466“
    Denn ggf. muss ich ja den Parameter auf meinen Account o. ä. anpassen(?).

    • Hallo Henning,

      ich habe glatt noch einmal den aktuellen html-Code des Albums aufgerufen und da bleibt bei mir der Parameter sogar leer:

      Von daher generierst Du nur den html-Code direkt aus Deinem flickr-Album und musst abschließend nichts mehr verändern.

      Gruß Sylvi

      • Hallo Sylvi,

        wow, das ging schnell. Habs sofort getestet und so klappt es nun. Danke vielmals. Den Link zur gelungenen Einbindung: (Link entfernt, da Seite nicht mehr existiert)
        Will keine Werbung machen, nur zeigen, dass es funkt (und damit man sich ggf. auch dort den Code „besorgen“ kann smilie. Aber falls das hier nicht passend ist, nimms gern raus.

  • Hallo Sylvi!

    Ich finde leider die drei Punkte am unteren Rand um im Kontextmenü die Diashow anzuzeigen nicht.

    Könntest du mir bitte weiterhelfen?

    Liebe Grüße!

    • Hallo Tamara,

      schau mal in meinem nachträglichen Edit vom 18.08 am Ende des Beitrages. Die drei Punkte werden nicht mehr angezeigt. Die Slideshow kannst Du Dir derzeit nur mit dem beschriebenen Trick anzeigen lassen.

      Gruß
      Sylvi

  • Als Fitness-Blogger bin ich neugierig geworden…

    Bisher habe ich Artikel mit mehreren Fotos veröffentlicht. Der Nachteil jedoch war, dass man weit nach unten scrollen musste. Mit dieser Dia-Show kann ich meine Artikel kompakt halten und alle Fitnessfotos präsentieren.

    Eventuell könnte ich dadurch auch mehr Traffic für meinen Blog generieren. Siehe

    Was hältst Du von dem Artikel Sylvi?

    • Hallo Peter,

      ich finde, grundsätzlich peppen Bilder Blogbeiträge unheimlich auf oder auch Slideshows machen sie einfach spannender. Und bei der Verbreitung über die Social Media-Kanäle sorgen sie für zusätzliche Eye-Catcher.

      Daher versuche ich auch (fast) immer ein passendes Bild zum jeweiligen Thema zu finden.
      Grundsätzlich habe ich es bisher so gehandhabt, dass ich bis zu ca. +/- 6 Fotos diese eher als Galerie – also Einzelansicht – eingefügt habe. Das hängt davon ab, ob das Bild eine Dokumentation unterstreicht oder ich einfach nur Text durch eine einfach Grafik als Stilmittel umbrechen möchte.

      In einem anderen Blog verwende ich ein Slideshow-Plugin z. B. um Ausflüge bildlich zu dokumentieren. Ich hatte dort noch gar nicht erwogen, flickr-Fotos zu verwenden. Wahrscheinlich weil es sich vorwiegend um sogenannte Schnappschüsse handelt, die ich nicht für „flickr-würdig“ hielt.

      Einige Webmaster lehnen Bilderdienste ab und argumentieren damit, dass sie dann nicht mehr zu 100 % Herr ihrer Bilder seien. Lädt man allerdings im Laufe der Zeit Bilder auf den eigenen Server hoch, dann wird je nach Auflösung viel Speicherplatz auf dem Server benötigt.

      Der von Dir verlinkte Beitrag ist interessant und ich habe mir dazu einmal Gedanken gemacht. Landläufig herrscht ja die Meinung, dass Bildbeiträge für mehr Traffic als reine Textbeiträge sorgen können. Aber wirklich Sinn – zumindest aus SEO-Sicht – macht das doch erst, wenn ich die Bilder mit alt- und image-Tags im Blog selber versehen kann. Das ist bei einer Verlinkung über flickr meines Wissens nicht möglich, lasse mich aber gerne eines Besseren belehren.

      Aber Du hast mich auf eine Idee gebracht. Ich kann in den Beschreibungen unter den bei flickr hochgeladenen Bildern, einen Hinweis mit Link zum Blog eintragen. Das bietet sich in meinem Fall besonders bei den Fotos an, die ich hier in einer geringeren Größe zum kostenlosen Download anbiete. Vielleicht lockt das ja den einen oder anderen Besucher auf den Blog.

      Komisch, dass ich darauf nicht schon eher gekommen bin. Bei Youtube füge ich schon seit langem den Tutorials einen Link zum jeweiligen Blogbeitrag hinzu.
      Danke für den Denkanstoß. smilie

      Gruß Sylvi

  • Hallo Sylvi,
    durch Zufall bin ich hier bei Dir gelandet.Vielen Dank für diese verständliche Anleitung. Ich würde auch gerne die show in meinen Blog einbinden, aber es kommt immer nur

    Um diese Diashow anzuzeigen, muss JavaScript aktiviert sein und du benötigst die neueste Version von Adobe Flash Player.
    Lade jetzt den kostenlosen Flash Player herunter!

    Ich habe nachgeschaut und da hat es geheißen, sie haben bereits die neueste Version, Google Chrome lädt automatisch alles runter.
    Das Java Script habe ich meines Wissens auch aktiviert, höchstens ich habe ein verstecktes Häkchen vielleicht doch übersehen.
    Vielleicht hättest Du mir bitte noch einen Tipp, würde mich sehr freuen, aber bitte eine einfache Erklärung, da ich mich nicht so auskenne am PC.
    Grüßle und einen schönen Tag wünscht Dir
    Crissi

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Copyright © Sylvis Blog • 2018. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: