Lars Schenk » Flickr http://lars-schenk.com IT-Services :: Software-Development since 1980 :: Freelancer since 1988 Thu, 18 Feb 2010 23:42:14 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Flickr goes Video http://lars-schenk.com/flickr-goes-video/211 http://lars-schenk.com/flickr-goes-video/211#comments Tue, 13 May 2008 20:07:06 +0000 Lars Schenk http://lars-schenk.com/flickr-goes-video/211 Bis zu 90 Sekunden Video (oder max. 150 MB) können nun auch bei Flickr deponiert werden. Praktische Sache wenn man die Kurzfilme von der Digicam gleich auch dort ablegen kann, wo man üblicherweise auch seine Fotos organisiert. Danke Flickr!

]]> http://lars-schenk.com/flickr-goes-video/211/feed 0 Flickr Photo Gallery 0.92 mit WordPress 2.3 http://lars-schenk.com/flickr-photo-gallery-092-mit-wordpress-23/156 http://lars-schenk.com/flickr-photo-gallery-092-mit-wordpress-23/156#comments Mon, 08 Oct 2007 20:53:03 +0000 Lars Schenk http://lars-schenk.com/flickr-photo-gallery-092-mit-wordpress-23/156 Flickr Photo Gallery Version 0.92 macht Probleme mit WordPress 2.3 – ein Update des Plugins ist derzeit nicht verfügbar. Um die Administrator-Seite wieder zum laufen zu bringen kann man sich damit behelfen in der admin-options-load.php die Zeile 15
require_once(dirname(__FILE__).$tmpPath.’/wp-admin/admin-db.php’);

auszukommentieren.

]]> http://lars-schenk.com/flickr-photo-gallery-092-mit-wordpress-23/156/feed 0 Flickr’s neue Slideshow http://lars-schenk.com/flickr-slideshow/108 http://lars-schenk.com/flickr-slideshow/108#comments Fri, 11 May 2007 00:25:05 +0000 Lars Schenk http://www.lars-schenk.com/flickr-slideshow/108 Flickr hat die Slideshow überarbeitet. Bilder im Grossformat auf schwarzem Untergrund, (optionale) Anzeige der Bildtitel und Bescheibungen machen richtig etwas her. Am besten schaut man es sich mal an um zu sehen, wie es funktioniert und wirkt.

]]> http://lars-schenk.com/flickr-slideshow/108/feed 0 WordPress Plugin für Flickr und Lightbox http://lars-schenk.com/wordpress-plugin-flickr-lightbox/76 http://lars-schenk.com/wordpress-plugin-flickr-lightbox/76#comments Tue, 14 Nov 2006 00:42:46 +0000 Lars Schenk http://www.lars-schenk.com/wordpress-plugin-flickr-lightbox/76 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:

PLAIN TEXT
PHP:
  1. <!-- Start:lightbox -->
  2. <style type="text/css">
  3. /* <![CDATA[ */
  4. /* lightbox css  */
  5. @import url(<?php bloginfo('home');?>/wp-content/plugins/silaspartners/flickr/lightbox/css/lightbox.css);
  6. /* ]]> */
  7. </style>
  8.  
  9. <script src="<?php bloginfo('home');?>/wp-content/plugins/silaspartners/flickr/lightbox/js/prototype.js" type="text/javascript" language="JavaScript"></script>
  10. <script src="<?php bloginfo('home');?>/wp-content/plugins/silaspartners/flickr/lightbox/js/scriptaculous.js?load=effects" type="text/javascript" language="JavaScript"></script>
  11. <script src="<?php bloginfo('home');?>/wp-content/plugins/silaspartners/flickr/lightbox/js/lightbox.js" type="text/javascript" language="JavaScript"></script>
  12. <script type="text/javascript">
  13. fileLoadingImage = "<?php bloginfo('home');?>/wp-content/plugins/silaspartners/flickr/lightbox/images/loading.gif";     
  14. fileBottomNavCloseImage = "<?php bloginfo('home');?>/wp-content/plugins/silaspartners/flickr/lightbox/images/closelabel.gif";
  15. </script>
  16. <!-- End:lightbox -->

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:

PLAIN TEXT
PHP:
  1. function silas_addPhoto(photoUrl, sourceUrl, width, height, title) {
  2.     // photoURL soll immer das Original-Bild auf flickr sein
  3.     // damit Lightbox die Anzeige übernehmen kann und der Link zum Bild
  4.     // nicht auf eine neue Seite führt:
  5.     flickrOriginalPhotoUrl = new String(sourceUrl);
  6.     flickrOriginalPhotoUrl = flickrOriginalPhotoUrl.replace(/_s|_t|_m/,"_o");
  7.     var html =
  8.         '<a href="'+flickrOriginalPhotoUrl+'" rel="lightbox[album]" title="'+title+'">' +
  9.         '<img src="'+sourceUrl+'" width="'+width+'" height="'+height+'" border="0" alt="" />' +
  10.         '</a> '
  11.     if ( richedit ) {
  12.         win.tinyMCE.execCommand('mceInsertContent', false, html);
  13.     } else {
  14.         win.edInsertContent(win.edCanvas, html);
  15.     }
  16.     return false;
  17. }

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.

PLAIN TEXT
HTML:
  1. Square (75x75):
  2. <a href="http://static.flickr.com/120/296797177_9611731de3_o.jpg" rel="lightbox[album]" title="Alicia & Joana"><img src="http://static.flickr.com/120/296797177_9611731de3_s.jpg" width="75" height="75" border="0" alt="" /></a>
  3.  
  4. Thumbnail (100x56):
  5. <a href="http://static.flickr.com/121/296797039_ded27dfc9a_o.jpg" rel="lightbox[album]" title="Joana & Alicia"><img src="http://static.flickr.com/121/296797039_ded27dfc9a_t.jpg" width="100" height="56" border="0" alt="" /></a>
  6.  
  7. Small (240x135):
  8. <a href="http://static.flickr.com/107/296796964_bbb2a1281e_o.jpg" rel="lightbox[album]" title="Heiko & Lars Hansapark 2006"><img src="http://static.flickr.com/107/296796964_bbb2a1281e_m.jpg" width="240" height="135" border="0" alt="" /></a>
  9.  
  10. Medium (500x281):
  11. <a href="http://static.flickr.com/114/296796873_03b0533dc4_o.jpg" rel="lightbox[album]" title="Joana & Alicia"><img src="http://static.flickr.com/114/296796873_03b0533dc4.jpg" width="500" height="281" border="0"  alt="" /></a>
  12.  
  13. Large (800x450):
  14. <a href="http://static.flickr.com/121/296796774_7dd793fd66_o.jpg" rel="lightbox[album]" title="Joana"><img src="http://static.flickr.com/121/296796774_7dd793fd66_o.jpg" width="800" height="450" border="0" alt="" /></a>

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 (75x75):

Thumbnail (100x56):

Small (240x135):

Medium (500x281):

Large (800x450):

]]> http://lars-schenk.com/wordpress-plugin-flickr-lightbox/76/feed 25