`responsiveImageStyle` : Images d'arrière-plan réactives - Blogger XML Documentation

Extrait de la documentation personnelle de Soraya Lambrechts

Gadget Version 1	Gadget Version 2	Balisage
Common	Common	Original

Description de l'inclusion: responsiveImageStyle est le nom d'une inclusion commune qui prend en charge les images d'arrière-plan et qui les rend réactives.
Une image réactive est une image qui s'adapte automatiquement à la taille de l'écran du navigateur.
Il s'agit 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 autre les images d'arrière-plan ou encore les images réactives.
Une toute nouvelle inclusion commune a été créée afin de générer un CSS qui adapte automatiquement la taille d'une image d'arrière-plan en fonction de la fenêtre d'affichage.
Directives d'usage et niveau de priorité de mise à jour: Thème Version 1

Garantie d'usage : Expérimental

Priorité indéfinie

Thème Version 2

Garantie d'usage : Oui

Priorité moyenne

Thème Dynamique

Garantie d'usage : Abandonné

Priorité indéfinie

Thème Version 3

Garantie d'usage : Oui

Priorité haute
Variante par thème: Inexistante.
Inclusion de gadget équivalente: Aucune.

Le code XML

<b:includable id='responsiveImageStyle'>
  <b:with value='resizeImage(data:image,(data:imageSizes ?: [200,400,800,1200]),data:imageRatio)' var='images'>
    <b:tag name='style'>
      <b:eval expr='data:selector + " {background-image:url(" + data:image.cssEscaped + ");}"'/>
      <b:loop index='i' values='data:images' var='image'>
        <b:if cond='data:image.size == data:images.last.size'>
          /* Last tag covers anything over one higher than the previous max-size cap. */
        </b:if>
        @media <b:if cond='data:image.size != data:images.last.size'><b:eval expr='"(max-width: " + data:image.size + "px)"'/></b:if><b:if cond='data:image.size not in {data:images.first.size,data:images.last.size}'> and </b:if><b:if cond='data:image.size != data:images.first.size'><b:eval expr='"(min-width: " + (data:images[data:i - 1].size + 1) + "px)"'/></b:if> <b:eval expr='"{ " + data:selector + " {background-image:url(" + data:image.url.cssEscaped + ");}}"'/>
      </b:loop>
    </b:tag>
  </b:with>
</b:includable>

Les nœuds parents

ID Inclusion	Balisage
`behindImageStyle`	Original
`heroPost`	Notable
`snippetedPostThumbnail`	Soho
`<head>`	Simple Picture Window Awesome Inc. Watermark Ethereal Travel Contempo Emporio Essential Soho
`<body>`	Emporio

Fonctionnement par défaut

Cette inclusion redimensionne une image prédéfinie aux tailles suivantes :

1600px	1200px	800px	400px	200px

Rendu HTML

<style>
    body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1N3a-kmJ4ABC9Vn7ix7pZVv7tOBByyNMJO2BIiT6-2HKT23Cb3zL6Ev1OeMzfiMVbOCeM);}
    
@media (max-width: 200px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1N3a-kmJ4ABC9Vn7ix7pZVv7tOBByyNMJO2BIiT6-2HKT23Cb3zL6Ev1OeMzfiMVbOCeM&options=w200);}}

@media (max-width: 400px) and (min-width: 201px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1N3a-kmJ4ABC9Vn7ix7pZVv7tOBByyNMJO2BIiT6-2HKT23Cb3zL6Ev1OeMzfiMVbOCeM&options=w400);}}

@media (max-width: 800px) and (min-width: 401px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1N3a-kmJ4ABC9Vn7ix7pZVv7tOBByyNMJO2BIiT6-2HKT23Cb3zL6Ev1OeMzfiMVbOCeM&options=w800);}}

@media (max-width: 1200px) and (min-width: 801px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1N3a-kmJ4ABC9Vn7ix7pZVv7tOBByyNMJO2BIiT6-2HKT23Cb3zL6Ev1OeMzfiMVbOCeM&options=w1200);}}

/* Last tag covers anything over one higher than the previous max-size cap. */
@media (min-width: 1201px) { body {background-image:url(\/\/themes.googleusercontent.com\/image?id=1N3a-kmJ4ABC9Vn7ix7pZVv7tOBByyNMJO2BIiT6-2HKT23Cb3zL6Ev1OeMzfiMVbOCeM&options=w1600);}}
</style>

L'inclusion est automatiquement fournie dans les thèmes officiels installés depuis l'année 2016.
Si vous utilisez les thèmes « Essential », « Contempo », « Soho », « Emporio », « Notable », « Simple », « Voyage » ou encore « Picture windows », etc, vous n'avez rien à entreprendre. Il vous suffit de vous rendre dans l'outil de conception de thèmes et de choisir une image d'arrière-plan.

UI
Thème
Personnaliser
Arrière-plan

Appel de l'inclusion et paramètres

<b:include name='responsiveImageStyle'/>

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='responsiveImageStyle'/>

L'objet doit contenir ces items :

