Création des gabarits de contenus24/10/2013

CMS RUBEDOhttp://www.rubedo-project.org

CMS Rubedo : Création des gabarits de contenus

� A partir de la version 1.4 du CMS Rubedo, vous pouvez créer des gabarits personnalisés pour les contenus.

� Ces gabarits permettent de modifier la mise en page de vos contenus détail.

� Les gabarits détail correspondent à l’affichage en front-office des sites.

– Pour chacun de vos types de contenus, vous pouvez créer votre mise en page personnalisée en sélectionnant les éléments (titre, résumé, date, image, ...) que vous souhaitez afficher. Pour aller encore plus loin, choisissez l'affichage de chaque élément pour les différents supports (ordinateur, tablette et smartphone).

http://www.rubedo-project.org

Exemples d’affichage en front-office

http://www.rubedo-project.org

Dans l’exemple ci-dessous, le même article est présenté de 2 façons différentes

Etape 1 : connexion au back-office

1. Ouvrir le menu

2. Fonctions Studio

3. Types de contenus

1 - Menu

2 - Studio

3 – Types de contenus

Etape 2 : Sélection du type de contenu

� Lorsque le type de contenu est sélectionné, le menu d’édition s’affiche

http://www.rubedo-project.org

Sélection du type de contenu

Etape 2 : Sélection du type de contenu

� Chaque contenu dispose de champs (Titre, résumé, texte, image, ….

http://www.rubedo-project.org

Dans cet exemple, le type de contenu Wiki dispose des champs suivants :• Titre• Résumé• Texte de l’article• Image• Position

géographique

Etape 2 : Sélection du type de contenu

� Sur la partie visible aux internautes (front-office), nous retrouvons les champs du type de contenu wiki.

http://www.rubedo-project.org

Le titre de l’article

Sa situation géographique

L’image

Le texte

Etape 2 : Sélection du type de contenu

� A la création d’un nouveau type de contenu, le gabarit détail par défaut affiche les différents champs les uns en dessous des autres.

� Notre nouveau type de contenu Wiki ne dispose donc pas de mise en page spécifique.

Etape 2 : Sélection du type de contenu

� Dans l’application Type de contenus, une fois le type Wiki sélectionné, cliquer sur l’onglet « Mise en Page »

L’onglet mises en page permet de créer un gabarit d’affichage personnalisé

Etape 3 : création du gabarit

1. Cliquer sur « Ajouter »

2. Donner un nom à la nouvelle mise en page

http://www.rubedo-project.org

1 – Ajouter une mise en page

2 – Donner un nom et cliquer sur Créer

Etape 3 : création du gabarit

� Après avoir donné un nom à la mise en page, les champs du type de contenu s’affichent sous forme de liste.

http://www.rubedo-project.org

Nom de la mise en page

Liste des champs du type de contenu

Etape 3 : création du gabarit

� La création des gabarits repose sur les mêmes principes que la création des pages et des masques de page.

1. Ajouter des lignes pour définir les zones de votre mise en page

2. Ajouter des colonnes dans les lignes

3. Ajouter les champs dans les colonnes.

� Les propriétés des lignes et des colonnes permettent de définir les supports (téléphone, tablette, ordinateur) sur lesquelles les éléments seront affichés.

� La dimension des colonnes et des lignes sont exprimées en pourcentage pour le responsive design. SPAN est basé sur 12. Offset permet de réaliser un « décalage » visuel de l’élément.

http://www.rubedo-project.org

Etape 3 : création du gabarit

� Sélectionner le cadre

http://www.rubedo-project.org

Cadre

Etape 3 : création du gabarit

� Ajouter de nouvelles lignes puis des colonnes à l’intérieur des lignes

http://www.rubedo-project.org

Colonne

Paramétrer la taille et

disposition

Etape 3 : création du gabarit

� Lorsque la mise en forme générale est finalisée, Assigner un champs dans chaque colonne.

� Une liste déroulante permet de sélectionner les champs disponible dans le type de contenu.

http://www.rubedo-project.org

Etape 3 : création du gabarit

� La mise en page doit ensuite être activée. Puis enregistrer.

http://www.rubedo-project.org

Activer la mise en page Enregistrer

les modifications

Etape 4 : Visualiser la mise en page des contenus sur le site

� La mise en page doit ensuite être activée. Puis enregistrer.

http://www.rubedo-project.org

Titre

Résumé

Adresse

Contenu

Image

Création de mises en pages des contenus

� Pour résumé :

– Une mise en page personnalisée peut être crée pour chaque type de contenu d’un site.

– Dans les sites multilingues, la mise en page s’applique pour toutes les langues.

– Pour chaque ligne et colonnes d’une mise en page, il est également possible d’ajouter un Style et une classe HTML

– Les mises en pages activées sont prises en compte en temps réel sur les sites

� D’autres tutoriels sont disponibles sur le site www.rubedo-project.org

http://www.rubedo-project.org

http://www.rubedo-project.org

Documentation et tutoriel :http://www.rubedo-project.org/accueil/ressources-

rubedo/documentation

@Rubedo_project