Variables d'habillage - Les arrière-plans [background]

Le terme background est employé pour qualifier une variable d'habillage.
Une variable de type background contient les paramètres d'un arrière-plan.

Syntaxe

Les variables d'habillage sont définies dans l'éditeur XML du modèle, entre les balises <b:skin></b:skin>. Elles permettent de reporter une valeur dans la section des CSS ou/et dans le reste du modèle XML.

<Variable name="name"
          description="description"
          type="background"
          color="value"
          default="value"
          value="value" />

Attributs

Paramètre	Signification	-
name	Le nom ne peut contenir que des lettres ou des chiffres et doit être unique. Exception : Le caractère . (point) peut être utilisé. Ce nom sera utilisé pour extraire la valeur de la variable.	obligatoire
description	Une courte description.	obligatoire
type	Détermine le type de la valeur de la variable.	obligatoire
color	La valeur attendue peut être un code de couleur (hexadécimal/rgb/rgba) ou le nom d'une variable contenant un code de couleur. Cette valeur pourra être intégrée dans la valeur des attributs default ou/et value sous la forme d'une variable $color.	facultatif
default	La valeur par défaut de la variable.	obligatoire
value	La valeur courante de la variable.	obligatoire

La valeur

La valeur attendue doit contenir les paramètres de l'arrière-plan.

Syntaxe de la valeur

color image repeat attachment position

Exemple

#539bcd url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center

Sortie des données

Lorsque la variable est définie, il est possible d'en extraire sa valeur dans la section réservée aux CSS ou/et à l'extérieur de la balise b:skin.

Dans la balise b:skin, il suffit de reprendre le nom de la variable, de l'encadrer de parenthèses et d'ajouter le préfixe $.

Par exemple, la variable dont le nom est post.background, sa syntaxe de sortie sera $(post.background).
A savoir : Les parenthèses ne sont requises que si le nom de la variable contient un point.

Définition de la variable

<Variable name="post.background"
          description="Post Background"
          type="background"
          color="#539bcd"
          default="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center"
          value="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center" />

Intégration de la variable dans les CSS

.post-body {
  background: $(post.background);
}

Rendu HTML

.post-body {
  background: #539bcd url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center;
}

Lorsque l'on souhaite exporter la valeur à l'extérieur de b:skin, le langage XML reprend ses droits et la donnée peut être traitée comme les autres données issues d'un dictionnaire quelconque.
La donnée convertie, devient de type string et peut être injectée dans des expressions.

post.background devient : data:skin.vars.post_background.

Balise de sortie data

<data:skin.vars.post_background/>

Pour extraire uniquement l'url de l'image d'arrière-plan, il faut ajouter le suffixe image à la donnée.

data:skin.vars.post_background devient : data:skin.vars.post_background.image.

Balise de sortie data

<data:skin.vars.post_background.image/>

Et pour vérifier si cette image est redimensionnable avec les opérateurs d'image, il faut ajouter un 2e suffixe à la donnée : isResizable.

data:skin.vars.post_background.image devient : data:skin.vars.post_background.image.isResizable.

Dans une condition

<b:if cond='data:skin.vars.post_background.image.isResizable'>

</b:if>

Compléments :

• Le paramètre image d'arrière-plan.
• Le paramètre Image redimensionnable.
• Les opérateurs d'images.
• Images d'arrière-plan réactives - L'inclusion responsiveImageStyle.
• Bibliothèque des variables "background" définies dans les modèles officiels.

Image d'arrière-plan principale

Le nom de la variable body.background permet de définir l'image principale d'arrière-plan du modèle.

<Variable name="body.background"
          description="Main Background"
          type="background"
          color="#539bcd"
          default="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center"
          value="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center" />

Le choix de l'image sera disponible dans l'outil de conception de modèles :

• Tableau de bord
• Modèle
• Personnalisé
• Arrière-plan

Forum - Participer à la conversation
Prochaine permanence : Lundi 23/10/2017 de 16 à 18h (GMT +1)

Dernière modification : jeudi, 22 septembre 2016