Pouvoir présenter ses champs Flexicontent dans les pages de son site Joomla!

Je vais vous présenter aujourd'hui les Templates préinstallés dans Flexicontent. Les templates dans Flexicontent vont vous permettre de présenter vos champs dans vos contenus...

Vous le savez peut être déjà, mais lorsque vous travaillez avec Joomla, l'aspect de vos texte est déterminé par le template que vous utilisez sur votre site.

Même si cela ne change pas la donne, travailler avec Flexicontent va vous permettre d'organiser en plus la zone qui vous sert pour les affichages d'articles : je vous rappelle que Flexicontent vous permet d'étoffer votre contenu à l'aide de champ additionnels.

L'intérêt des templates de Flexicontent est de pouvoir avoir une présentation restant la même sur vos différentes pages pour vos contenus gérés par Flexicontent : il n'y a rien de pire que d'avoir le même type d'article présenté de 10 manières différentes, les gens allant perdre du temps à retrouver les informations qu'ils sont sensés trouvé à un endroit précis.

Même avec la meilleure volonté du monde, il y a toujours le risque d'avoir des différences dans la présentation de vos contenus : un saut de ligne mal placé, une image qui décale tout, un titre plus gros qu'un autre, etc...

Les templates de Flexicontent vous permettent donc de mettre en place une "grille" pour indiquer comment vos champs vont s'afficher dans vos pages.

Les templates livrés avec Flexicontent

Flexicontent est livré avec plusieurs templates encodés par l'équipe de développement du composant. Ces templates permettent de répondre à une grande majorité de cas, même si personnelllement je code souvent mes templates pour Flexicontent pour avoir au millimètres ce que je veux pour mes pages. Ceci sera l'objet d'un autre tutoriel : si vous souhaitez coder vos propres templates, il sera nécessaire d'avoir quelques notions (bien simples !) en PHP.

Les templates livrés avec Flexicontent sont au nombre de 5.

Vous pouvez les trouver dans Composants > Flexicontent > Templates :

 Vous remarquerez qu'il y a 3 colonnes :

• Le nom du template : va vous permettre de dupliquer un template de base ou de supprimer un template dupliqué ou ajouté (vous ne pouvez pas supprimer un template de base !)
• Contenu unique (Item Layout) : va vous permettre de paramétrer la vue quand un contenu est affiché sur une page (un article tout seul sur une page)
• Vue catégorie (Category Layout) : va vous permettre de paramétrer la vue quand vous affichez une liste de contenus (la liste des articles d'une catégorie)

Nous ne nous intéresserons pas dans ce tutoriel à la duplication pour créer un template personnalisé, mais nous allons quand même voir la duplication afin que vous ayez une bonne manière de travailler avec ces templates : en dupliquant un template, vous allez pouvoir faire différents essais et personnalisation sans changer le template de base, ce qui vous permettra alors de le re-dupliquer à volonté pour vos essais ou vos différentes vues !

 Pour cette exemple, je vais dupliquer le template blog.

Voyez à gauche du nom du template, vous avez un petit bouton avec un "+" qui va vous permettre de dupliquer ce template.

En cliquant sur ce bouton, vous aurez la possibilité de donner un nom (différent des autres évidemment) à votre template :

Vous donnez le nom et vous cliquez alors sur "Dupliquer".

Si tout se passe bien, Flexicontent affiche alors le message vous indiquant que vous pouvez alors "Fermer et rafraichir le panneau d'administration".

Faites-le et voyez maintenant la liste des templates :

Vous pouvez maintenant voir votre template. Il est strictement identique puisque dupliqué depuis le template "blog" au template original dupliqué.

C'est donc une bonne solution pour pouvoir faire vos tests et vous faire la main :)

Voyons voir ce qu'il y a maintenant dans un template...

Rappelez-vous que nous parlons des templates intégrés de base à Flexicontent : ils contiennent donc des paramètres qui sont propres à chaque type de template.

Notre template est le seul qui peut être "supprimé" : vous ne pouvez pas supprimer un template de base livré avec Flexicontent.

Si vous cliquez sur le bouton "supprimer", Flexicontent vous demandera confirmation :

Voyons maintenant ce qu'il y a dans le template même. Pour cela, vous avez 2 colonnes : une colonne pour les "items" (vue d'un "article") et une colonne pour les "catégories" (vue en liste des articles d'une catégorie).

Commençons par la partie "item" qui va nous servir pour chacun de nos articles / fiches.

Dans ce premier onglet "Information", vous allez avoir la possibilité d'avoir les informations générales du template : qui l'a écrit, le numéro de version, etc... ainsi qu'une petite miniature vous permettant d'avoir une (petite) idée de comment il va présenter les champs.

Le 2e onglet va vous donner une interface qui va vous permettre de glisser-déposer les champs dans le template :

Nous y reviendrons après, c'est la partie quasiment la plus importante dans les templates : il vous faut absolument indiquer où les informations doivent apparaitre.

Dans le 3e onglet, vous aurez accès aux paramètres d'affichage propre à ce template :

Ici, rien n'est très compliqué : il vous suffit de lire à chaque fois ce qui est proposé pour le comprendre.

N'oubliez pas que vous avez souvent de l'aide simplement en passant votre souris sur le champ de réglage.

Si vous descendez dans la page, vous allez alors voir la liste impressionnante de paramètres qui vous permet de régler exactement comme vous le souhaitez le fonctionnement du template :

Le 4e onglet va alors vous permettre, si vous en avez les compétences, d'éditer les fichiers php du template.

ATTENTION ! Il faut que vous ayez de bonnes connaissances en php pour aller modifier ces fichiers !

Ok, et les champs, où on les mets dans tout ça ??

Vous allez voir, les gars de chez Flexicontent ont réalisé un outil très bien conçu, cela va être facile :)

