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.

[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 :

• posts[i].featuredImage

• widgets.Blog[i].posts[i].featuredImage

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>

<!-- data setting width/height/originalWidth/originalHeight - XML demo. Compatibility : Gadget Version 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2018/02/data-parameters-width-height.html --> <b:includable id='main'> <b:comment>Example</b:comment> <b:if cond='data:widget.version == 1'> Le dictionnaire de données n'est pas compatible avec ce thème. Installez un thème Layouts Version 3 (Essential/Contempo/Emporio/Notable/Soho). <b:else/> <ul> <b:loop values='data:widgets.Blog.first.posts' var='post'> <li> IMG URL : <b:eval expr='data:post.featuredImage'/><br/> Width : <b:eval expr='data:post.featuredImage.width'/><br/> Height : <b:eval expr='data:post.featuredImage.height'/><br/> Original Width : <b:eval expr='data:post.featuredImage.originalWidth'/><br/> Original Height : <b:eval expr='data:post.featuredImage.originalHeight'/><br/> </li> </b:loop> </ul> </b:if> </b:includable>

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

<!-- data setting width/height/originalWidth/originalHeight - XML demo. Compatibility : Gadget Version 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2018/02/data-parameters-width-height.html --> <b:includable id='main'> <b:comment>Example</b:comment> <b:if cond='data:widget.version == 1'> Le dictionnaire de données n'est pas compatible avec ce thème. Installez un thème Layouts Version 3 (Essential/Contempo/Emporio/Notable/Soho). <b:else/> IMG URL : <b:eval expr='(data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage'/><br/> Width : <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).width'/><br/> Height : <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).height'/><br/> Original Width : <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).originalWidth'/><br/> Original Height : <b:eval expr='((data:widgets.Blog.first.posts first (p => p.featuredImage)).featuredImage).originalHeight'/><br/> </b:if> </b:includable>

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>

<!-- data setting width/height/originalWidth/originalHeight - XML demo. Compatibility : Gadget Version 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2018/02/data-parameters-width-height.html --> <b:includable id='main'> <b:comment>Example</b:comment> <b:if cond='data:widget.version == 1'> Le dictionnaire de données n'est pas compatible avec ce thème. Installez un thème Layouts Version 3 (Essential/Contempo/Emporio/Notable/Soho). <b:else/> <b:loop values='data:widgets.Blog.first.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'> L'image est en mode "paysage". <b:elseif cond='data:post.featuredImage.width lt data:post.featuredImage.height'/> L'image est en mode "portrait". <b:elseif cond='data:post.featuredImage.width eq data:post.featuredImage.height'/> L'image est carrée. </b:if> </b:if> </b:loop> </b:if> </b:includable>

Les autres réglages de données

• AdSense
Attribution
Blog
BlogArchive
BloggerButton
BlogList
BlogSearch
ContactForm
FeaturedPost
Feed
Followers
Header
HTML
Image
Label
LinkList
PageList
PopularPosts
Profile
ReportAbuse
Stats
Subscribe
Text
TextList
Translate
Wikipedia
• share
author
timestamp
comments
labels
location
icons
• red
green
blue
alpha
transparent
inverse
• any / notEmpty
empty
• canonical
• color
image
• name
language
country
variant
• escaped
cssEscaped
jsEscaped
jsonEscaped
• day
month
year
dayOfWeek
dayOfMonth
dayOfYear
• first
last
• width
height
originalWidth
originalHeight
• http
https
• iso8601
• isResizable
• languageAlignment
languageDirection
• size / length (array)
• size / length (string)
• size (array[image])
url (array[image])
• size (skin font)
family
• isYoutube
youtubeMaxResDefaultUrl

Retourner à l'introduction