Flickr propose un lien de partage pour « embed » un slideshow n’importe où. Fine. Mais rien n’est proposé pour inclure une galerie.
Il faut donc passer par l’API Flickr.
INDEX
Méthode appropriée dans l’App Garden de l’API Flickr
Nous allons interroger la méthode flickr.photosets.getPhotos
lire la doc pour récupérer les photos de ce magnifique set (album) de photos de vélos vus à Tokyo.
Pré-requis
– Tout d’abord, connectez-vous à votre compte Flickr
– Récupérer votre Secret Key à partir de cette URL
– Créez un album (set) de photos
Étape 1 : connexion à l’API
Ici, on voit que l’on veut récupérer les 15 premières photos (15 photos per_page, et page 1) :
$params = array( 'api_key' => 'xxx', 'method' => 'flickr.photosets.getPhotos', 'photoset_id' => 'zzz', 'extras' => 'original_format', 'format' => 'php_serial', 'per_page' => 15, 'page' => 1 ); $encoded_params = array(); foreach ($params as $k => $v){ $encoded_params[] = urlencode($k).'='.urlencode($v); } // pour vérifier que ça fonctionne : echo "<pre>"; print_r($encoded_params); echo "</pre>";
Cela nous donne une réponse du genre :
Array ( [0] => api_key=xxx [1] => method=flickr.photosets.getPhotos [2] => photoset_id=zzz [3] => extras=original_format [4] => format=php_serial [5] => per_page=15 [6] => page=1 )
Jusqu’ici, tout va bien.
Étape 2 : récupérer les photos du set
$ch = curl_init(); $timeout = 5; // 0 = pas de timeout curl_setopt ($ch, CURLOPT_URL, 'https://api.flickr.com/services/rest/?'.implode('&', $encoded_params)); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout); $file_contents = curl_exec($ch); curl_close($ch); $rsp_obj = unserialize($file_contents);
On obtient la liste des photos, ou plutôt des paramètres de chaque photo.
Notamment :
– Sur quel serveur est la photo
– Son ID
– Son titre
– Etc.
Étape 3 : affichage des photos
Nous allons maintenant exploiter ces informations pour afficher les photos dans de simples balises HTML img
:
if ($rsp_obj['stat'] == 'ok') { $photos = $rsp_obj["photoset"]["photo"]; foreach($photos as $photo) { $farm = $photo['farm']; $server = $photo['server']; $photo_id = $photo['id']; $secret = $photo['secret']; $photo_title = $photo['title']; echo '<img src="https://farm'.$photo['farm'].'.static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'_t.jpg" alt="'.$photo['title'].'">'; } } else { echo "Flickr indisponible !"; }
Résultat
Et voilà le travail… à vous d’imaginer la CSS qui va avec !