Les opérateurs d'images / Image operators : resizeImage, sourceSet

Les opérateurs resizeImage et sourceSet sont des opérateurs spécifiques au langage Blogger qui permettent d'appliquer un traitement aux URLs des images Google, comme par exemple, redéfinir la taille et le ratio, ou encore créer des ensembles pour un affichage responsive.

Les syntaxes

Noms	Opérateurs	Syntaxes	Opérandes	Résultat
Redimensionner	resizeImage	Syntaxe par défaut image resizeImage number resizeImage string Syntaxe Fonctionnelle resizeImage(image,number,string)	Nombre d'opérandes : 2 ou 3	Résultat : image
Tableau d'images redimensionnées	resizeImage	Syntaxe par défaut image resizeImage array[number] resizeImage string Syntaxe Fonctionnelle resizeImage(image,array[number],string)	Nombre d'opérandes : 2 ou 3	Résultat : array[object]
Images réactives	sourceSet	Syntaxe par défaut image sourceSet array[number] sourceSet string Syntaxe Fonctionnelle sourceSet(image,array[number],string)	Nombre d'opérandes : 2 ou 3	Résultat : string

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.

Attention :

Actuellement, le nouveau format des URLs des images Blogger (lancé le 20 août 2021) n'est pas totalement pris en charge dans les opérations lorsque :

• la valeur est intégrée explicitement.

• la valeur est contenue dans une donnée de type string.

Mise à jour 23/08/2021 :

Suite aux problèmes de compatibilités rencontrés avec le nouveau format des URLs, l'ingénièrie Blogger les a désactivés provisoirement.

Mise à jour 27/08/2021 :

Retour progressif du nouveau format des URLs des images. Les corrections apportées par l'équipe Blogger sont : Compatibilité avec les expressions XML Blogger, le redimensionnement dans l'éditeur d'articles et l'affichage des images dans la lightbox.

Redimensionner une image

L'opérateur resizeImage a 2 syntaxes. La première permet de redimensionner une image qui sera, pour la plupart des cas, utilisée dans un attribut src dans une balise <img>.

1. La première opérande est l'url de l'image.

2. La seconde opérande est un nombre définissant la nouvelle dimension de l'image.

3. La troisième opérande n'est pas requise. Il s'agit d'une chaîne de caractères contenant le nouveau ratio de l'image :

   • Rognage carré : "1:1", "2:2", "25:25", etc...

   • Rognage paysage : "4:3", "16:9", "800:600", etc...

   • Rognage portrait : Ce format n'est pas pris en charge.

Quelques exemples

• Syntaxe par défaut
• Syntaxe fonctionnelle
• Valeur explicite

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 une valeur explicite

<img expr:src='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNs2QaAHpQA41rr5AXJMeM-i_fqp0rEzKya-hiJ8RHYiwV1S7frIL0bp-I3Ifo17stVy3x3I_qIFSkM01AKU94NNtwy4XCAXCWUSvti_dcxIBUsJrQ0-vT8iWzG3QTAzakeL6vnLCxhTD/s200/image.jpg", 500, "500:200")'/>

L'image de 200px a été redimensionnée à 500px. Le ratio est 500:200.

Le rendu HTML sera :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNs2QaAHpQA41rr5AXJMeM-i_fqp0rEzKya-hiJ8RHYiwV1S7frIL0bp-I3Ifo17stVy3x3I_qIFSkM01AKU94NNtwy4XCAXCWUSvti_dcxIBUsJrQ0-vT8iWzG3QTAzakeL6vnLCxhTD/w500-h200-p-k-no-nu/image.jpg"/>

Créer un tableau d'images redimensionnées

La 2e syntaxe de l'opérateur resizeImage crée un tableau contenant l'image redimensionnée dans toutes les tailles définies dans l'opération.

1. La première opérande est l'url de l'image.

2. La seconde opérande est un tableau de nombres qui définissent les nouvelles dimensions de l'image.

3. La troisième opérande n'est pas requise. Il s'agit d'une chaîne de caractères contenant le nouveau ratio de l'image :

   • Rognage carré : "1:1", "2:2", "25:25", etc...

   • Rognage paysage : "4:3", "16:9", "800:600", etc...

   • Rognage portrait : Ce format n'est pas pris en charge.

Le résultat de l'opération sera un tableau objet dont les items sont :

• url : L'url de l'image redimensionnée.

• size : La taille de l'image redimensionnée.

Quelques exemples

• Syntaxe par défaut
• Syntaxe fonctionnelle
• Valeur explicite

Exemple avec la syntaxe par défaut

<b:loop values='data:view.featuredImage resizeImage [50,75,100] resizeImage "16:9"' var='image'>

  URL : <img expr:src='data:image.url'/>
  SIZE : <data:image.size/>

