Dimensions des images : width, height, originalWidth et originalHeight

Blogger - Largeur et hauteur d'une image

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 l'image contenue dans un article, seulement si les attributs 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, seulement si les attributs 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.

[HTML] Post editor
<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>


Blogger Humour - Les smileys jouent avec les tailles d'affichage.


Les autres réglages de données

Spotlight

Foire aux questions Blogger (Septembre 2021)

Populaires cette semaine

Blogger-Stats : Les Statistiques Blogger