Mit dem WordPress Plugin Flickr Photo Album for WordPress hat Joe Tan eine das wirklich schöne Integration der Flickr Dienste in WordPress ermöglicht. Wer keine eigene Gallery wie zum Beispiel Gallery 1 oder 2 von Bharat Mediratta oder die Coppermine Photo Gallery betreiben und integrieren möchte, kann mit diesem Plugin schnell und unkompliziert seine eigenen Fotoalben in den WordPress basierten Blog integrieren. Die Installation setzt einen eigenen API-Key bei Flickr voraus, der aber auch während der Installation angelegt werden kann.
Ein optionales Flickr Sidebar Widget zur Anzeige Ihrer aktuellen Flickr Bilder im WordPress Sidebar wird ebenfalls mitgeliefert – es setzt jedoch das WordPress Widgets Plugin voraus.
Optional werden auch die Lightbox 2 Effekte unterstützt, hierzu kann in /wp-content/plugins/silaspartners/flickr/photoalbum-header.html die Variable $useLightbox = true; gesetzt werden. Der Vorteil der Lightbox ist, dass Bilder in der Volldarstellung über der aktuellen Seiten und nicht innerhalb einer neuen Seite dargestellt werden, was dem Webdesigner mehr Möglichkeiten für das Layout offenbart und den Betrachter des Bildes auf der aktuellen Seite verweilen läst.
Bei der Lightbox Integration bin ich jedoch einen anderen Weg gegangen, denn das Setzen des $useLightbox = true; Schalters aktiviert die Lighbox nur bei der Foto-Alben-Darstellung und nimmt dem Anwender dort die Möglichkeit Kommentare zu einem Album bzw. Bild zu hinterlegen. Während die Lightbox-Effekte ungenutzt bleiben, wenn man ein Flickr Bild über das Plugin in den WordPress-Editor einbindet. Und genau hier möchte man doch die Vorteile der Lightbox ausspielen indem man zur Volldarstellung des Bildes den Leser eines Beitrages nicht dazu zwingt, die aktuelle Seite zu verlassen.
Probieren Sie es einmal aus: Ein Klick auf das obere Bild führt Sie auf eine neue Seite – dies ist das Default-Verhalten des Plugins. Und ein Klick auf das zweite Bild nutzt die Lightbox und führt Sie nicht von dieser Seite weg. Im folgenden habe ich ein paar Notitzen gemacht, welche Änderungen durchzuführen sind.
Zunächst einmal brauchen wir die Lightbox nun “Site-wide” und müssen daher entsprechende Vorkehrungen am WP-Theme vornehmen, denn das Flickr Plugin bindet die Lightbox nur auf den von ihm generierten Seiten ein. Ich editiere also /wp-content/themes/YOURTHEMEDIRECTORY/header.php und erweitere den <head>-Bereich wie folgt:
[php]
[/php]
Die Pfadangabe zur Lightbox kann auch anders gewählt werden – ich habe auf die zZ. aktuelle Verison 2.02 zurückgegriffen, die vom FlickrPlugin mitgeliefert wurde.
In /wp-content/plugins/silaspartners/flickr/photoalbum-header.html habe ich nun $useLightbox = false; gesetzt, damit ich bei der Alben-Ansicht die Kommentarefunktion verfügbar habe.
Als Komfortfunktion möchte ich nun noch das Flickr Plugin so modifizieren, dass beim Einfügen von Bildern in einen Beitrag gleich korrekte Lightbox Links erstellt werden und die Links nicht von der Seite wegführen. Hierzu ändere ich an in /wp-content/plugins/silaspartners/flickr/inline-photos.html die Funktion silas_addPhoto wie folgt:
[php]
function silas_addPhoto(photoUrl, sourceUrl, width, height, title) {
// photoURL soll immer das Original-Bild auf flickr sein
// damit Lightbox die Anzeige übernehmen kann und der Link zum Bild
// nicht auf eine neue Seite führt:
flickrOriginalPhotoUrl = new String(sourceUrl);
flickrOriginalPhotoUrl = flickrOriginalPhotoUrl.replace(/_s|_t|_m/,”_o”);
var html =
‘‘ +
‘‘ +
‘ ‘
if ( richedit ) {
win.tinyMCE.execCommand(‘mceInsertContent’, false, html);
} else {
win.edInsertContent(win.edCanvas, html);
}
return false;
}
[/php]
Es wird also statt der virtuellen HTML Seite zum Bild/Album nun direkt auf die URI des Bildes bei Flickr verlinkt. Damit die Lightbox eingreifen kann, wird das Attribut rel=”lightbox[album]” eingefügt. Durch den optionalen Zusatz [album] werden alle Bilder eines Beitrags zu einer zusammenhängen Serie zusammengeführt, so dass Lightbox mit “Next” and “Prev” das Durchblättern aller Bilder eines Beitrags erlaubt.
Das Title-Attribut wird im Anchor-Tag gesetzt. Das Alt-Attribut im Img-Tag hingegen wird leer gesetzt, damit der IE keinen Standard-Tooltipp für das Image anzeigt. Wenn SweetTitles installiert sind, so wird das Title-Attribut aus dem Anchor-Tag für das Tooltipp-Rendering ausgewertet.
Bekannte Seiteneffekte:
Ein evtl. hinterlegter Titel wird hier zwar für Lightbox auswertbar im Anchror-Tag mit angegeben und sollte eigentlich dazu führen, das bei der Volldarstellung des Bildes der Titel unter dem Bild angezeigt wird – in diesem Blog klappt das jedoch nicht, weil ich auf dieser Site auch Dustin Diaz’ Sweet Titles verwende. Hier gibt es einen Konflikt in den JavaScripten.
Folgende HTML Snippet sind mit den o.g. Änderungen am JavaScript über den Editor einfügbar. Auf eine automatische Formatierung habe ich verzichtet, da ich diese von Fall zu Fall individuell per Style-Attribut einfüge.
[HTML]
Square (75×75):
Thumbnail (100×56):
Small (240×135):
Medium (500×281):
Large (800×450):
[/HTML]
Ich habe hier alle Grössen die vom Plugin bzw. Flickr unterstützt werden einmal aufgeführt. Die folgenden Bilder werden von Lightbox als ein zusammenhängende Serie erkannt, weil sie das identische Attribut rel=”lightbox[album]” enthalten.
Square (75×75):
Thumbnail (100×56):
Small (240×135):
Medium (500×281):
Large (800×450):
Na das ist doch genau die Anleitung, die ich gesucht habe. Klasse. Vereinfacht mir das Leben ungemein. Ich finde die individuelle .jpg?v=0 Endung für die lightbox-Ansicht am sinnvollsten, weil ich meine Bilder im hohen Format hochlade und _o riesig wirkt.
Kann mn das eigentlich automatisieren?
Kenn mich leider nicht so gut aus mit der Chose, dass ich die Ansichts-Größe individuell einstellen könnte.
Pingback: Signal77 - Nachtschicht und Leben » London bei Nacht
Tolles PlugIn von Silas. Was muss ich tun, damit die tagcloud, also der Bereich der Thumbnail-Bilder in der Sidebar ständig sichtbar bleiben. Beim Klick auf die Sidebar verschwindet die Tagcloud, das ist schade und umständlich zu gleich.
Hm… leider kriege ich das bei mir nicht hin… Wenn die Änderungen am PHP gemacht wurden, dann muß ich nur noch ein Bild aus der Flickr Gallerie einfügen und schon läufts?
Bei mir nicht…. habe ich vielleicht etwas vergessen? Es gibt keine Fehlermeldung o.ä.
Viele Grüße,
Marcus
Folgender Kommentar erreichte mich per Mail. Ich stelle das hier einfach mal so rein:
Hallo Marcus,
vielen dank für Deinen Einsatz zu versuchen mir bei dem Problem zu helfen.
Das Problem wird hier im Forum beschrieben.
Ich habe das PlugIn zum Laufen gebracht, siehe hier: http://www.stefanbraun.eu
allerdings bin ich auf dem Stand von c.nick, der erste beitrag in diesem Thread.
Mein eigenes Problem habe ich hier nochmals ausführlich beschrieben.
Eigentlich will ich nur, dass diese Bildervorschau (Tagcloud) dauerhaft in der Sidebar bleibt. Ich denke, ich muss da wohl eher eine Veränderung in der Sidebar des Themes machen, damit dort diese Tagcloud immer aufgerufen wird, aber welche? Viele Grüße Stefan
Hallo noch einmal,
ich habe jetzt so viel gegooglet und Foren gelesen und trotzdem komme ich nicht weiter.
Ich habe alles so in den PHP Skripten und HTML Files geändert wie es hier beschrieben wurde. Jedoch funktioniert der Teil nicht das automatisch der Korrekte Link erzeugt wird.
Nach dem Einfügen wird nach wie vor folgender Code erzeugt:
Kann mir bitte jemand einen Hinweis geben und mir helfen?
Vielen Dank und viele Grüße,
Marcus
Hallo Marcus,
vielen Dank für Deine Mühe, die Du Dir machst. Leider bin ich genau an dem gleichen Problem hängen geblieben.
Ich hoffe es meldet sich noch jemand auf den Aufruf. Falls Du es herausfindest, lass es mich bitte wissen. Danke.
Hier nochmals der von Dir genannte Code, der auf dieser Seite nicht angezeigt wurde. Ich lasse mal die eckigen Klammern weg, vielleicht lags daran:
a href=”http://www.flickr.com/photos/[email protected]/477354359/” rel=”nofollow”
Grüße
Stefan
servus, ich kann die Funktion der Lightbox irgendwie nicht aufrufen.
Lightbox selber ginge zwar, jedoch nicht aus einem Post mit dem Photo Album.
Der Verweis zu Lightbox rel=”lightbox[album]” wird erst gar nicht in den Links dargestellt obowhl die Änderung im Code eingebunden ist.
Hat wer eine Idee?
Pingback: Flickr Fotos | kleinMantara
Hallo Lars,
bei meiner WordPress Version 2.2.1 funktioniert der Teil der in der Datei inline-photos.html steht nicht mehr, siehe Kommentar #9.
PS: Mit welchen Plugin zeigt Du die Code Sequenzen an?
Hallo Thomas,
danke für die Infos. Ich schaue mir das bei Gelegenheit mal an. Für die Integration von Codes in Beiträgen verwende ich http://blog.igeek.info/wp-plugins/igsyntax-hiliter/ .
Hi, danke erstmal für die Seite hier! Echt klasse!
Ich habe nur ein Problem mit dem Einbinden von Lightbox. Ich möchte wie du die mit dem Flickr Plugin “Photo Album” eingebundenen Bilder per Lightbox darstellen. Ich habe die inline-photos.html so abgeändert wie du vorgeschlagen hast. Er bindet die Bilder ein und verlingt sie, jedoch immer als .jpg.html. Das heisst er hängt immer noch am Ende .html mit dran! Woran kann das liegen?
Hallo Lars!
Hier mal eine Supportfrage aus der näheren Umgebung: Ich habe das Plug-in nach längerem Wurschteln in mein Blog eingebaut, die Lightbox gemäß deinen Angaben für die Einzelbilder “freigeschaltet” und oberflächlich scheint es auch zu funktionieren, aaaaaber…
– Klicke ich auf ein Foto in einem Post, öffnet sich die Lightbox, der Titel des Fotos stimmt auch, aber statt des Bildes kommt die Flickr-Meldung “This Photo is currently unavailable”. Das Photo ist weder “private” noch sonst irgendwie eingeschränkt und wird direkt bei Flickr auch anstandslos angezeigt.
– fasst die Lightbox Bilder aus verschiedenen Artikeln zu einem “Album” zusammen, d.h. ich kann mittels Prev und Next wechslen, als wären beide in einem Post.
OK, ist geklärt…teilweise zumindest. Beim Einbinden ist das _o gleich mit angehängt worden und einige Bilder haben dieses Attribut gar nicht (ich weiß noch nicht, wieso)
Tja, bei der Album-Aktion bin ich nicht weitergekommen.
Es hat sich nun noch ein weiteres Problem eingestellt: Von meinem Mac aus funktioniert beim Post-Erstellen alles bestens, versuche ich jedoch, auf meinem WinXP-Rechner, ein Bild einzubinden, verschwinden nach der Auswahl des Bildes das Feld mit den Uploads/Photos, es wird an dieser Stelle nur das ausgewählte Bild angezeigt, welches ich dann in den Post ziehen kann. Sämtliche Plugin-Funktionen gehen dabei verloren.
Ich dreh hier noch ab…
wer es noch ein bisschen einfach haben will, der solte nach der anleitung auf http://aerothought.com/2008/01/06/photo-album-plugin-unter-wordpress-mu-mit-lightbox-in-5-schritten/
das plugin mit lightbox nutzen.
Pingback: Wordpress Plugins: Lightbox and Flickr » Web Application Blog
hallo
möchten unsere Bilder bei Flickr nicht öffentlich machen. (Family). Besteht die Möglichkeit, trotzdem eine slide show anzeigen zu lassen?
Danke
Hallo allerseits,
man muss in den Dateien admin-albums-tab.html und admin-photos-tab.html ebenfalls die Funktion silad_addPhoto abändern.
Der Variablen “var t = …” in der Originaldatei weist man einfach den obigen Ausdruck von Lars zu, der nach “var html =” kommt . Kann es nicht kopieren, ansonsten schneidet die Kommentarfunktion alles ab.
Die Bildurl scheint aber fehlerhaft zu sein, denn beim Anklicken des Bildes öffnet sich zwar das Lightboxfenster, aber es wird “IMAGE NOT FOUND” angezeigt. Flickr scheint die URL-Struktur geändert zu haben für neue Accounts(?)
Ich nochmal,
es scheint so als hätte man die URL für ein Originalbild um einen kleinen Hashwert ergänzt, damit man von der verkleinerten Version keine Rückschlüsse mehr auf die URL der Originalversion ziehen kann. Was geht ist von allen vorgegebenen Größen auf die maximale Skalierung (500 pixel) zu verweisen. Geht mit der modifizierten Zeile in der Funktion silas_addPhoto:
flickrOriginalPhotoUrl = flickrOriginalPhotoUrl.replace(/_s|_t|_m/,””);
HI,
mit diesem Plugin kann man sich das ganze lightbox gefummel sparen:
(die URL anpassen muss aber immer noch sein)
http://www.puzich.com/wordpress-plugins/lightview
ich finde eine bessere lightbox!
Vielleicht wäre es mal ganz praktisch, wenn jemand die gemachten Änderungen (besonders die von Daniel) mal nachträgt oder komplett aufschlüsselt. Ich kann aus seinem letzten Post nicht mehr herauslesen, wo genau ich den Code einfügen muss. Es gibt ja zig Dateien mit der Funktion silas_addPhoto.
@philipp: Nicht sonderlich förderlich, da es mE da keine Flickr-Implementierung gibt. Darum gehts hier doch eigentlich.
Mahlzeit. Guckst du oben Kommentar 18:
Dateien:
admin-albums-tab.html
admin-photos-tab.html
Funktion:
silad_addPhoto
folgende Zeile ändern:
flickrOriginalPhotoUrl = flickrOriginalPhotoUrl.replace(/_s|_t|_m/,””);
(Nach dem Komma im obigen Ausdruck stehen zwei Anführungszeichen oben. Die Kommentarfunktion scheint das etwas zu entstellen.)
Bedeutung: Er soll einfach noch den Angang _s, _t oder _m von der Url abschneiden.
@ jochen:
lightview funktioniert wunderbar, auch mit flickr.
das plugin kümmert sich einfach um alle bilder in einem post, egal von wo es eingebunden wird.
also: flickr photoalbum wie bisher einsetzen, URL wie hier beschrieben mdifizieren, lightvie plus plugin installieren… und es klappt.
cheers!
Ist es möglich die Flickr-Bilder auch einfach im Footer anzuzeigen?
Seit Dezember 2008 verwende ich das hier beschriebene Plugin nicht mehr – die beschriebenen Lightbox-Effekte sind deaktiviert.