Alias	Signification	-
`image`	L'url de l'image.	Obligatoire
`selector`	La cible où doit être affiché l'arrière-plan.	Obligatoire
`imageSizes`	Set de dimensions. Valeur par défaut : `[200,400,800,1200,1600]`	Facultatif
`maxSize`	~~Taille maximum du set.~~	Déprécié
`imageRatio`	Le ratio de l'image. Exemples : `"1:1"` `"4:3"` `"16:9"`	Facultatif

Exemple 1

<b:include cond='data:view.featuredImage'
           data='{ image: data:view.featuredImage, selector: "body", imageSizes: [240,480,960,1600]}'
           name='responsiveImageStyle'/>

Exemple 2

<b:include data='{ image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgziAYuMlGzitTb2J1Njpq12HdfJ_gYmXarucsC9B-2WrJbjZbduCpMK-uWzPmY-fi2kBG5jUBLJFni5VwRsgKAzCh9ntvV2pZHeCSqIkM7F5oGVPvgDM7ON7LIUV7E32MjPM5zZ2GAaL9A/s1600/BCodeBanYT.jpg", selector: ".Header" }'
           name='responsiveImageStyle'/>

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='responsiveImageStyle'>

      <!-- Add new code for "responsiveImageStyle" 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='responsiveImageStyle'/>

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

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	Éditeur XML	Cloud
Original	Inexistant	Original
Contempo	Inexistant	Original
Emporio	Inexistant	Original
Essential	Inexistant	Original
Notable	Inexistant	Original
Soho	Inexistant	Original
Afficher les variantes

Les inclusions Communes

Licence - La reproduction du contenu de ce blog n'est pas autorisée

Aucune disposition des Conditions d'Utilisation de ce blog ne pourra être interprétée comme conférant à l'Utilisateur une licence sur les Droits de Propriété Intellectuelle.

Le blog Blogger Code PE ne concède qu'une autorisation de visualisation de son contenu à titre personnel et privé. Les copies ou reproductions doivent être strictement réservées à l'usage privé du copiste.

Toute reproduction abusive, totale ou partielle du blog Blogger Code PE, représentation, modification, publication, traduction, adaptation totale ou partielle de l'un quelconque de ces éléments, accompagnée ou non d'un lien de référence, quel que soit le moyen ou le procédé utilisé, est interdite et sera considérée comme constitutive d’une contrefaçon et passible de poursuite (Les peines prévues à cet effet sont une condamnation de 3 ans d'emprisonnement et une amende de 300.000€) conformément aux dispositions des articles L.335-2 et suivants du Code de Propriété Intellectuelle.

Nous nous réservons le droit d'afficher dans ce cadre les notifications d'infraction à la loi DMCA en relation avec le contenu de ce document et déposées par les représentants agréés du blog Blogger Code PE.

Soraya Lambrechts

Affiliée au Google Product Experts Program - Ambassador & Troubleshooter.

Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
Affectation Google US, produit Blogger depuis le 28/07/2014.

Spécialisation : Technologie des thèmes Blogger.

Auteur originel de la théorie du langage XML Blogger : Règles syntaxiques, directives d'usage, classifications, compilations et corrélations des composants.
Cela représente près de 10 années de travail. Je remercie tous ceux qui ont respecté ma propriété intellectuelle et j'offre mes meilleurs sentiments aux nombreux contributeurs (Amis, Utilisateurs, Experts Produits Google, Blogger Team et Ingénieurs).

`responsiveImageStyle` : Images d'arrière-plan réactives - Blogger XML Documentation

Contenu de l'inclusion

Le code XML

Les nœuds parents

Fonctionnement par défaut

Appel de l'inclusion et paramètres

Modifier l'inclusion

Disponibilité des variantes de l'inclusion

Les inclusions Communes

Licence - La reproduction du contenu de ce blog n'est pas autorisée

Spotlight

Foire aux questions Blogger (Janvier 2022)

Populaires cette semaine

Introduction : Les balises Blogger / Blogger Tags

Twitter : Bouton mentionner / Mention button

Flux - Protocole des données Blogger

Facebook : Bouton J'aime / Like button

Les balises conditionnelles / Conditional tags : `<b:if>`, `<b:elseif>`, `<b:else>`

responsiveImageStyle : Images d'arrière-plan réactives - Blogger XML Documentation

Contenu de l'inclusion

Le code XML

Les nœuds parents

Fonctionnement par défaut

Appel de l'inclusion et paramètres

Modifier l'inclusion

Disponibilité des variantes de l'inclusion

Les inclusions Communes

Licence - La reproduction du contenu de ce blog n'est pas autorisée

Spotlight

Foire aux questions Blogger (Janvier 2022)

Populaires cette semaine

Introduction : Les balises Blogger / Blogger Tags

Twitter : Bouton mentionner / Mention button

Flux - Protocole des données Blogger

Facebook : Bouton J'aime / Like button

Les balises conditionnelles / Conditional tags : <b:if>, <b:elseif>, <b:else>

`responsiveImageStyle` : Images d'arrière-plan réactives - Blogger XML Documentation

Les balises conditionnelles / Conditional tags : `<b:if>`, `<b:elseif>`, `<b:else>`