Les opérateurs d'images [resizeImage/sourceSet]

Nous vous rappelons que lorsque vous accédez à ce blog, vous signez automatiquement un accord avec Blogger Code.
Consultez les CGU.


Blogger - Image operators
Les opérateurs d'images sont des opérateurs spécifiques au langage Blogger qui permettent d'appliquer des caractéristiques aux URLs des images Google, comme par exemple, redéfinir la taille et le ratio, ou encore les rendre responsives.


Syntaxes

Noms Opérateurs Opérandes Syntaxe fonctionnelle Résultat
Redimensionner resizeImage 2 ou 3 resizeImage(image,number,string) image
Images réactives sourceSet sourceSet(image,array[number],string) string

Remarque: Une syntaxe fonctionnelle est une alternative que l'on peut utiliser lorsque la syntaxe standard contient plusieurs fois le même opérateur.
Dans le cadre de l'utilisation des opérateurs d'images, cette alternative s'avère plus facile à mettre en œuvre que la syntaxe par défaut. En savoir plus.


Images prises en charge

Les URLs des images hébergées par Google via Blogger, Picasa, GooglePhotos et les vignettes des vidéos YouTube (compris les vignettes maxresdefault.jpg) sont dotées de caractéristiques de redimensionnements. Les opérateurs appliquent les nouvelles valeurs à ces paramètres.

A savoir : Les opérateurs travaillent également avec les chaînes de caractères explicites et les données string contenants l'url d'une image hébergée par les sources citées ci-dessus.


Redimensionner une image

L'opérateur resizeImage permet de redimensionner une image.
  • La première opérande est l'url de l'image
  • La seconde opérande est un nombre définissant la nouvelle dimension de l'image.
  • La troisième opérande n'est pas requise. C'est une chaîne de caractères contenant le nouveau ratio de l'image :
    • 1:1 : Carré
    • 4:3
    • 16:9
    • 800:600
    • etc...
Exemple avec la syntaxe par défaut
<img expr:src='data:view.featuredImage resizeImage 600 resizeImage "4:3"'/>
Exemple avec la syntaxe fonctionnelle
<img expr:src='resizeImage(data:view.featuredImage, 600, "4:3")'/>
Exemple avec des valeurs explicites
<img expr:src='resizeImage("https://2.bp.blogspot.com/-n75i0h-lk7A/TcyQipjqBTI/AAAAAAAAV1Y/0cPsnM4Vrr4dUGUBqeaawAgtoZdjNRbDg/s200/3539_1600x1200-wallpaper-cb1267712030.jpg", 500, "500:200")'/>
L'image de 200px a été redimensionnée à 500px. Le ratio est 500:200.

resizeImage operator demo


Images réactives

L'opérateur sourceSet travaille comme l'opérateur resizeImage. A la différence près qu'il imprime autant de redimensionnements qu'il y a de nombres définis dans un tableau.
Le résultat est destiné a être inséré dans le paramètre srcset dans une balise <img>.
  • La première opérande est l'url de l'image
  • La seconde opérande est un tableau de nombres. Par exemple : [200,400,800,1600].
  • La troisième opérande n'est pas requise. C'est une chaîne de caractères contenant le nouveau ratio de l'image :
    • 1:1 : Carré
    • 4:3
    • 16:9
    • 800:600
    • etc...

Résultat de l'opération
URL_IMAGE_200px w200,
URL_IMAGE_400px w400,
URL_IMAGE_800px w800,
URL_IMAGE_1600px w1600
Exemple avec la syntaxe par défaut
<img expr:src='data:view.featuredImage'
     expr:srcset='data:view.featuredImage sourceSet [200,400,800,1600] sourceSet "3:1"'/>
Exemple avec la syntaxe fonctionnelle
<img expr:src='data:view.featuredImage'
     expr:srcset='sourceSet(data:view.featuredImage, [200,400,800,1600], "3:1")'/>
Exemple avec des valeurs explicites
<img src='https://2.bp.blogspot.com/-de5qr-HMJjw/TcyQp7w12sI/AAAAAAAAV1Y/1e_DbtT6kpMFvVnpms0m7grvKoVK8TKPw/s200/3554_1600x1200-wallpaper-cb1267712041.jpg'
     expr:srcset='sourceSet("https://2.bp.blogspot.com/-de5qr-HMJjw/TcyQp7w12sI/AAAAAAAAV1Y/1e_DbtT6kpMFvVnpms0m7grvKoVK8TKPw/s200/3554_1600x1200-wallpaper-cb1267712041.jpg", [200,400,800,1600], "3:1")'
     style='width: 100%;'/>
L'image de 200px a été élargie à 100% de la largeur du container.
L'attribut srcset choisi la taille correspondant au plus près à la taille du container.

Démo - Set [200,400,800,1600]


Cette image est redimensionnable ?

Les opérateurs ne prennent en charge que les images hébergées par Google, mais les données peuvent contenir des URLs d'images en provenance de services extérieurs.
Comment savoir si la valeur contenue dans la donnée est une image Google ?
Rien de plus simple, reportez-vous à cette fiche : Le paramètre Image redimensionnable.


Les autres opérateurs

Posts les plus consultés de ce blog