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

Blogger - responsiveImageStyle [Common]
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.


Contenu de l'inclusion

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
Taille 1600px Taille 1200px Taille 800px Taille 400px Taille 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://lh5.googleusercontent.com/-usDU2zLhtDA/UjwV61KL07I/AAAAAAAAA-0/GT3UL09LA_c/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

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
Légende :
  • Original : Balisage original
  • Original+ : Balisage original (super)
  • Theme : Balisage spécifique au thème
  • Inexistant : Balisage inexistant


Spotlight

Populaires cette semaine