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

Blogger - 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

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.

resizeImage operator demo

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

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.

array resizeImage operator demo 50px array resizeImage operator demo 75px array resizeImage operator demo 100px

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

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.

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.

Spotlight

L'Éditeur XML de Thème Blogger : Quand le BackEnd Rencontre le FrontEnd

Populaires cette semaine

Foire aux questions Blogger (Novembre 2021)

Ajouter des boutons à la barre de partage Blogger