Diashow in Blogger

Shortly

UPDATE
FlickrIt funktioniert nicht mehr. Es gibt eine neue URL, wobei die Anzahl der Fotos begrenzt ist. Wen das nicht stört kann auf https://pickljar.com/ gehen und sich eine Diashow erstellen lassen.
Ich habe meine Diashow derweil deaktiviert und suche nach einer neuen Lösung die ich hier posten werde sobald ich eine gefunden habe.
UPDATE ENDE
Klingt einfacher als es ist. Hier ein kleiner Einblick in meine Recherche (ca. 3/4 Stunde) und die Methode die letzten Endes funktioniert hat.

Diashow ist doch nicht so schwer, oder doch?

Mein Blog ist jetzt 3 Tage alt und ich bin fleißig am Gestallten und befüllen mit Inhalten. Mit Blogger geht ja alles sehr einfach. In wenigen Klicks hat man einen Blog. Viele Designs stehen zur Auswahl und für jeden Geschmack ist etwas dabei. Genau so leicht lassen sich verschiedene Inhalte zur Person, g+ Verknüpfungen und Co hinzufügen. 

Während des Umgestalten des Layouts habe ich ein Gadget namens Diashow entdeckt. Pefekt, dachte ich. Ich habe meine Fotos auf 500px und vielleicht kann man diese auch in Blogger einfügen. Leider nein, das geht nicht. Es bleibt nur Picasa, Photobucket, Flickr oder Sonstiges.

Flickr-Account habe ich, also über Flickr (vorher noch überprüft, dass die Fotos auch öffentlich geteilt wurden). Also wählte ich Flickr aus und gab meinen Benutzer an, schließlich will ich ja meine Fotos anzeigen. Gesagt getan. Leider zeigt er mir bei der Vorschau rein gar nichts an. Interessanter Weise, wenn ich dieses Gadget mit diesen Einstellungen speichere, und mir dann meinen Blog ansehe, werden zwar Fotos geladen und angezeigt, jedoch sind es nicht meine. Es werden Fotos von der Standardeinstellung über Keywords angezeigt.

leere Vorschau im Gadget

Google ist ja dein Freund, dachte ich mir und hab ein bisschen recherchiert und auch verschiedene Postings dazu gefunden. Einige auf Flickr selbst, andere in einem anderen Forum. Eine weitere Methode wurde besschrieben, dass man den RSS-Feed von seinem Flickr-Stream nutzen kann. Anstatt im Diashow-Gadget Flickr auzuwählen, selektiert man Sonstiges. Dann erscheint ein Eingabe-Feld mit dem Namen "Feed-URL". Dort trägt man dann die Feed-URL ein, die man vorher von Flickr kopiert hatte. Leider blieb die Vorschau wieder leer und entweder das Ergebnis auf dem Blog war wie zuvor Bilder von anderen über Keywords ober es stand "Feed konnte nicht geladen werden".

Nicht das Ergebnis, das ich wollte. Also weitergesucht. Dann stieß ich auf die Seite FlickrSlideshow. Diese generiert ein eigenes HTML-Tag mit den nötigen Daten aus Flickr. Somit legt man statt eines Diashow-Gadget ein HTML-Gadget an. Leider kam dann eine Fehlermeldung, das eingebettete Elemente nicht zulässig seien. Und weiter ging die Suche nach einer Lösung.

FlickrIt - die (Er)Lösung

Nach den vielen Fehlschlägen wollte ich schon aufgeben, aber dann klickte ich doch noch auf die Seite flickrit. Diese Seite generiert ebenfalls ein HTML-Element. Anfangs dachte ich, dass es wieder nicht klappt, da auch diese Seite wie FlickrSlideshow ein <iframe> Element erzeugt. Egal, mehr als eine Fehlermeldung kann es ja nicht werden. Und siehe da: es funktioniert! Weiters kann man hier noch ein paar Einstellung mehr machen, als bei FlickrSlideshow. So kann man die Geschwindigkeit, heller oder dunkler Hintergrund, Übergänge und noch ein paar andere Dinge einstellen.

Herrlich und das ganze ist auch noch gratis! Habe mir alles genau durchgelesen und es gibt keinen Hacken. Die einzige Einschränkung ist, dass lediglich nur 100 Fotos verwendet werden können. Das einzige worum Sie bitten ist eine Erwähnung oder eine Fußnote unter der Diashow, die nicht standardmäßig eingestellt ist. Ich hab sie eingestellt, weil ich so froh war, endlich eine Diashow in meinem Blog zeigen zu können.

Update 12.2.2015 Überlagerter Text

Habe erst vor kurzem bemerkt, dass sich der "Credit"-Text und der Text/Link zum Foto überlagern. Das liegt daran, dass in der Info-Leiste der Platz beschränkt und sich somit überlagert.

Überlagerter Text

Da das CSS über das Script im <iframe> geladen wird, hat man keine Chance diese mit eigenen CSS Eigenschaften zu überschreiben. Es bleiben somit 2 Möglichkeiten:

1. Keinen Credit verwenden
2. Workaround mit eigenem Tag und CSS

Da ich diesen Dienst schätze, da ich wie ich oben beschrieben habe, keinen anderen Weg gefunden habe, möchte ich dies mit dem Credit wertschätzen und habe selbst einen kleinen Workaround gebastelt. Dazu lässt man sich den Diashow Code ohne Credit generieren. Danach geht man im Dashboard auf "Layout" und klickt auf das Diashow Gadget, um es zu bearbeiten. Dort fügt man den neuen Diashow Code ein, sowie darunter diese Zeile:

<div id="credit-slideshow">Slideshow created on
   <a target="_blank" href="http://flickrit.com">
      Flickrit.com
   </a>
</div>

Dann sollte der Gadget-Inhalt so aussehen:

Neuer Diashow Code

Das Layout rechts oben speichern, damit es auch auf dem Blog angezeigt wird.
Damit der neue Text auch optisch zum Generierten passt, muss man noch das CSS anpassen. Dazu im Dashboard auf "Vorlage" gehen und "Anpassen" anklicken. Danach auf "Erweitert" und in der rechten Liste bis nach unten scrollen, bis man zu "CSS hinzufügen" kommt. Wer mehr zu CSS erfahren will, kann sich meinen Beitrag dazu durchlesen. Die nachfolgenden Zeichen in das Textfeld kopieren und mittels "Auf Blog anwenden" (rechts oben) speichern:

#credit-slideshow {
   font-size:9px;
   color: lightgrey;
   font: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
   right: 20px;
   position: absolute;
}

#credit-slideshow a {
   color: lightgrey;
}

Die fertige Diashow sieht dann so aus:

Neue Diashow mit getrenntem Text

Anything Else...?

Viele der Forumseinträge waren von 2008 oder 2009. Yahoo und Flickr wurden ja seit dem verändert und erneuert und vielleicht funktioniert es deswegen nicht mehr so recht mit der Diashow. In einem Forum stand auch, dass man seinen Flickr-Account verifizieren muss. Ein Login-Fenster ist bei mir aber nie aufgetaucht, weshalb ich annehme, dass Yahoo hier eine API Änderung vorgenommen hat, diese aber noch nicht in Blogger eingepflegt wurde.

Hier noch mal der Link zur Webseite:
http://flickrit.com/index.php