Package my Flickr images

Vandaag vond ik dat ik het echt niet langer meer kon uitstellen. Al veel te lang heb ik tegen dit probleem zitten aanhikken en omdat ik wist hoe ik het kon oplossen, maar er gewoon niet genoeg tijd voor kon vrijmaken bleef ik het maar uitstellen. Maar nu moest het er van komen.
Eigenlijk waren het twee problemen ineen. Het eerste erg vervelende bij Flickr, is het onderscheid dat gemaakt wordt tussen de beschikbare code bij eigen foto’s en foto’s van anderen. Als ik bij een foto van mezelf kijk naar een van de verschillende formaten, dan krijg ik ook meteen de code geleverd om die foto in een blogpost of andere HTML pagina te plakken. Netjes met de vereiste teruglink naar de bronpagina. Maar juist bij een foto van iemand anders, waar die link terug eigenlijk gewoon nog belangrijker is aangezien het de vereiste ‘attribution’ (bronvermelding) is bij de creative commons licentie die aan foto’s hangen die ik wil hergebruiken (anders wil ik ze niet eens).
Maar zoals je bij de tweede screenshot hiernaast kunt zien (van deze foto) moet ik bij een foto van iemand anders meer werk doen om netjes terug te kunnen linken. Niet logisch.
Daarnaast ben ik alle informatie over maker, oorspronkelijke pagina bij Flickr, exacte licentie etc. kwijt als ik die foto download om bijvoorbeeld in een leeromgeving te gebruiken. Ideaal zou natuurlijk zijn als Flickr die informatie *in* de afbeelding (in de EXIF of XMP metadata) zou opslaan. Voor vandaag nam ik even genoegen met een second best: het opslaan van die metadata in het manifest van een IMS Contentpackage. Zo’n contentpackage kan namelijk gelezen worden door bijvoorbeeld Natschool en de metadata kan dan ook via bijvoorbeeld LOREnet beschikbaar gesteld worden.
Een mooie uitdaging. Javascriptlet
Om met een van de laatste stappen te beginnen: het moest simpel te gebruiken zijn. Ik wilde dus een knop op de bladwijzerbalk in mijn browser hebben en als ik in Flickr een foto of een verzameling foto’s dan wil ik gewoon maar op die knop te hoeven klikken en dan moet er een Contentpackage gegenereerd worden met alles er op en er aan.
Zo ongeveer dus:

Zo’n javascriptlet (een favoriet die in plaats van een webpagina een regel javascript bevat) is eigenlijk heel simpel:
javascript:
(function(){d=document;
var%20packageit=window.open(‘http://localhost/flickr/test1.php?URL=’
+escape(d.location.href),
‘Package It’,’width=528,height=100,left=75,
top=20,resizable=yes,scrollbars=yes’);
packageit.focus();})();
Bovenstaande code (die overigens één regel is die voor de leesbaarheid in stukken gehakt is) kijkt naar de URL van de pagina die je op dat moment aan het bekijken bent en geeft die URL door aan een script, in dit geval een PHP script dat op mijn lokale webserver draait (nee, nog niet van buiten af te bereiken, sorry).

Wat hebben we?
Tweede uitdaging is het achterhalen van de vraag “waar was ik naar aan het kijken?”. Dat lijkt eenvoudig, maar Flickr heeft een aantal manieren waarop een URL opgebouwd kan zijn, en het daar uit filteren van de unieke ID van de foto of van de set foto’s is even puzzelen.
Dit zijn de opties die ik tegen gekomen ben:
* http://www.flickr.com/photos/piair/ => startpagina van een gebruiker / geen ID van een foto / kan ik niets mee.
* http://www.flickr.com/photos/piair/sets/ => alle sets van een gebruiker / kan ik niets mee.
* http://www.flickr.com/photos/piair/sets/72157600356012448/ => één set, daar kan ik wat mee.
* http://www.flickr.com/photos/piair/547696316/in/set-72157600356012448/ => één foto in een set, daar kan ik wat mee
* http://www.flickr.com/photos/piair/540078272/ => één foto, daar kan ik wat mee
* http://farm2.static.flickr.com/1160/538678790_8e76718513_o_d.jpg => één foto, daar kan ik wat mee
* http://www.flickr.com/photo_zoom.gne?id=538678790&size=o => één foto, daar kan ik wat mee
* http://www.flickr.com/search/?q=kermis&w=11716431%40N00 => zoekresultaat van geen, één of meerdere foto’s, daar kan ik wat mee maar is nog niet geïmplementeerd.
* http://www.flickr.com/photos/48721517@N00/555332281/in/photostream/ => één foto, daar kan ik wat mee.

