responsiveImage : Images réactives - Blogger XML Documentation

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

• Code XML
• Nœuds parents

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

Légende :

• Original : Balisage original
• Original+ : Balisage original (super)
• Theme : Balisage spécifique au thème
• Inexistant : Balisage inexistant

Thèmes	FrontEnd	BackEnd
Original	Inexistant	Original
Contempo	Inexistant	Original
Emporio	Inexistant	Original
Essential	Inexistant	Original
Notable	Inexistant	Original
Soho	Theme	Original+
Afficher les variantes

Les inclusions Communes

• backArrowIcon
• chevronDownIcon
• chevronUpIcon
• closeIcon
• commentIcon
• defaultAvatarIcon
• emailIcon
• extendableItems
• facebookIcon
• flatBloggerIcon
• footerBylinesOverride
• forwardArrowIcon
• headerBylineOverride
• linkIcon
• maybeAddShareButtons
• menuIcon
• noContentPlaceholder
• openGraphMetaData
• pinterestIcon
• postMetadataJSON
• postSnippet
• reportAbuse
• responsiveImage
• responsiveImageStyle
• searchIcon
• shareIcon
• sharingOtherIcon
• skipNavigation
• svgIcon
• svgIconButton
• twitterIcon
• verticalMoreIcon
• widget-title
• widgetNotAvailableInPreview

Retourner dans la vue d'ensemble des inclusions communes