responsiveImage [Common]

StatutGadget TypeGadget VersionLayouts VersionTheme NameUpdate Version
Invisible
Common
2
3
Par défaut
Révision 1.3.0
Blogger - responsiveImage [Common]
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.


Contenu de l'inclusion

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


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

Emplacement du code Gadget Type Maquette originale Contempo Emporio Notable Soho
Éditeur XML
Common
inexistant inexistant inexistant inexistant Marquage
Serveur Blogger Par défaut Par défaut Par défaut Par défaut Par défaut


Les nœuds parents

Gadget Type Inclusion Gadget Version Layouts Version Thème
Header
image 2 3
Par défaut
FeaturedPost
PopularPosts
snippetedPostThumbnail 2 3
Par défaut
Blog
FeaturedPost
PopularPosts
snippetedPostThumbnail 2 3
Contempo
Emporio
Blog
post 2 3
Soho
Common
normalPost 2 3
Notable
PopularPosts
snippetedPostContent 2 3
Soho
Common
responsiveImage 2 3
Soho
Blog
postBodySnippet 2 3
Contempo


Les variantes de l'inclusion

Gadget Type Inclusion Gadget Version Layouts Version Thème
Common
responsiveImage 2 3
Soho


Inclusions similaires

Gadget Type Inclusion Gadget Version Layouts Version Thème
Common
responsiveImageStyle 1 2 1 2 3
Par défaut


Retourner dans la vue d'ensemble des inclusions Communes

Populaires cette semaine

Les gadgets officiels retirés