Revenons maintenant au 1er et 2e onglet pour régler nos champs dans notre fiche.

Dans le 1er onglet, nous avons vu il y a quelques instants que vous aviez une miniature. Cette miniature vous indique les positions du template pour votre fiche. Jetez un oeil à la miniature :

On vous indique ici que vous avez une zone "Description" (qui n'est pas modifiable par défaut sauf si vous allez modifier les fichiers php) et que vous avez 4 zones : 2 au dessus (fields_top et before-description) et 2 en dessous (after-description et fields_bottom).

Passez maintenant sur le 2e onglet.

Dans la partie gauche de l'écran, vous avez les champs existants. Dans la partie droite, les positions de template. Il vous suffit de "trainer" les champs et de les lacher où vous souhaitez les voir apparaitre.

ASTUCE : il faut "lacher votre champ" sur la partie en gris clair. Vous pouvez ensuite réordonner les champs entre eux quand vous les avez positionné dans les zones.

NOTE : la copie écran ci-dessus est celle d'un autre template (vous irez fouiller dans les templates pour voir !), les zones disponibles réellement dans le template "Blog" sont dans la copie juste après :)

Voilà ce que cela me donne après avoir trainé les champs :

Sauvegardez ensuite votre "disposition" pour avoir maintenant vos "fiches" présentées comme vous le souhaitez.

Super ! On a notre disposition... Oui, mais ça marche pas !

Avoir mis en place notre template est une étape indispensable. Par contre, de manière tout aussi indispensable, il faut indiquer à Flexicontent d'utiliser ce nouveau template !

Pour cela, retournez maintenant dans la partie "Type" de Flexicontent et ouvrez le type de contenu "Spectacle".

C'est à cet endroit que vous allez indiquer quel type de template utiliser pour les vues individuelles (les vues "articles" de type "spectacle" donc).

Dans le dernier onglet "Mise en page", vous avez le template utilisé. Par défaut ici, c'est "Blog" qui est utilisé.

Changeons pour prendre notre nouveau template.

Et voilà ! C'est maintenant notre template qui sera utilisé pour afficher les fiches "Spectacles".

Si vous avez également paramétré la vue pour les listes (la vue "catégorie") dans le template, c'est au niveau des "catégories" de vos contenus qu'il faudra indiquer quel template utiliser.

Ouvrez la liste de vos catégories. Chez moi, j'ai ceci (cela sera forcément différent chez vous suivant les catégories que vous avez créées) :

Regardez bien la colonne "template" : il est indiqué ici le nom du template de catégorie qui sera utilisé pour afficher la liste des articles de cette catégorie.

Je vais prendre la catégorie" Tuto" pour vous montrer. Si j'édite la catégorie, je vais avoir également un onglet "Mise en page" qui va me permettre de sélectionner le template de catégorie pour afficher les listes d'articles de cette catégorie :

Remarquez que le template sélectionné pour ma catégorie est réglé sur "paramètres globaux". C'est donc le réglage général (configuration générale de Flexicontent donc) qui s'applique pour ma catégorie.

Je peux si je le souhaite modifier cela :

Et voilà.

Eh ! Mais y'a encore des réglages ici ! Et c'est les mêmes que de l'autre côté dans les templates !!!

Oui ! Cela permet si vous avez par exemple un template qui est utilisé pour plusieurs catégories d'avoir un réglage général (donné dans le template) et un réglage propre à la catégorie dans la catégorie même.

C'est le principe des droits qui s'applique généralement et qui prend le pas au fur et à mesure : le dernier réglage s'applique toujours.

On pourrait donc dire : le réglage dans la catégorie prédomine le réglage fait partout ailleurs et le réglage fait dans un article (pour les vues d'articles) prédomine sur les réglages fait au niveau du type ou du template ou même de la configuration de Flexicontent.

Et voilà ! A vous de jouer maintenant !

Vous pouvez maintenant afficher vos champs dans vos pages.

Notez que tout est une histoire de "goût" : je trouve personnellement le template blog intéressant dans certains cas et pas dans d'autres. Il m'arrive même de mixer 2 templates pour les vues articles et les vues listes...

Ceci ne vous explique pas du tout comment "écrire vos propres templates" (ce qui vous permet alors de n'avoir aucune limite en terme de choix d'affichage) : si il y a une demande à ce niveau, je vous ferai alors un tutoriel rien que pour cela :)

A bientôt !