Flickr est une solution intéressante pour stocker des images.
Parce qu'il propose une capacité de stockage importante (1To) pour un compte gratuit,
qu'il permet de stocker des photos de manière publique ou privée, et d'organiser ces photos de plusieurs façons.
Flickr, grâce à son API, permet à l'utilisateur de récupérer différentes miniatures issues d'une image originale.
Les tailles proposées sont les suivantes source (Flickr):
Les lettres servant d'itentifiant à chaque format (sauf le '-' qui embête tout le monde).
s petit carré 75x75 q large square 150x150 t miniature, côté le plus long de 100 m petit, côté le plus long de 240 n small, 320 on longest side - moyen, côté le plus long de 500 z Moyen 640, côté le plus long de 640 c moyen 800, 800 sur la longueur† b grand, côté le plus long de 1 024* h largeur 1 600, longueur 1 600† k largeur 2 048, longueur 2 048† o image d'origine, jpg, gif ou png selon le format source
flickr.photos.getRecent qui sera utilisée plus bas ne retournent pas directement l'url des miniatures
mais des urls en kits à monter soi-même à partir de différents paramètres renvoyés par l'api
(voir ici).
Maintenant qu'on sait ça, on fait ça:
Appel de la méthode flickr.photos.getRecent de l'API Flickr ... il y en a plein d'autres (pour consulter des albums, des groupes ...),
celle-ci est publique, il faut juste posséder une "api_key" et donc un compte flickr et donc un mail chez yahoo.
Cet appel consiste à envoyer des paramètres vers une url qui va renvoyer une réponse dans un format lisible (json, xml).
Voici comment appeler l'url en javascript, au click sur un bouton, au travers de jQuery:
$(function(){
$('#bt_get_photos_recent').on('click', function(){
/* les paramètres à passer dans l'url
* method : 'flickr.photos.getRecent' -> ce qu'on veut récupérer
* api_key : 'votre_api_key_flickr',
* extras : 'url_s,url_q,url_t,url_m,url_n,url_z,url_c,url_b,url_h,url_k,url_o' -> Tous les formats
* per_page : 3 -> Le nombre de photos par page
* page : 1 -> La page que l'on souhaite récupérer
* format : 'json', // Le format de réponse souhaité
* nojsoncallback : 1 // pour récupérer du json brut */
var url_params = {
method : 'flickr.photos.getRecent',
api_key : 'votre_api_key_flickr',
extras : 'url_s,url_q,url_t,url_m,url_n,url_z,url_c,url_b,url_h,url_k,url_o',
per_page : 3,
page : 1,
format : 'json',
nojsoncallback : 1
};
// appel d'une fonction pour construire l'url (voir plus bas)
var url = getFlickrUrl(url_params);
$.getJSON(url, function(data){
// data est un objet json
console.log(data);
});
});
});
/* Création des urls pour appeler les méthodes de l'API */
function getFlickrUrl(params){
var url_base = 'https://api.flickr.com/services/rest/?';
var arr_params = [];
for(var i in params){
arr_params.push(i + '=' + params[i]);
}
return url_base + arr_params.join('&');
}
Ce bouton s'auto-détruira une fois cliqué.
Pour cet exemple, je ne demande que 3 photos, car comme j'affiche la réponse, cela ne sert à rien qu'elle soit trop longue.
En examinant la réponse de l'API, on constate:
width_format, height_format et url_format.
Voici des conteneurs de tailles aléatoires. Je souhaite que chaque conteneur de photo de ces galleries soit rempli avec la miniature qui convient le mieux à sa taille.
Dans chaque conteneur s'affichent la lettre du format de la miniature optimale (selon l'algorithme que j'ai fait, il doit être perfectible), sa largeur et sa hauteur.
Les conteneurs étant générés aléatoirement, certains ont des dimensions assez éloignées de ce qu'on trouve habituellement dans une gallerie de photo, mais bon, c'est pour le test.
Cliquer sur ce bouton pour générer une gallerie aléatoire et voir pour chaque image renvoyée par l'API quel format est le plus approprié à la taille du conteneur:
Ce bouton s'active une fois que le bouton précédent a été pressé et qu'une réponse de filckr est reçue ... Il est possible de le cliquer plusieurs fois.