ThéorieRéférences XMLOpérateurs

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

Les opérateurs d'images [resizeImage/sourceSet]
Les opérateurs d'images sont des opérateurs spécifiques au langage Blogger qui permettent d'appliquer des caractéristiques aux url des images.

Syntaxes

Opérateur Syntaxe Résultat
resizeImage
Syntaxe par défaut :
string resizeImage number resizeImage string
string
Syntaxe fonctionnelle :
resizeImage(string,number,string)
sourceSet
Syntaxe par défaut :
string sourceSet array[number] sourceSet string
string
Syntaxe fonctionnelle :
sourceSet(string,array[number],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 url des images hébergées par Google via Blogger, Picasa et GooglePhotos 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 données XML contenants l'url d'une image hébergée par Google même si la donnée n'est pas de type image.


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.



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.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire