Portail PMB : insérer un carrousel des articles

par DocTice

Pré-requis

- portail activé
- avoir rédigé préalablement quelques articles avec logos

Objectif

Réaliser un carrousel en fondu des articles classés par ordre décroissant de parution.

Comment faire ?

- Onglet Portail/construire
- Placez vous sur votre page d’accueil
- Cliquez sur modules/Liste d’articles
- Donnez lui un nom significatif
- Choisissez Accueil pour le type de page opac
- Choisissez la source de données : j’ai opté pour tous les articles mais vous pouvez très bien choisir une rubrique
- Sélectionnez le tri et le nombre d’éléments que vous souhaitez voir afficher
- Choisissez ensuite la vue en carrousel
- ensuite il faut sélectionner la page générique qui affiche vos articles, j’ai opté pour le mode "en fondu" pour ne pas que mon carrousel ne prenne trop de place sur ma page d’accueil.
Ci-dessous copie d’écran de mes réglages :

Template

Le template doit être personnalisé pour n’afficher que le titre, logo, un résumé et un lien "lire la suite".
Voici mon code :

<h2>Derniers articles</h2>
<ul id='carousel_{{id}}'>
        {% for record in records %}
                <li class='{{id}}_item' style="height:180px;width:370px">
                        <a href='{{record.link}}'>
<h3>{{record.title}}</h3>
<img style="float:left;margin-right:5px;max-height:250px;" src='{{record.logo.vign}}'>
<div style="height:160px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis;">
<div>{{record.resume}}</div>
</div>
</a>
   <a style="text-align:right;" href='{{record.link}}'>Lire la suite...</a>
                                <br />
                       
                </li>
        {% endfor %}
</ul>

Placer le module

Sélectionner le module, puis dans Edition CSS, choisir position absolute, positionner le cadre grâĉe aux paramètres Left et top, sélectionner sa taille grâce à Height et width.

Le résultat