Documentation développeur

Une fois que l’on connait les différents types de champs astroid, il faut savoir quoi en faire, quand et où les utiliser:

C’est l’objectif de cette section.

Nous allons chercher à ajouter une fonction pour avoir un fond dégradé en css dans le template Astroid, cette fonctionnalité n’existant pas nativement.

Pour parfaire le tout, nous choisirons entre dégradé radial ou linéaire

Préparer le contenu :

Nous allons definir le code à modifier en css

pour le linéaire :

body {
 background: rgb(9,9,121);
 background: -moz-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
 background: -webkit-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
 background: -o-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%); 
 background: linear-gradient(270deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%); 
 }

et pour le radial

body { 
  background: rgb(9,9,121);
  background: -moz-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
  background: -o-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
  background: radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
 }

Nous devrons créer :

• un bouton interrupteur dégradé

• un bouton radio choix radial / linear

• un sélecteur de couleur de début

• un sélecteur de couleur de fin

• les textes pour l’intégration dans Joomla (.ini)

Textes des boutons / options / descriptions

Ajoutons les chaînes de langues en anglais dans /language/en-GB/en-GB.astroid.ini

TPL_ASTROID_GRADIENT="Gradient Background"
 TPL_ASTROID_GRADIENT_DESC="enable to have a gradient background instead of color"
 TPL_ASTROID_GRADIENT_CHOICE="Type of gradient"
 TPL_ASTROID_GRADIENT_CHOICE_DESC="Choose between linear or radial Background"
 TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR="Linear"
 TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL="Radial"
 TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN="Start color"
 TPL_ASTROID_BACKGROUND_COLOR_LABEL_END="End color"

puis en français dans /language/fr-FR/fr-FR.astroid.ini

TPL_ASTROID_GRADIENT="Fond dégradé"
 TPL_ASTROID_GRADIENT_DESC="activer pour avoir un fond de page dégradé"
 TPL_ASTROID_GRADIENT_CHOICE="Type de dégradé"
 TPL_ASTROID_GRADIENT_CHOICE_DESC="Choisissez entre dégradé linéaire et dégradé radial"
 TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR="Linéaire"
 TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL="Radial"
 TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN="Couleur de début"
 TPL_ASTROID_BACKGROUND_COLOR_LABEL_END="Couleur de fin"
 

Création des champs dans le fichier xml du template

Dans le fichier /templates/astroid_template_zero/astroid/options/colors.xml qui gère les options des champs dans le gestionnaire de template, ajoutons ces lignes :

<field astroidgroup="body" name="body_gradient" type="astroidtext" astroid-switch="true" default="0" label="TPL_ASTROID_GRADIENT" description="TPL_ASTROID_GRADIENT_DESC"></field>			
<field ngShow="body_gradient" astroidgroup="body" type="astroidradio" name="TPL_ASTROID_GRADIENT_CHOICE" default="linear" title="TPL_ASTROID_GRADIENT_CHOICE" description="TPL_ASTROID_GRADIENT_CHOICE_DESC">
 	<option value="linear">TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR</option>
 	<option value="radial">TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL</option>
 </field>	
 <field ngShow="body_gradient" astroidgroup="body" name="body_background_color_begin" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN">
 </field>
 <field ngShow="body_gradient" astroidgroup="body" name="body_background_color_end" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_END">
 </field>	

nous allons détailler :

<field astroidgroup="body" name="body_gradient" type="astroidtext" astroid-switch="true" default="0" label="TPL_ASTROID_GRADIENT" description="TPL_ASTROID_GRADIENT_DESC"></field>
 

insertion du champ interrupteur qui active le dégradé ( ou pas ), le champ est un switch, mis par défaut sur 0 (désactivé) et il appartient au groupe body ainsi il apparaitra avec les autres options de couleurs du body.

<field ngShow="body_gradient" astroidgroup="body" type="astroidradio" name="TPL_ASTROID_GRADIENT_CHOICE" default="linear" title="TPL_ASTROID_GRADIENT_CHOICE" description="TPL_ASTROID_GRADIENT_CHOICE_DESC">
 <option value="linear">TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR</option>
 <option value="radial">TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL</option>
 </field>

C’est un champ de type astroiradio (radio) du groupe body, il apparaîtra dans la zone body des options de couleur, et l’attribut field ngShow="body_gradient" conditionne son apparition au fait que le bouton body_gradient soit activé.

	<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_begin" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN">
 			</field>
 			<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_end" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_END">
 			</field>
 

C’est un champ de type astroidcolor (sélecteur de couleur) du groupe body, ils apparaîtront dans la zone body des options de couleur, et l’attribut field ngShow="body_gradient" conditionne leur apparition au fait que le bouton body_gradient soit activé.

Appel et intégration dans les css

Nous avons maintenant des paramètres de template qui sont générés par le framework.
Il nous faut les récupérer, les transformer en variables, et nous en servir correctement dans les css.

Dans /templates/astroid_template_zero/frontend/colors.php ajoutons :
 
 //gradient
 $body_body_gradient = $template->params->get('body_gradient', '');
 $body_body_gradient_choice = $template->params->get('TPL_ASTROID_GRADIENT_CHOICE', '');
 $body_background_gradient_begin = $template->params->get('body_background_color_begin', '');
 $body_background_gradient_end = $template->params->get('body_background_color_end', '');

le fichier récupère les paramètres et les transforme en variable utilisables.

Plus bas, dans la section // body coloring ajoutons nos css :

<?php
 // Body Coloring
 $body_styles = [];
 if (!empty($body_background_color)) {
    $body_styles[] = 'body{background-color: ' . $body_background_color . ';}';
 }
 if (!empty($body_text_color)) {
    $body_styles[] = 'body{color: ' . $body_text_color . ';}';
 }
 if (!empty($body_link_color)) {
    $body_styles[] = 'body a{color: ' . $body_link_color . ';}';
 }
 if (!empty($body_link_hover_color)) {
    $body_styles[] = 'body a:hover{color: ' . $body_link_hover_color . ';}';
 }
 //gradient added
 if ($body_body_gradient == '1' & $body_body_gradient_choice == 'linear') {
     $body_styles[] = 'body{background-color: ' . $body_background_gradient_begin . ';
 background: -moz-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
 background: -webkit-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
 background: -o-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); 
 background: linear-gradient(180deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); ';
 }
 if ($body_body_gradient == '1' & $body_body_gradient_choice == 'radial') {
     $body_styles[] = 'body{background-color: ' . $body_background_gradient_begin . ';
 background: -moz-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
 background: -webkit-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
 background: -o-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); 
 background: radial-gradient(circle, ' . $body_background_gradient_begin .