Créer des pages composées en ligne avec Collage

Collage permet de composer en ligne, comme des contenus, des pages complexes composées d’éléments organisés en grille. C’est le moyen idéal de permettre à un webmaster de gérer lui-même ses pages d’accueil.

Préparation

Vous n’aurez besoin sur votre site que d’un dossier et de quelques actualités publiées.

Objectif de la formation

Nous allons associer comme page par défaut d’un dossier une page composée d’une collection d’actualités, d’une image et d’une actualité complète.

Installer Products.Collage

Ajoutez à l’entrée eggs de votre buildout la valeur Products.Collage. Relancez le buildout puis redémarrez votre site. La dernière version du package Products.Collage a été ajoutée à votre environnement Plone.

Il faut maintenant activer le module. Connectez vous en tant qu’administrateur. Allez dans admin > Configuration du site, puis Modules. Cochez Products.Collage, puis enregistrez.

_images/activer-module.jpg

Créer un Collage

Allez dans un dossier de votre site, faites Ajout d’un élémént > Collage.

_images/menu-ajouter-collage.jpg

Indiquez un titre et enregistrez. Cliquez sur Composer pour aller sur la page de construction du collage.

_images/menu-composer-collage.jpg

Un collage se compose de rangées elles-mêmes divisiées en colonnes, chaque colonne pouvant contenir plusieurs éléments les uns au-dessus des autres. Ajoutez une première rangée.

_images/ajouter-rangee.jpg

Cela ajoute une rangée, contenant par défaut une colonne.

_images/nouvelle-rangee.jpg

Ajouter les éléments du Collage

Nous allons composer un collage en deux colonnes sur une ligne. La première colonne contiendra une liste des actualités, la seconde contiendra une image statique et le rendu d’une actualité.

Cliquez sur créer une colonne. Nous avons maintenant deux colonnes.

_images/ajouter-colonne.jpg

Dans la colonne de droite, cliquez sur Insérer un élément existant. Recherchez une actualité et insérez-la.

_images/ajouter-alias.jpg

Vous avez créé un alias sur votre composition, qui affiche le contenu de votre actualité.

Vous pouvez créer un contenu spécifique pour votre composition. Dans la colonne de droite, cliquez sur Créer un nouvel élément -> Image.

_images/ajouter-element.jpg

Vous arrivez sur le formulaire de création d’une image. Uploadez une image et publiez-la. Vous observez que la nouvelle image est un contenu image qui a été ajouté dans un contenu colonne, lui même ajouté dans un contenu rangée.

_images/image-embarquee.jpg

Cliquez sur Retour au collage.

_images/image-ajoutee.jpg

Vous souhaitez que l’image s’affiche au-dessus du texte de l’actualité. Cliquez sur la flèche haut de l’image (ou la flèche bas de l’actualité).

_images/deplacer-image.jpg

Vous avez changé l’ordre des éléments de la colonne.

_images/image-deplacee.jpg

Vous observerez que vous avez directement accès à certaines fonctionnalités des documents, comme par exemple, la rotation des images (transformer), la copie, etc.

Nous allons créer une collection des actualités dans la colonne de gauche. Faites Créer un nouvel élément > Collection.

_images/ajouter-collection.jpg

Créez une collection qui affiche toutes les actualités du site. Revenez ensuite au Collage.

_images/collection-ajoutee.jpg

Cliquez sur Voir pour observer le résultat.

_images/vue-d-ensemble.jpg

Utiliser le collage comme page d’accueil

Publiez le collage, puis assignez-le comme vue par défaut du dossier : sur le dossier, cliquez sur Affichage > Changer la vue par défaut et sélectionnez votre collage.

_images/vue-par-defaut.jpg

Nous ne voulons pas faire apparaître le titre de notre collage Accueil internet sur cette page d’accueil. Allez dans Modifier > Paramètres. Décochez Afficher le titre et enregistrez.

_images/pas-afficher-titre.jpg
_images/vue-sans-titre.jpg

Paramétrer l’affichage du collage

Nous allons maintenant tester quelques options de paramétrage de notre collage. Nous pouvons choisir un modèle pour notre ligne. Sur la ligne, cliquez modèle. Vous avez une liste de layouts disponibles.

_images/layout-rangee.jpg

Sélectionnez par exemple Gauche large.

_images/gauche-large.jpg

Le résultat est manifeste (mais pas forcément très bon... re-sélectionnez le modèle Automatique).

Nous pouvons également choisir un modèle pour les éléments. Cliquez sur modèle de l’actualité, choisissez portlet.

_images/actu-portlet.jpg

La vue portlet permet de choisir un habillage.

_images/changer-habillage.jpg
_images/habillage-change.jpg

Extensibilité

Il est possible de développer de nouveaux layouts et de nouveaux types d’éléments pour les compositions de Collage.

Pour trouver les modules d’extension existants, cherchez sur pypi : http://pypi.python.org/pypi?%3Aaction=search&term=collective.collage&submit=search.

Dans la liste des modules disponibles pour collage, nous avons le produit collective.collage.portlet. C’est un plugin collage qui nous permet d’avoir des portlets dans notre collage. Nous allons l’installer.

Dans votre buildout.cfg, ajoutez à votre paramètre eggs la valeur collective.collage.portlet. Relancez votre buildout et redémarrez le site.

Allez dans configuration du site, et installez le module collective.collage.portlet.

_images/installe-collage-portlets.jpg

Retournez sur votre collage. Ajoutez une colonne. Cliquez sur modèles. Un modèle a été ajouté au modèle standard : portlets. Choisissez-le.

_images/modele-portlets.jpg

La colonne fournit maintenant une interface permettant de sélectionner un portlet, similaire à celle de la page ‘Gérer les portlets’.

_images/ajouter-portlet.jpg

Ajoutez un portlet de modération, et enregistrez.

_images/voir-portlet.jpg

S’il n’existe pas de plugin correspondant à vos besoins, contactez votre prestataire Plone favori :).

Conclusion

Le module collage permet de créer des pages composées.

On organise des contenus en lignes et en colonnes. Ces contenus peuvent être des alias de documents du site, des collections, ou des contenus embarqués.

On peut présenter les éléments de la composition suivant différents modèles, voire avec différents habillages.

Ces compositions sont idéales pour construire des pages d’accueil de sites ou de rubriques.

Des plugins existent pour étendre les éléments disponibles pour vos compositions.


blog comments powered by Disqus