Samstag, 28. April 2012

Picasa-Bilder in Blog einfügen - Onlinetool und php-Script zur google-API Teil 1

In diesem Aufsatz stelle ich ein php-Skript zum Auslesen der picasa-Web-API vor, das einen unkomplizierte Übernahme der Bilder in einen Blogartikel ermöglicht. Gleichzeitig gehe ich auf schlecht dokumentierte BEsonderheiten des Picasa-Systems ein.

Picasa für Blog-Bilder verwenden

Seit einigen Jahren verwende ich die Methode, Bilder nicht direkt in Blogs hochzuladen, sondern auf Picasa hochzuladen und von dort aus einzubinden.

Das hat sich bewährt, sowohl bei meinem eigenen CMS, als auch bei wordpress & co. Seit google Bilder bis 800px Breite ohne Anrechnung auf den Speicherplatz akzeptiert, ist das noch interessanter geworden.

Vorteile:
  • Das Hochladen vom Desktop via Picasa-Desktopsoftware ist sehr bequem und einfach,
  • zudem werden die Bilder auf Wunsch reduziert, so dass man sich Arbeitsgänge sparen kann (Stapelverkleinerung mit IrfanView).
  • Auch die Picasaweb-Seite hat schöne Hochlademöglichkeiten
  • Der eigene Speicherplatz ist entlastet
  • Der Seitenaufbau ist schneller, da die Bilder von einem anderen Server abgerufen werden
  • es lassen sich zusätzlich Dia-Shows einbinden
  • eines der Hauptprobleme bei wordpress & Co (auch eigengestrickte CMS mit Javascript-Editoren wie CKeditor oder TinyMCE) sind die Bildleichen nicht mehr benötigter Bilder auf dem Server. Die Editoren lassen eine Bildverwaltung nicht zu. Einbau zusätzlicher Dateiverwaltungen ist extrem aufwändig. Bei Picasa kann ich die Bilder zentral über picasaweb verwalten, ändern, löschen und so weiter
  • es ergeben sich viele schöne Darstellungsoptionen mit Hilfe von fertigen Scripts und Plugins, z.B. dem wordpress-Plugin kpicasa 
  • und nicht zuletzt: ein Umzug auf einen anderen Server oder eine andere domain ist traumhaft einfach (!)
Allerdings:

Bei blogs, die ich via blogspot (blogger.com) betreibe, bin ich mittlerweile öfters faul und lade sie direkt hoch, denn diese Bilder kann ich dann ebenfalls zentral von picasaweb aus verwalten und löschen. Außerdem kann ich direkt von der picasa-Desktop-Software direkt zu einem Blog hochladen.

Es wird für jedes Blog eine Art extra "Album" bei Picasaweb angelegt, das aber nur für den  account-Besitzer neben den anderen Alben sichtbar ist. Deshalb kann man von Picasa aus die Bilder administrieren, ja sogar auf andere Alben verschieben. Allerdings wird dann ein Umzug ein Problem, denn die Pfade der eingebundenen Bilder stimmen auch hier nicht mehr.


Die klassische Einbindung


Waren  die Bilder hochgeladen, ging ich bisher wie folgt vor: ,
  • ich gehe bei picasaweb in die Galerie
  • rufe die einzelnen Bilder auf,
  • rechte Maustaste, Bild anzeigen
  • die dann erscheinende jpg-Datei markiere ich mit STRG-A und kopiere sie mit STRG-C
  • gehe in den Blogeditor und füge das Bild mit Gutti-V wieder ein.
Dann wird die Grafik DIREKT vom google-Server geladen. Sie ist nicht verlinkt und nicht formatiert. Das würde passieren, wenn ich im Album blättere, und DORT ein Bild markiere und kopiere. 


Im untenstehenden Beispiel lautet die IMG-Source:


https://lh5.googleusercontent.com/-lC4lPk454Og/Tv3VWXyq-_I/AAAAAAAATcE/_MAazJsI-0w/s720/regensburg-galaxie3small.jpg


Der Editor generiert selbständig den Quellcode, meist zusammen mit width und height-Angaben:

< img src="https://lh5.googleusercontent.com/-lC4lPk454Og/Tv3VWXyq-_I/AAAAAAAATcE/_MAazJsI-0w/s720/regensburg-galaxie3small.jpg">

https://lh5.googleusercontent.com/-lC4lPk454Og/Tv3VWXyq-_I/AAAAAAAATcE/_MAazJsI-0w/s720/regensburg-galaxie3small.jpg


Achtung! Dieser Direktlink ist nicht unbedingt derjenige, der in picasaweb als Link vorgeschlagen wird!

Das mühselige Hin- und herklicken kann man etwas vereinfachen, indem man die Bilderübersicht aufruft, dann die Bilder mit der rechten Maustaste anklickt, Link in gesondertem Tab öffnen, alle Bilder auf diese Weise durchgehen, dann erst die Tabs durchgehen. Es bleibt aber genug Klickerei.

