Dimensions des images : width
, height
, originalWidth
, originalHeight

Les termes width
, height
, originalWidth
et originalHeight
sont des suffixes que l'on ajoute aux données Blogger de type image afin d'en extraire leurs dimensions.
Les réglages
Les réglages width
(largeur) et height
(hauteur) ont la même vocation. Ils renvoient un nombre correspondant à la largeur et la hauteur d'affichage de la première image contenue dans un article (ou page autonome), seulement si les attributs HTML width
et height
sont mentionnés explicitement dans la balise <img/>
.
Quant aux réglages originalWidth
(largeur originale) et originalHeight
(hauteur originale), ils font également la même chose sauf qu'ils renvoient un nombre correspondant à la largeur et la hauteur originale de l'image contenue dans un article (ou page autonome), seulement si les attributs HTML data-original-width
et data-original-height
sont mentionnés explicitement dans la balise <img/>
.
Ces attributs sont automatiquement ajoutés lorsque vous injectez des images dans vos articles avec les outils de l'éditeur d'articles de Blogger.
<img border="0"
src="https://4.bp.blogspot.com/-gP1GQ0e9_T4/WoSV0fXg4eI/AAAAAAAAo5w/f4SFUkMN1rMwu-XDzo2UuXYJySH4PoX3QCKgBGAs/s320/2018-THE.jpg"
width="320"
height="180"
data-original-width="1600"
data-original-height="900" />
Lorsque ces attributs ne sont pas mentionnés explicitement dans le code html de l'article, les réglages des données renverront une valeur null
ou vide.
Dans le cas contraire, les valeurs seront stockées uniquement dans ces données :
Exception :
Lorsqu'une donnée de type image renferme une vignette en provenance d'une vidéo YouTube, les dimensions sont imposées.
D'un point de vue technique, ces réglages sont des données renfermées dans un objet, qui lui-même est contenu dans la donnée à régler. Les réglages renvoient une nouvelle valeur de type number correspondant aux dimensions de l'image.
Échantillonnage des ressources
width: number,
height: number,
originalWidth: number,
originalHeight: number
En pratique, dans l'éditeur XML du thème, les réglages s'ajoutent au nom de la donnée de type image :
Syntaxes de sortie
<!-- width --> data:image.width <!-- height --> data:image.height <!-- originalWidth --> data:image.originalWidth <!-- originalHeight --> data:image.originalHeight
Exemple avec la donnée universelle data:widgets.posts[i].featuredImage
:
<b:loop values='data:widgets.Blog.first.posts' var='post'> <!-- width --> <data:post.featuredImage.width/> <!-- height --> <data:post.featuredImage.height/> <!-- originalWidth --> <data:post.featuredImage.originalWidth/> <!-- originalHeight --> <data:post.featuredImage.originalHeight/> </b:loop>
Ces réglages peuvent également s'ajouter à la suite d'une opération qui est encadrée de parenthèses dont le résultat est de type de type image :
<!-- width --> <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).width/> <!-- height --> <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).height/> <!-- originalWidth --> <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).originalWidth/> <!-- originalHeight --> <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).originalHeight/>
Exemple de mise en oeuvre
Trouver l'orientation de l'image
<b:loop values='data:posts' var='post'> <b:if cond='data:post.featuredImage.width and data:post.featuredImage.height'> <b:if cond='data:post.featuredImage.width gt data:post.featuredImage.height'> Image en mode "paysage". <b:elseif cond='data:post.featuredImage.width lt data:post.featuredImage.height'/> Image en mode "portrait". <b:elseif cond='data:post.featuredImage.width eq data:post.featuredImage.height'/> Image carrée. </b:if> </b:if> </b:loop>
