responsiveImage
: Images réactives - Blogger XML Documentation
- 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 1Garantie d'usage : AbandonnéPriorité indéfinieThème Version 2Garantie d'usage : AbandonnéPriorité indéfinieThème DynamiqueGarantie d'usage : AbandonnéPriorité indéfinieThème Version 3Garantie d'usage : OuiPriorité 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 |
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