Hoe kun je op een site foto's van Picasa Web Albums (pwa) laten zien door direct te hotlinken met HTML en dus geen gebruik te maken van de embed slideshow of de embed image functie? Voor een /de oplossing lees verder.

revisie .20090609
revisie .20091205
revisie .20110921

Het lijkt erop dat de URL van Picasa nu wel werkt, ongeachte onderstaande oplossing. Google heeft haar code verandert, ik moet nog uitvissen wat er precies verandert is (2011/09/21).

De casus

De situatie waar ik mee te maken kreeg, is als volgt: een organisatie maakt voor haar website gebruik van Picasa Web Albums om foto's op te slaan. Picasa is een goede manier om foto's te beheren op internet.

Ja, er zijn krachtigere manieren om foto's te integreren in een site zoals Flickr. Deze dienst biedt meer mogelijkheden en is flexibeler dan PWA. Echter, de site waar ik mee werk, wil niet voor elke functie of dienst gebruik maken van een andere site of internetdienst. Want het gevolg daarvan is dat men diverse wachtwoorden moet onthouden. Daarom heeft men gekozen voor Google, zodat analyse, mail, documenten en foto's onder 1 dak zitten. Gebruikers hoeven dan maar 1 wachtwoord te onthouden en alles is op 1 plek geregeld.

Op de site zelf kun je via een wysiwyg-editor tekst invoeren. En natuurlijk wil men plaatjes invoegen die gehost zijn op Picasa.
In dit artikel ga ik het plaatje hiernaast gebruiken als voorbeeld. Voor wie zich afvraagt wat het is: het is de poot van Mouse, onze kater. De directe URL van dit plaatje is http://lh5.ggpht.com/_fMqLW0k_Q60/RvuzayFaKXI/AAAAAAAAC5A/ylg4RNBD8ww/IM.... Echter, als ik deze URL direct gebruik (in de img-tags) dan krijg ik een mooi kruisje te zien.

De standaard methode zoals Google het wil

From dumpmap

Wat wil Google? Dat je gebruik maakt van de embed-image functie. Dan krijg je bovenstaand: een mooie foto in een tabel, met daaronder de naam van de map - dumpmap in dit geval. Klik je op dumpmap, dan kom je in de map en zie je de andere foto's. Dat is niet handig. En daarbij, ik wil helemaal niet met tabellen werken! Ik werk met divs en probeer tabellen te vermijden. Deze tekst bijvoorbeeld staat onder het plaatje en niet naast het plaatje. Als ik de tekst naast het plaatje wil krijgen, moet ik de tabel uitbreiden met nog een kolom en de tekst daarin krijgen. Pfff ... helemaal niet handig dus.

Zoeken naar een andere manier
Dan maar toch de URL gebruiken. Linken naar http://lh5.ggpht.com/_fMqLW0k_Q60/RvuzayFaKXI/AAAAAAAAC5A/ylg4RNBD8ww/IM... werkt niet.  Maar de foto moet toch op de één of andere manier opgevraagd kunnen worden? Na een hoop gespeur kom ik er eindelijk achter dat Picasa een soort van beveiliging heeft om linken naar grote foto's tegen te gaan. Je kunt alleen linken naar vooraf geschaalde foto's, zodat er bandbreedte gespaard wordt

Er zit in de URL een soort beveiliging ingebouwd waardoor je niet de full-size afbeelding direct kunt opvragen. Ergens in de URL zit een soort 'verificatie' ingebouwd die ervoor zorgt dat er niet al te grote plaatjes worden verstuurd. In de URL zie je dat als volgt terug.  Zoals gezegd werkt http://lh5.ggpht.com/_fMqLW0k_Q60/RvuzayFaKXI/AAAAAAAAC5A/ylg4RNBD8ww/IM... niet. Maar als er in de URL een kleine wijziging staat, weet de server van Picasa dat je een geschaalde foto opvraagt. Het gaat om de toevoeging "/s***" voor de laatste /. Hier kan ***  staan voor een waarde uit de reeks

32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600. Met 144-c (s144-c) krijg je een vierkante afbeelding van je plaatje.

Elke waarde vertegenwoordigt een grootte. Gebruik je /s320 dan wordt het plaatje met een maximale grootte van 320 binnengehaald (om het even of het de lengte of breedte is: in ieder geval is het maximum van 1 van deze 2 320 pixels).

Je krijgt dan als URL
http://lh5.ggpht.com/_fMqLW0k_Q60/RvuzayFaKXI/AAAAAAAAC5A/ylg4RNBD8ww/s800/IMG_6433-cr.jpg
of
http://lh5.ggpht.com/_fMqLW0k_Q60/RvuzayFaKXI/AAAAAAAAC5A/ylg4RNBD8ww/s144/IMG_6433-cr.jpg

Ga je deze verwerken in een img-tag, dan kun je direct hotlinken naar een foto. Het lijtk erop dat Picasa bij aanvraag van een foto de foto on-the-fly schaalt naar de overeenkomstige code voor de laatste /. Hierbij een paar voorbeelden:

Met /s144 krijg je:


Met /s800 krijg je:


Let wel: de foto kan niet groter worden dan hij op Picasa staat. In dit geval is de poot van Mouse op Picasa slechts 640*480 groot. Ook al geef ik de /s800 mee, hij wordt niet groter dan 640*480 getoond.

Maar met /s928 (staat niet in de lijst) krijg je ...:

... niets te zien. Toch staat hier dezelfde code als hierboven, met als enig verschil /s928 in plaats van /s144 of /s800. Je ziet hooguit een kruisje.

Let op!
Als je naar een grote foto gaat zoals deze (die 3070*2046 is) en daar de URL van de foto opvraagt door naar de eigenschappen te kijken, dan zit er al een /s*** - variabele in, namelijk .../s912/monkey_tuin.jpg. Let er dus op dat Google soms (als de foto groot is) al een /s***/ waarde meegeeft. Verander deze in een waarde die overeenkomt met het lijstje hierboven.

Nieuwe functie in Picasa (taal MOET op engels staan)

Sinds kort heeft Picasa de mogelijkheid om een link op te vragen. In de rechter kolom klik je op "link naar deze foto". Nu kun je enkele extra instellingen ingeven. Hiervoor (bij het schrijven dezes)moet de taal op engels staan. Het zal binnenkort ook wel in het Nederlands beschikbaar komen.

Deze methode van werken vind ik zelf omslachtig, vandaar dat ik er hier niet verder op inga. Op het moment dat je weet hoe je een link van een afbeelding moet gebruiken, ga je niet werken met "uitklapmenutjes en aanvinkopties".

Verder lezen:
# http://code.google.com/apis/picasaweb/reference.html#Parameters