</b:loop>

Exemple avec la syntaxe fonctionnelle

<b:loop values='resizeImage(data:view.featuredImage, [50,75,100], "16:9")' var='image'>

  URL : <img expr:src='data:image.url'/>
  SIZE : <data:image.size/>

</b:loop>

Exemple avec une valeur explicite

<b:loop values='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNs2QaAHpQA41rr5AXJMeM-i_fqp0rEzKya-hiJ8RHYiwV1S7frIL0bp-I3Ifo17stVy3x3I_qIFSkM01AKU94NNtwy4XCAXCWUSvti_dcxIBUsJrQ0-vT8iWzG3QTAzakeL6vnLCxhTD/s200/image.jpg", [50,75,100], "16:9")' var='image'>

  <img expr:src='data:image.url'/>

</b:loop>

L'image a été redimensionnée respectivement aux tailles 50px, 75px et 100px. Le ratio est 16:9.

Le rendu HTML sera :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNs2QaAHpQA41rr5AXJMeM-i_fqp0rEzKya-hiJ8RHYiwV1S7frIL0bp-I3Ifo17stVy3x3I_qIFSkM01AKU94NNtwy4XCAXCWUSvti_dcxIBUsJrQ0-vT8iWzG3QTAzakeL6vnLCxhTD/w50-h28-p-k-no-nu/image.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNs2QaAHpQA41rr5AXJMeM-i_fqp0rEzKya-hiJ8RHYiwV1S7frIL0bp-I3Ifo17stVy3x3I_qIFSkM01AKU94NNtwy4XCAXCWUSvti_dcxIBUsJrQ0-vT8iWzG3QTAzakeL6vnLCxhTD/w75-h42-p-k-no-nu/image.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNs2QaAHpQA41rr5AXJMeM-i_fqp0rEzKya-hiJ8RHYiwV1S7frIL0bp-I3Ifo17stVy3x3I_qIFSkM01AKU94NNtwy4XCAXCWUSvti_dcxIBUsJrQ0-vT8iWzG3QTAzakeL6vnLCxhTD/w100-h56-p-k-no-nu/image.jpg"/>

Dans le modèle de gadgets livré par défaut par Blogger, l'inclusion commune responsiveImageStyle est à ce jour l'unique exemple concret de l'implantation d'un tableau d'images redimensionnées.

Images réactives

L'opérateur sourceSet est très similaire à la 2e syntaxe de l'opérateur resizeImage. A la différence près que le résultat est une chaîne de caractères dont la valeur est destinée a être injecté dans le paramètre srcset dans une balise <img>.

1. La première opérande est l'url de l'image.

2. La seconde opérande est un tableau de nombres. Par exemple : [200,400,800,1600].

3. La troisième opérande n'est pas requise. Il s'agit d'une chaîne de caractères contenant le nouveau ratio de l'image :

   • Rognage carré : "1:1", "2:2", "25:25", etc...

   • Rognage paysage : "4:3", "16:9", "800:600", etc...

   • Rognage portrait : Ce format n'est pas pris en charge.

Résultat de l'opération

URL_IMAGE_200px w200,
URL_IMAGE_400px w400,
URL_IMAGE_800px w800,
URL_IMAGE_1600px w1600

Quelques exemples

• Syntaxe par défaut
• Syntaxe fonctionnelle
• Valeur explicite

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 une valeur explicite

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVqcKzgGwX6MdWsR0u9KKlYC83bmSpWEgnttHRwh48QPPiABohQgjHBwtT_cn-D13riUDZjmLmOHougjjGOyk8WG1fANwoUTCA_pGzRq9z4NBxMcDBglcvSl079JCGB4jGeE3Md9_RQ5wg/s200/image.jpg'
     expr:srcset='sourceSet("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVqcKzgGwX6MdWsR0u9KKlYC83bmSpWEgnttHRwh48QPPiABohQgjHBwtT_cn-D13riUDZjmLmOHougjjGOyk8WG1fANwoUTCA_pGzRq9z4NBxMcDBglcvSl079JCGB4jGeE3Md9_RQ5wg/s200/image.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.

Les autres opérateurs

• + (concatenate)
• + (addition)
- (substraction)
* (multiplication)
/ (division)
% (modulus)
• ?: (selector)
• and (&&)
or (||)
not (!)
• eq (==)
neq (!=)
lt (<)
lte (<=)
gt (>)
gte (>=)
• appendParams
fragment
params
path
• in
contains (array)
• contains (string)
• format
• limit / take
skip / offset
to
• resizeImage
sourceSet
• snippet
• any
all
none
count
map / select
filter / where
first

Retourner à l'introduction