responsiveImage : Images réactives - Blogger XML Documentation

Blogger - responsiveImage [Common]
Gadget Version 1 Gadget Version 2 Balisage
Common Common
Original
Description de l'inclusion
responsiveImage est le nom d'une inclusion commune qui génère des images réactives.
Une image réactive est une image qui s'adapte automatiquement à la taille du container.
Il s'agit également d'une solution qui permet de limiter le chargement de ressources inutiles en fonction du matériel du visiteur.
En 2016, l’ingénierie Blogger a travaillé sur plusieurs concepts allant dans ce sens. Entre autres, les images réactives, ou encore, les arrière plans réactifs.
Directives d'usage et niveau de priorité de mise à jour
Thème Version 1
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 2
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Dynamique
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 3
Garantie d'usage : Oui
Priorité haute
Variante par thème
Des variantes existent.
Inclusion de gadget équivalente
Aucune.


Contenu de l'inclusion

Le code XML

<b:includable id='responsiveImage'>
  <img expr:src='data:image'>

    <b:class expr:name='data:imageClass'/>

    <b:attr expr:value='data:altText ?: data:messages.image' name='alt'/>

    <b:attr cond='data:enhancedSourceset.isYoutube' expr:value='resizeImage(data:enhancedSourceset, 1152, "1152:864")' name='data-ess'/>

    <b:attr expr:value='data:originalWidth' name='data-original-width'/>

    <b:attr expr:value='data:originalHeight' name='data-original-height'/>

    <b:attr expr:value='data:image.isResizable ? data:sourceSizes : ""' name='sizes'/>

    <b:attr expr:value='sourceSet(data:image, (data:imageSizes ?: [120,240,480,640,800]), data:imageRatio)' name='srcset'/>

  </img>
</b:includable>

Les nœuds parents

ID Inclusion Balisage
image
Original
snippetedPostThumbnail
Original
snippetedPostThumbnail
Contempo
Emporio
Essential
post
Soho
normalPost
Notable
snippetedPostContent
Soho
responsiveImage
Soho
postBodySnippet
Contempo
Essential


Appel de l'inclusion et paramètres

<b:include name='responsiveImage'/>

Présenté tel quel, l'appel ne travaillera pas, puisque le contenu requiert un objet de données qui doit être ajouté dans un attribut data.

<b:include data='{ ITEMS }' name='responsiveImage'/>

L'objet doit contenir ces items:

Alias Signification -
image L'url de l'image. Obligatoire
imageSizes Set de dimensions.
Valeur par défaut : [120,240,480,640,800]
Facultatif
imageRatio Le ratio de l'image. Facultatif
sourceSizes La taille de l'image.
Permet d'ajouter la valeur dans l'attribut sizes.
Ce paramètre sera ajouté à la balise si l'image est redimensionnable.
Facultatif
imageClass La valeur de l'attribut class. Facultatif
altText La valeur de l'attribut alt.
Valeur par défaut : Image
Facultatif
enhancedSourceset L'url de l'image de la vidéo YouTube.
Permet d'ajouter l'attribut data-ess dont la valeur sera l'url de l'image redimensionnée.
Dimensions : 1152
Ratio : "1152:864"
Facultatif
originalWidth La largeur originale de l'image.
Permet d'ajouter la valeur dans l'attribut data-original-width
Facultatif
originalHeight La hauteur originale de l'image.
Permet d'ajouter la valeur dans l'attribut data-original-height
Facultatif

Exemple
<b:include cond='data:view.featuredImage'
           data='{ image: data:view.featuredImage, imageSizes: [240,480,960,1600], imageRatio: "16:9" }'
           name='responsiveImage'/>


Modifier l'inclusion

L'inclusion peut être modifiée dans un marquage commun.
En savoir plus
<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='responsiveImage'>

      <!-- Add new code for "responsiveImage" inclusion here -->

    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

Lorsque l'inclusion est marquée explicitement dans le thème, la version "serveur" n'est plus prioritaire.
Dans ce cas-ci, pour appeler l'inclusion "serveur", vous devez mentionner le préfixe super à l'identifiant de l'inclusion.
En savoir plus
  <!-- Call custom version -->
  <b:include name='responsiveImage'/>

  <!-- Call server version -->
  <b:include name='super.responsiveImage'/>


Disponibilité des variantes de l'inclusion

Thèmes Éditeur XML Cloud
Original Inexistant Original
Contempo Inexistant Original
Emporio Inexistant Original
Essential Inexistant Original
Notable Inexistant Original
Soho Theme Original+
Afficher les variantes
Légende :
  • Original : Balisage original
  • Original+ : Balisage original (super)
  • Theme : Balisage spécifique au thème
  • Inexistant : Balisage inexistant


Spotlight

Populaires cette semaine