CodiFolio

Flickr: optimisation via javascript des images à afficher.

Préambule j'aime ce mot.

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
La vie n'est pas toujours aussi simple qu'il y paraît et ces formats ne sont pas disponibles pour toutes les images ... Ceci pour différentes raisons, logiques ou pas:
  • Le format 'o' n'est par exemple pas retourné si le propriétaire de la photo ne souhaite pas le rendre disponible.
  • Les formats h et k ont été rajoutés à postériori, et donc ne semble pas toujours fonctionner pour d'anciennes images.
  • Les méthodes comme 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).
  • Les images aux formats h, k et o (les plus grands formats) ont leur propre paramètre "secret", et le montage en kit évoqué juste au dessus ne fonctionne pas pour eux. Il faut les réclamer à l'API (dans le même appel heureusement, en utilisant le paramètre "extras").
    C'est extra en effet.

Ensuite

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('&');
}
    

Résultats de cet appel: Click button please.

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:

  1. Que ça fonctionne Du moins je l'espère car je n'ai pas traité le cas d'échec de la requête. En cas de problème, essayer une autre fois après avoir raffraîchi la page.
  2. Que la réponse contient un objet "photos", dans lequel on trouve différentes informations (le nombre de page, la page actuelle...) dont un tableau (array) "photo" contenant les données des photos souhaitées.
  3. Que dans le tableau "photo", les différents éléments se ressemblent, mais ne possèdent pas forcément tous les mêmes propriétés. Les 9 premières propriétés sont identiques, et ensuite cela dépend de la disponibilité des formats h, k et o.
  4. Que lorsque l'un de ces formats est retourné, on récupère 3 informations: width_format, height_format et url_format.

Démonstration d'utilité:

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.

Retour à l'index.

Commentaires.

Cet article vous a plu ou pas, vous êtes un robot...
Dites-le via le formulaire ci-dessous: