responsiveImageStyle [server version]

DescriptionStatutGadget TypeDefault Gadget VersionLayouts VersionUpdate Version
Code xml de l'inclusion "responsiveImageStyle" (Images d'arrière-plan réactives)
Invisible
Common
1
2
1
2
3
Révision 1.3.0
Images d'arrière-plan réactives [responsiveImageStyle]
responsiveImageStyle est le nom d'une inclusion 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.


Présentation

Une image réactive est 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 universelle 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.


Contenu de l'inclusion

<b:includable id='responsiveImageStyle'>
  <b:with value='data:imageSizes ?: [480,640,800,1200,1600]' var='imageSizes'>
    <style>
      <data:selector/> {background-image:url(<data:image.cssEscaped/>);}

      <b:if cond='data:image.isResizable'>
        <b:loop index='i' values='data:imageSizes' var='maxWidth'>
          <b:with value='data:i - 1' var='minWidth'>
            <b:if cond='data:i lt data:imageSizes.size - 1'>
@media (max-width: <data:maxWidth/>px) <b:if cond='data:i gt 0'>and (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) </b:if>{ <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            <b:else/>
/* Last tag covers anything over one higher than the previous max-size cap. */
@media (min-width: <b:eval expr='data:imageSizes[minWidth] + 1'/>px) { <data:selector/> {background-image:url(<b:eval expr='(resizeImage(data:image,data:maxWidth)).cssEscaped'/>);}}
            </b:if>
          </b:with>
        </b:loop>
      </b:if>
    </style>
  </b:with>
</b:includable>


Fonctionnement par défaut

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

1600px 1200px 800px 640px 480px

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

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

@media (max-width: 800px) and (min-width: 641px) { 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 "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.

  • Tableau de bord
  • 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 : [480,640,800,1200,1600]
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'/>


Inclusions parentes

Bien qu'initialement prévue pour être utilisée dans l'entête du document XML, responsiveImageStyle est également appelée depuis des inclusions situées dans le body.

Gadget Type Inclusion Gadget Version Thème
Header behindImageStyle 2
Common heroPost 2 Notable
FeaturedPost snippetedPostThumbnail 2 Soho

Posts les plus consultés de ce blog

Facebook : Bouton J'aime [Like button]