Portail PMB : Insérer un carrousel des nouveautés

2 | par DocTice

Avertissement : la manipulation du portail est délicate, ce que je vous explique en quelques lignes est le fruit de beaucoup de d’heures passées à tester, fouiller le code d’autres portails... La documentation du portail est pour l’instant succincte, ce que je vous présente est donc ma propre sauce !

Prérequis : Le portail doit être activé (PMB/Admistration/portail)

Pour afficher un carrousel des derniers ouvrages reçus, voici comment j’ai procédé :

1. Tout d’abord j’ai suivi la procédure pas à pas de Citédoc pour alimenter des étagères de nouveautés par la DSI

2. Ensuite, dans PMB dans l’onglet Portail/Construire/Contenu, j’ai sélectionné Modules/carrousel que j’ai paramétré ainsi :

Quelques explications :
- Mon carrousel doit s’afficher sur l’accueil je sélectionne donc cet item dans "Type de page OPAC"
- La source des données est l’étagère que j’ai créée précédemment
- Mon choix s’est porté sur un carrousel vertical, mais PMB propose aussi horizontal et fondu
- Attention au temps de transition, plus le chiffre est petit plus la vitesse de défilement est rapide (on a vite mal au coeur !)
- J’ai personnalisé le template (en gros ce sont les différentes options d’affichage du carrousel) pour :

    • afficher en haut le titre Nouveautés (entre les balises de titre H2),
    • insérer une limitation des tailles des images avec un alignement centré (balise img style),
    • insérer sous chaque vignette le titre de l’ouvrage (entre les balises p)

Voici le code que vous pouvez copier/coller et personnaliser

<h2>Les nouveautés</h2>
<ul id='carousel_{{id}}'>
        {% for record in records %}
                <li class='{{id}}_item'>
                        <a href='{{record.link}}' alt='{{record.title}}' title='{{record.title}}'style="text-align:center;">
                                <img style="max-width:120px;max-height:120px;text-align:center;"src='{{record.vign}}'/>
<p>{{record.title}}</p>
                                <br />
                        </a>
                </li>
        {% endfor %}
</ul>

Je clique ensuite sur enregistrer

3. Le module apparaît dans la fenêtre de prévisualisation encadré en rouge. Il faut maintenant le positionner correctement.
Pour cela, je sélectionne le module dans "Cadres du portail" puis je clique sur l’onglet "Edition CSS". Je vérifie bien que c’est le bon module qui est sélectionné grâce à son titre mentionné sous "Edition du style" ex : cms_module_carousel_1
Je sélectionne la position "absolute" qui me permet de bouger facilement mon carrousel
Je ne vais ensuite paramétrer que 4 champs :

Pour indiquer son positionnement sur la page d’accueil :
- Left : pour lui donner sa position horizontale
- Top : pour la verticale

Pour indiquer ses proportions
- Height : pour donner lui donner sa hauteur
- Width : pour lui donner sa largeur

Voici ce que cela donne

Attention, cette partie est délicate, n’enregistrez pas tant que vous n’êtes pas satisfait et... Armez vous de patience ! :-)

4. Une fois que je suis satisfaite du résultat j’enregistre
Le carrousel doit à présent s’afficher à sa place.

Bonus : Un tutoriel intéressant et qui m’a été d’une grande aide quand je me suis lancée dans la construction de mon portail : PMB : ajouter un carrousel des nouveautés sur le blog de Marecord.