Besonderheiten von Picasa-Bild-Speicherung

Dabei können wir bereits interessante Dinge lernen.



Erste Besonderheit: 

Ein hochgeladenes Bild wird gleich in mehreren Größen gespeichert und ist in diesen Varianten abrufbar, muss also nicht erst im Browser verkleinert werden.
 
Offiziell ist es ein Dutzend von Varianten:

aus der API-Referenz:
The following values are valid for the thumbsize and imgmax query parameters and are embeddable on a webpage. These images are available as both cropped(c) and uncropped(u) sizes by appending c or u to the size.

32, 48, 64, 72, 104, 144, 150, 160

The following values for  images are available as only uncropped(u) sizes by appending u to the size or just passing the size value without appending anything.

94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
quelle: https://developers.google.com/picasa-web/docs/2.0/reference?hl=de-DE#Parameters

In Wirklichkeit konnte ich feststellen, dass auch beliebige Zwischenwerte möglich sind. Diese werden dann wohl während der Laufzeit generiert werden. Vielleicht gilt das auch für die Standardgrößen.

Tricky Picasa:

Wenn man nun die URL des Originalbildes kennt, kann man andere Größenversionen abrufen, indem man einen entsprechenden Unterordner vor den Dateinamen stellt

https://lh3.googleusercontent.com/..../THY6rdXzWH4.../IMG_6800.JPG
https://lh3.googleusercontent.com/..../THY6rdXzWH4.../s300/IMG_6800.JPG

/s300/  ruft also eine Bildvariante mit 300 Pixel Breite auf.

Seltsamerweise wird jeder Zwischenwert umgesetzt. s304 ergibt eine Grafik mit Breite 304 pixel!

Bei obigem Bild habe ich, eher zufällig, eine 720 Pixel-Variante erwischt. Das erkenne ich aus der URL:

https://lh5.googleusercontent.com/-lC4lPk454Og/Tv3VWXyq-_I/AAAAAAAATcE/_MAazJsI-0w/s720/regensburg-galaxie3small.jpg
Der jpg-Dateiname stammt von mir, so wie ich ihn hochgeladen habe. Das "small" im Namen hat also nichts zu bedeuten und ist nur Zufall.

Wenn Ihr diese URL mit geändertem Wert in den Browser eingebt, bekommt ihr eine andere Größe ausgeworfen. Es handelt sich um keine Größenveränderung durch den Browser, sondern es wird von vornherein eine kleinere Datei abgerufen. Gebt zum Beispiel ein:

https://lh5.googleusercontent.com/-lC4lPk454Og/Tv3VWXyq-_I/AAAAAAAATcE/_MAazJsI-0w/s250/regensburg-galaxie3small.jpg 


und Ihr erhaltet:




Ich kann bei dem Bild bis 1024 gehen, das ist die Breite des Originalbildes auf dem google-Server (das Originalbild auf meinem PC ist weitaus größer). Gebe ich Werte über 1024 ein, kommt trotzdem nur ein 1024 pixel breites Bild.

Wer mit php programmiert, könnte also - wenn er eine der URI kennt - folgendes automatisiert basteln: Eine kleine Variante wird angezeigt und ist aber verlinkt mit einer größeren Variante des Bildes.




Was ich noch nicht herausgefunden habe: wie man DIREKT ohne API den Link zur größten Version ermittelt. Einfach den obigen Wert weglassen, hilft nicht, sondern führt seltsamerweise zu einer mittleren Größe.


Zweite  Besonderheit

Je nachdem, wie weit ich beim Album-Blättern das Fenster ziehe, werden verschiedene Größen angezeigt. Das Bild springt stufenweise zu  breiteren Varianten, wenn ich das Fenster langsam vergrößere.

Wenn ich daran nicht denke, kann es sein, dass ich in einem Blogbeitrag plötzlich zu kleine Bilder habe als sonst, oder unterschiedliche Breiten innerhalb des selben Artikels.


Dritte Besonderheit

Die URI der Bilder bleiben begrüßenswerter immer gleich, auch wenn die Sichtbarkeit des Bildes geändert wurde oder die Reihenfolge der Bilder im Album geändert wurde. Diese Daten werden offenbar an anderer Stelle gespeichert, ohne dass sich die URL ändert. Jedenfalls haben das meine Test so ergeben. Alles andere wäre auch schlimm - es würde unweigerlich zu broken links führen.

Die google-API für picasa-Galerien (schreibt man mit einem l, echt!)


Google stellt für seine Dienste eine API zur Verfügung, mit deren Hilfe man (auch ohne Anmeldung) Daten seines picasa-Albums, seines blogspot-blogs, seines google-Kalenders etc. etc. abrufen und auswerten kann.

Der Abruf ist ganz einfach und Sie können Ihn jederzeit mit einem normalen Browser versuchen.

Das Ergebnis ist eine XML-Datei oder ähnliche Datei, in der, ähnlich wie bei einer flatfile-Datenbank, die ganzen Daten enthalten sind.

Mittels php-Script lassen sich diese URI aufrufen und die dabei erhaltenen XML-Dateien relativ leicht auslesen, seit vor einigen Jahren die php-Bibliothek entsprechend erweitert wurde (so genannter XML-Parser). Ihr braucht keine zusätzlichen Pakete oder komplizierte Routinen mehr, sondern könnt mit vorhandenen, integrierten Befehlen arbeiten, die man allerdings erlernen muss.

Beispiel: Auf meinem account "regensburger.tagebuch" (= Username) habe ich u.a. ein Bilderalbum, das dort "mauriciomendes" (für den Künstler Mauricio Mendes) heißt. Wenn ich die Daten hierzu abrufen will, kann ich im Browser eingeben:

http://picasaweb.google.com/data/feed/api/user/regensburger.tagebuch/album/mauriciomendes

Zurück kommt im Browser folgende Bilderliste:


Das ist aber nur die Browserdarstellung, denn modernere Browser bereiten die Daten gleich ein bisschen auf und stellen sie wie eine Webseite dar. In Wirklichkeit kommt folgender Text zurück:


In diesem Text sind weit mehr Angaben enthalten, als nur die Links zu den einzelnen Bildern, die im ersten Screenshot sichtbar sind. Zum Beispiel auch die näheren Angaben zu jedem Bild, deren Größe, den Link zum Bild direkt, den Link zur Albumsseite mit diesem Bild und so fort.

Ruft ein php-Script diese URL auf erhält es die XML-Daten als string, diesen gilt es auszulesen. Für php-Anfänger gleich vorweg: es lohnt sich, sich damit zu beschäftigen. Denn über die vielfältigen APIs (Schnittstellen) von google, youtube und und und...  und den XML-Auswertungsmöglichkeiten in php können Sie zaubern. Sowohl was bloße Abfragen betrifft, als auch die Möglichkeit, sich Administrationsprogramme zu basteln.

Wer an dieser Stelle beim Recherchieren auf das Thema "JSON oder XML-Abfrage" stößt: JSON ist eine ähnliche Abfrage, bei der der zurückgegebene Text ein bisschen anders strukturiert ist und von php ähnlich ausgewertet werden kann. Es gibt dann die Diskussion, soll ich mich in JSON oder in XML einarbeiten. Soweit ich feststellen konnte, lohnt sich JSON eher für fortgeschrittene Programmierer, die mit php-Klassen bzw. mit "objektorientierter Programmierung" etwas anfangen kann. Wer das nicht beherrscht und auch nicht in einer EDV-Ausbildung steckt, kann sich beruhigt mit der XML-Variante beschäftigen, er macht damit nichts falsch.

Die picasa-API und die Struktur der Picasa-XML-Datei

Jede xml-Datei aus API-Abfragen ist anders strukturiert. Die picasa-Daten sind anders strukturiert als die Daten vom google-Webkalender oder vom blogspot-Blog.

Herauszubekommen, wie die Struktur ist, das war das eigentliche Problem. Denn es gibt nur  nur mangelhafte Dokumentationen bzw. Anwendungsbeispiele für die google-picasa-API Abfragen.

Deshalb, habe ich versucht, den restlichen Strukturaufbau selbst zu ermitteln und entsprechende Auswertungsroutinen zu erarbeiten. Ziel war es auch, sich von fertigen plugins und von php-classes unabhängig zu machen.

Bekannt und oft zitiert war dieser hilfreiche  Aufsatz von Vikram Vaswani auf den IBM-Seiten:

Develop PHP applications with Picasa Web Albums
Integrate data from Picasa Web Albums into a custom PHP application
http://www.ibm.com/developerworks/library/x-picasalbum/#N100A8

Aber er war durchaus noch nicht ausreichend und ich musste noch viel experimentieren.

Gefunden habe ich u.a. noch
eher uninteressant, da es auf ZEND-eigene Klassen aufbaut:


Ich habe mich gleichzeitig sowohl in die Systematik von json und xml-Abfragen eingearbeitet, als auch in die Aufbereitungsmöglichkeiten per php, und in die nur schwer verständliche Struktur der von Picasa (bzw. google) gelieferten XML-Daten.

Schritt für Schritt habe ich ein php-Script entwickelt, mit dem ich die Bilder eines Albums einfach auflisten kann, so dass ich die Bilder kopieren und in einen Blogartikel übertragen kann. Das Script hat mir in den letzten bereits viele Stunden Zeit erspart, da ich vorher mühsam jedes Bild aufrufen und in das Blog kopieren musste.

Das Script liest mehr Daten aus, als ich dann bei der Ausgabe verwendet habe. Die entsprechenden Stellen sind auch für php-Anfänger wohl selbsterklärtend. Hoffe ich. Mit Sicherheit enthält das Script noch Schwachstellen.

  © Blogger template 'Fly Away' by Ourblogtemplates.com 2008

Back to TOP