Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2012/09/28

Recadrer automatiquement les images du Blog

Recadrer automatiquement les images du Blog (crop)

Utiliser l'URL d'une image de Picasa Albums Web pour recadrer automatiquement une image



Les photos mises en ligne sur Blogger sont stockées dans Picasa Albums Web. Chaque blog contenant des photos dispose d'un album Web Picasa correspondant (portant le même nom) pour ces photos. Une petite icône orange Blogger figure sur la couverture de cet album. Nous allons voir comment utiliser l'URL fournie par Picasa Albums Web pour recadrer automatiquement une photo.

L'adresse URL d'une photo s'obtient en ouvrant la photo dans Picasa Albums Web, puis en recopiant le lien donné dans la colonne de droite (lien vers cette photo). C'est une adresse de ce type : 


https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s800/navette-atlantis.jpg



Le répertoire sxx, ici s800 est la taille de la plus grande dimension de l'image. Blogger fournit automatiquement une taille en fonction de l'espace disponible sur le blog et du choix indiqué lors de l'insertion de l'image (petit, moyen ou grand).

Taille d'image sans déformation

La valeur du répertoire sxx peut varier de 0 à 1600 pixels. s0 donne l'image originale. Affichons notre image en 72 pixels de large (vignette - thumbnail) puis en 220 pixels de large.


Vignette de 72 pixels

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s72/navette-atlantis.jpg






Image de 220 pixels

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s220/navette-atlantis.jpg





Paramètre -d

En ajoutant -d, l'URL ainsi créée permet le téléchargement de l'image, avec les informations Exif.


Adresse pour le téléchargement de l'image originale

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s0-d/navette-atlantis.jpg



Télécharger l'image originale


Paramètre -h

En ajoutant -h, l'URL ainsi créée est celle d'une page web. Blogger ajoute un script qui interdit l'insertion de cette page dans un cadre iframe.


Adresse d'une page web avec une image de 720 pixels de large

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s720-h/navette-atlantis.jpg





Paramètre -c

Le paramètre -c permet d'obtenir une image recadrée (croppée - to crop, recadrer). L'image est un carré centré sur l'image originale. Les proportions sont conservées.


Carré de 144 pixels de côtés

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s144-c/navette-atlantis.jpg








Image carrée de 220 pixels de côtés

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s220-c/navette-atlantis.jpg





Combiner les paramètres -c et -h

Les paramètres -c et -h peuvent être utilisés simultanément.


Carré de 320 pixels de côtés, affiché dans une page web

https://lh3.googleusercontent.com/-zfAfn0QqYe8/UGSsm9vrToI/AAAAAAAAGTk/PP8J0od7Dfc/s320-c-h/navette-atlantis.jpg





Plus d'informations

Picasa Albums Web

Un Gadget Blogger pour afficher les vignettes d'un Album Picasa

Un Gadget Blogger pour afficher un diaporama d'un Album Picasa

Un Gadget Google pour insérer une photo avec un cadre semi-transparent

Enregistrer un commentaire


Rechercher sur le Blog de Prac avec Google CSE