Gelukkig hebben zijn de structuren wel consistent. Dus met een aantal regular expressions kun je de verschillende patronen herkennen en dan respectievelijk het unieke ID van de foto of van de set achterhalen. Aan de hand van de ID van de set kun je dan een lijstje unieke IDs van de foto’s in die set achterhalen.

Opbouw van de HTML-pagina’s
Wat ik wilde was de pagina’s zoals ik die voor mijn eigen foto’s te zien kan krijgen herbouwen voor alle foto’s die ik wilde opslaan, dus ook die van anderen.

Daarvoor heb ik gebruik gemaakt van de Smarty templating mogelijkheden. Daarmee maak je een template-bestand met daar in placeholders die later vervangen worden door daadwerkelijke waarden. Het voordeel daarvan is dat je de code waarmee je de informatie bij Flickr op haalt en de HTML voor het eindresultaat goed uit elkaar kunt houden en zo eenvoudig meerdere templates toe kunt voegen, bijvoorbeeld voor andere ontwerpen of ontwerpen in andere talen.
Hieronder zie je een klein stukje van het template voor de verschillende pagina’s:
Ik heb nu één template voor de foto-pagina die, afhankelijk van de beschikbare formaten de 5 of 6 verschillende pagina’s (één voor elk formaat) maakt.
Daarnaast heb ik één template voor het imsmanifest.xml bestand met daarin de verwijzingen naar de bestanden én de metadata.

Flickr API
Omdat Flickr een API beschikbaar stelt en daar binnen PHP versie 5 een heel eenvoudige werkwijze beschikbaar voor is, was het achterhalen van de informatie over de foto’s (urls, titels, oorspronkelijke uploader etc) relatief gemakkelijk en een kwestie van de API-documentatie doorspitten.

imsmanifest.xml
Het imsmanifest.xml in het contentpackage is redelijk cruciaal. Zonder dat is het namelijk een gewoon Zip-bestand, met zo’n bestand kunnen tools er iets mee.
Zoals bijvoorbeeld de RELOAD editor:
Je kunt aan de rechter screenshot overigens zien dat de afbeelding waarvan ik op de Flickr site zelf maar moest uitzoeken hoe ik die netjes linkte nu voorzien is van een selectievak waaruit ik meteen de juiste code kan kopiëren.

Ik heb er overigens voor gekozen om alleen de HTML-code in het package zelf op te nemen en voor de foto’s gewoon te blijven verwijzen naar de Flickr-website. Je zou dan wel het risico kunnen lopen dat de foto verwijderd wordt en je hem dan niet meer kunt gebruiken, maar het voorkomt wel heel grote packages met foto’s die je moet rondsturen.

Daarnaast heb ik niet alleen deze uitgebreide pagina’s opgenomen, maar steeds ook een set waarbij ik alleen naar de foto verwijs. Dat is handig om direct naar te kunnen verwijzen.

Metadata
De metadata moet ik nog een beetje tweaken.
Je zien in onderstaande screenshot wat Natschool laat zien:
Auteur en datum zijn wel bekend, maar worden nu nog niet in de metadata meegegeven, moet ik nog even toevoegen.
De omschrijving etc. zijn nu automatisch gegenereerd. Op het moment dat je de foto’s voor onderwijstoepassingen wilt opslaan lijkt het me logisch dat je dat ook in de omschrijving laat terug komen. Omdat die metadata nu in een formaat beschikbaar is waarmee tools als Reload of omgevingen als Natschool iets mee kunnen, kan dat.

Het resultaat tot nu toe
Als je wilt zien hoe het package er nu uit ziet: dit is een voorbeeld.
Nog niet optimaal (zie ook hieronder) maar het werkt al en letterlijk maar één druk op een knop voor nodig.

TODO
Voor grote sets duurt het ophalen van de informatie bij Flickr op het moment nog wat lang. Ik heb dus nu een begrenzing op het aantal foto’s dat opgehaald wordt moeten instellen om te voorkomen dat er een time-out zou optreden.
Moet ik dus nog proberen wat op te vinden.

De metadata bevat nog niet alle informatie die beschikbaar is. Als metadata automatisch kan worden toegevoegd is het wel zo logisch dan ook meteen alle beschikbare info toe te voegen.

Het zou natuurlijk ook interessant zijn om het resultaat van een zoekopdracht op te kunnen slaan in een contentpackage met foto’s. Is mogelijk, maar dan moet ik de verschillende combinaties van parameters in een zoek-url doorlopen om te kijken hoe ik dat omzet in een zoek-opdracht via de Flickr API. Is te doen.

Maar eigenlijk wil ik dit trucje herhalen voor een paar andere sites, zoals bijvoorbeeld YouTube of Slideshare. Die hebben niet zo’n mooie API als Flickr, maar ook veel content die ik graag inclusief metadata wil kunnen bewaren en/of delen.