Bon jusque là, nous en étions resté à des choses relativement douces quand à l'usage des APIs de TypePad. Passons à quelque chose d'un peu plus rigolo, mais pas forcément plus utile : la réalisation d'une galerie photos pleine page trouvant sa source dans l'une ou l'autre de vos catégories de blog (eg. mise à jour automatique fonction de vos notes).
Pour appâter le chaland, il nous faut un exemple, ne reculant devant aucun sacrifice votre bon serviteur s'est donc fait un plaisir de vous concocter la démo sur son autre blog (tout à fait fameux en toute humilité) : La Galerie Photo de Hey!
Pour la réalisation de cette page, vous aurez besoin de :
- lire consciencieusement le pas à pas soigneusement rédigé ci-dessous
- votre ID de blog TypePad (que vous pouvez retrouver en saisissant son URL sur l'ID Finder)
- l'intitulé de la catégorie dans laquelle se trouve les photos qui seront affichées dans la galerie (dans l'exemple, ma catégorie s'appelle "Images")
- mettre à jour quelques éléments dans le fichier "index.html" et optionnellement dans le fichier "styles.css" qui figurent dans le fichier zip fourni : Téléchargement Galerie-photos-typepad
- placer les fichiers de ce zip dont ceux mis à jour sur votre blog TypePad via son gestionnaire de fichiers
Tout d'abord, la génèse (vous n'y couperez pas mais je fais court). Ecumant régulièrement delicious pour essayer de me tenir à jour des nouveautés web (que je partage dans une catégorie dédiée sur Hey!), récemment, j'avais parcouru un formidable petit tutoriel pour réaliser une galerie de photos pleine page, c'était sur Codrops.
Images - Galerie - Pleine Page - Classe !
Je m'étais dis que cela serait sympa de le faire fonctionner avec TypePad, et autant c'est facile via les habillages avancés, autant via l'habillage basique, tintin ! Donc, utilisant de plus en plus régulièrement l'API TypePad, ma petite tête a commencé à tourner en tâche de fond pour essayer de trouver comment coupler les deux. Etant arrivé à un résultat satisfaisant en peu de temps, je vous en soumets rapidement la mise en place.
Je ne reviens pas sur la machinerie de la galerie en elle-même, tout est expliqué sur Codrops. Je me suis contenté de le coupler avec un appel à l'API TypePad et d'en modifier quelques lignes (ajout d'un lien vers la note entière notamment).
Ce qu'il vous faut modifier dans les fichiers du zip :
index.html
Ligne 34
Si vous avez lu les autres articles consacrés à l'API TypePad vous savez que c'est. Sinon tant pis pour vous :p
Blague à part, ceci est le paramètre indiquant sur quel blog et quelle catégorie je vais aller chercher mes images au sein de l'API.
Il vous faut donc remplacer "6a00e5504c41f188330120a70c9313970b" par l'ID de votre blog, et "Images" par l'intitulé de votre catégorie.
Si vous souhaitez attaquer l'ensemble de vos notes l'URL doit être de type : "http://api.typepad.com/blogs/ID de blog/post-assets.js".
Ligne 37 (optionnel)
Dans l'exemple "30" est le nombre maximum de notes sur lesquelles s'effectueront les traitements dans le code qui suit. Plus le chiffre est élevé, plus le chargement sera long. Vous pouvez modifier ce chiffre comme vous le souhaitez.
Ligne 48 (optionnel)
A la "21"ème entrée, les traitements s'arrêtent. Au maximum ce seront donc 20 photos que je présenterai au final dans la galerie. Ce curseur est inférieur à celui du dessus car je ne sais pas forcément combien de photos contiennent mes notes (certaines notes peuvent ne pas en contenir, ou lier des images externes à TypePad non prises en compte par le script...k).
Ligne 56 (optionnel)
C'est ce qui définit la taille de ma vignette pour chaque image (ici une image retaillée en 120x120 pixels), vous êtes libre de spécifier une autre taille tant que TypePad en propose une sortie (voir le fonctionnement de imagelink).
C'est tout pour index.html.
styles.css (Optionnel)
Si vous avez changé la dimension des vignettes, il vous faut alors mettre à jour leur style pour refléter ce changement.
Ligne 47
Remplacez "120px" par les dimensions choisies pour vos vignettes.
C'est fini pour les éditions, il ne vous reste plus qu'à placer l'ensemble des fichiers sur TypePad, en conservant la structure donnée dans le fichier zip.
Créez un nouveau répertoire au sein de votre blog pour cela (par exemple "galerie"), au final, vous devriez obtenir quelque chose comme ci-dessous :
Le répertoire "css" contient 1 fichier, le répertoire "images" 3, le répertoire "js" 1.
Il ne vous reste plus qu'à communiquer sur la nouvelle adresse de votre galerie photo (par ex: monblog.typepad.com/dir/galerie) et d'admirer le résultat. La liste des photos sera automatiquement mise à jour fonction de vos nouvelles publications sur le blog.
A noter :
Avant d'envoyer vos fichiers sur le compte TypePad, vous pouvez vérifier que cela fonctionne en local en ouvrant le fichier "index.html" dans votre navigateur.
Côté référencement n'attendez rien de cet extra, c'est véritablement pour proposer à vos lecteurs un moment purement récréatif ;-) et mieux mettre en valeur vos photos.
Cette galerie fonctionne sur FF 3+ / Chrome / Safari et IE 7+
Elle est d'autant plus agréable sur un navigateur Webkit (Safari ou Chrome par ex.).
Comme l'ensemble fonctionne uniquement via le tryptique magique HTML/CSS/JS, vous pouvez en fait l'utiliser partout ou l'hébergement de tels fichiers est possible (presque partout donc).
L'ensemble vous est donné tel quel, vous êtes libres de modifier, tripatouiller et transformer le tout comme bon vous semble, je nierai avoir eu connaissances de vos agissements de toutes façons, mais vous pouvez aller remercier :
- Codrops
- l'API TypePad
- Malihu (le scrolling des vignettes c'est lui)
- les photos de Mark Sebastian dans la démo Codrops qui m'ont vraiment sauté aux yeux :-)
Enjoie !
Commentaires