FLEXIcontent dispose d'un système de template très souple qui permet de concevoir des templates personnalisés en toute simplicité. Pour concevoir ses propres templates il est cependant nécessaire de connaître un minimum le XHTML et le CSS. Des connaissances sommaires en PHP (conditions et boucles) vous permettrons de donner une dimension supplémentaire à vos création, mais une simple observation du code des templates existants devrait vous donner les éléments suffisants pour débuter.

1.- La structure des templates :

a - Template d'items : contenu unique

On les trouve dans le répertoire items et la structure est la suivante:

components
|_ com_flexicontent
   |_ views
      |_ items
         |_ tmpl
            |_ montemplate.php
            |_ montemplate.png   (facultatif – image de description)
            |_ montemplate.xml

Pour créer un nouveau template il suffit de dupliquer ces deux (ou trois) fichiers et de les renommer. Evitez les underscores (réservés aux sous-templates) et les espaces dans les noms !!!

b - Template de category : tous les contenus d'une catégorie

On les trouve dans le répertoire category et la structure est la suivante:

components
|_ com_flexicontent
   |_ views
      |_ category
         |_ tmpl
            |_ blog_alpha.php           (facultatif - index alphabétique)
            |_ blog_category.php        (facultatif - présentation de la catégorie)
            |_ blog_items.php           (facultatif - liste des contenus)                
            |_ blog_subcategories.php   (facultatif - liste des sous catégories)                
            |_ blog.php
            |_ blog.png                 (facultatif – image de description)
            |_ blog.xml

Pour créer un nouveau template il suffit de dupliquer les deux fichiers obligatoires (php et xml) et de les renommer.

Vous pouvez noter ici l'utilisation des sous templates. Ils sont facultatifs mais cela permet de mieux organiser ses informations.

2.- Les templates génériques : utilisation des groupes/positions de champs

Dans ce type de templates, on détermine des positions (comme pour les templates Joomla). On affecte ensuite les champs à une ou plusieurs positions. C'est le cas par exemple du template « default » de la vue « items »

Voici la partie à ajouter au fichier montemplate.xml pour définir un groupe.

<?xml version="1.0" encoding="utf-8"?>
<metadata>
<!-- … ici recopiez le code que vous trouvez dans default.xml … -->
  <fieldgroups>
    <group>mon_groupe</group>
<!--    … etc … -->
  </fieldgroups>  
</metadata>

Voici un exemple de code de montemplate.php pour l'affichage d'un groupe.

 <?php
defined( '_JEXEC' ) or die( 'Restricted access' );
 
//  on défini d'abord le nom du template pour pouvoir y faire appel plus simplement par la suite
//  le nom est composé du nom de la vue (ici items) et du nom du template (ici montemplate)
 
$tmpl = '.items.montemplate';
 
//   nous allons créer ici un groupe que nous appelons mon_groupe avec le marquage suivant :
//    <div class="ma_classe_pour_mon_groupe">
//      <span class="element nom_du_champ">
//         <span class="etiquette nom_du_champ">L'étiquette du champ</span>
//        <span class="champ nom_du_champ">La valeur du champ</span>
//      </span>
//      ...
//      on répète le bloc élément autant de fois qu'il y a de champs
//      dans la position "mon_groupe
//      ...
//    </div>
 
if ($this->fields) : // étape A : on vérifie tout d'adord qu'il y a des champs :-)
  $i = 0;
 
//  on vérifie ensuite qu'il y a des champs affectés au groupe "mon_groupe"  
 
  foreach ($this->fields as $field) :
    if (in_array('mon_groupe'.$tmpl, $field->positions)) :
      $i++;
    endif;
  endforeach;
  if ($i > 0) : // étape B : si on a bien des champs
 
//  on commence le marquage html du conteneur
?>
  <div class="ma_classe_pour_mon_groupe">
      <?php
      foreach ($this->fields as $field) : // étape 1 : pour chaque champ
        if (in_array('mon_groupe'.$tmpl, $field->positions)) : // étape 2 : si le champ est assigné à "mon_groupe"
          if (!empty($field->value)) : // étape 3 : si le champ a une valeur
 
//  on commence le marquage html du champ
      ?>
      <span class="element nom_du_champ">
      <?php
            if ($field->parameters->get('display_label')) : // étape 4 : si on a choisi d'afficher l'étiquette
 
//  on affiche l'étiquette
      ?>
          <span class="etiquette "><?php echo $field->label; ?></span>
      <?php 
            endif; // fin de l'étape 4
 
//  on affiche le champ lui-même
      ?>
          <span class="champ <?php echo $field->name; ?>"><?php echo $field->display; ?></span>
        </span>
      <?php
          endif; // fin de l'étape 3
        endif; // fin de l'étape 2
      endforeach; // fin de l'étape 1
      ?>
  </div>
<?php
  endif; // fin de l'étape B
endif; // fin de l'étape A
?>

3.- Les templates "à la demande" : appel des champs individuellement

Ces templates sont très simple à réaliser à condition de connaitre le HTML et le CSS. On peut appeler n'importe quel champ individuellement en utilisant le code suivant :

<?php echo $this->fields->nom_du_champ->display; ?>

Voici un exemple de code pour un template de type item montemplate.php

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<div class=flexicontent>
  <h2>
    <?php echo $this->item->title; ?>
  </h2>
  <div class=content>
    <?php echo $this->fields->description->display; ?>
  </div>
  <div class=mon_champ>
    <?php echo $this->fields->mon_champ->display; ?>  
  </div>
</div>

C'est ce qu'on appelle un exemple minimaliste, mais ça suffit pour expliquer la logique ;-)

4.- Template overriding et CSS overriding

Etant donné que FLEXIcontent utilise le pattern MVC tous les templates de vues sont overridable (c'est à dire remplaçables). Vous trouverez la procédure en effectuant une recherche sur les forums.

Avec FLEXIcontent le fichier CSS est lui aussi overridable. Pour étendre (ou remplacer) les propriétés CSS existantes il suffit de créer un fichier nommé flexicontent.css dans le répertoire css de votre template. Ses propriétés ont priorité sur le fichier CSS d'origine du composant!!!