Fiches techniquesInclusions [Version serveur]

Images d'arrière-plan réactives [responsiveImageStyle]

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.

Une toute nouvelle inclusion XML a été créée afin de générer un CSS qui adapte automatiquement la taille de l'image en fonction de la fenêtre d'affichage.
Cette inclusion redimensionne l'image sélectionnée aux tailles suivantes :

1600px 1200px 800px 640px 480px

Lorsque le blog contient une image d'arrière-plan, l'inclusion générera ce genre de CSS dans le code source de votre blog:

<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>


Dans les modèles officiels

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

  • Tableau de bord
  • Modèle
  • Personnaliser
  • Arrière-plan


Par contre, si vous utilisez un modèle officiel qui a été installé avant 2016, vous devrez probablement ajouter quelques petites lignes de codes dans l'éditeur XML de votre modèle.

  • Tableau de bord
  • Modèle
  • Modifier le code HTML

Recherchez la balise </head> et ajoutez avant cette balise le code ci-dessous :


<b:if cond='data:skin.vars.body_background.image'>
  <b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: "body"}' name='responsiveImageStyle' />
</b:if>


Dans les modèles tiers

Avec ce type de modèles, rien n'est moins sûr que cela puisse travailler, puisque la construction de ces modèles sont très variés, mais vous pouvez essayer cette méthode:
Vous devez d'abord équiper votre blog du code de l'inclusion que vous placez avant la balise </head>
Vérifiez également le nom du sélecteur. Il doit correspondre à la cible où s'applique votre arrière-plan.

<b:if cond='data:skin.vars.body_background.image'>
  <b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: "body"}' name='responsiveImageStyle' />
</b:if>


Ensuite, un peu plus bas dans le code XML de votre modèle, vous ouvrez les balises <b:skin></b:skin> et vous insérez une nouvelle variable dans la liste des définitions des variables.

<Variable name="body.background" description="Body Background" type="background"
    color="#ffffff" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>

Et enfin, pour terminer, vous vous rendez dans l'outil de conception de modèles et vous sélectionnez un nouvel arrière-plan.


Bonus gratuit - Modifier le set de tailles

Les tailles ne conviennent pas à votre modèle ?
Dans le code de l'inclusion ajoutez le paramètre imageSizes et modifier les valeurs numériques selon vos besoins.


<b:if cond='data:skin.vars.body_background.image'>
  <b:include cond='not data:view.isPreview' data='{ image: data:skin.vars.body_background.image, selector: "body", imageSizes: [200,400,800,1600,3200] }' name='responsiveImageStyle' />
</b:if>


Mode expert - Reconstruire le code XML de l'inclusion

Rien ne vous oblige à utiliser l'inclusion serveur fournie par Blogger.
Vous pouvez reconstruire le code de l'inclusion dans votre modèle.
Pour vous aider, vous pouvez vous inspirer de ce petit code démo :


Reconstitution XML


Vous voulez en savoir plus ? Rendez-vous sur le blog de notre ingénieur préféré :
Dernière modification :

Posts les plus consultés de ce blog

ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire