Tutoriel Carrousel Koha avec Content Flow

Comment créer un carrousel de couvertures pour la page d’accueil de l’OPAC Koha avec Content Flow

D’abord merci à la BU de St Etienne et à Dominique Rouger pour les renseignements généreusement fournis sur Content Flow.

Objectif :
afficher un carrousel de couvertures sur la page d’accueil. Les couvertures correspondent à des notices faisant partie d’une liste, et dans mon cas, la liste des nouveautés.

Prérequis :
– accès à l’édition HTML de la page de l’OPAC ;
– possibilité d’insérer un appel à un ficher JavaScript dans cette page;
– pouvoir télécharger et copier sur le serveur Koha le dossier ContentFlow disponible ici :
http://www.jacksasylum.eu/ContentFlow/download.php
– disposer d’une URL directe d’accès à chaque notice de la liste : dans mon cas, http://opac/bib/numéro_de_notice_Koha

Et pour automatiser le processus :
– une liste de titres dans Koha;
– un répertoire permettant d’exécuter des fichiers PHP sur le même serveur que Koha (de préférence);
– les données de connexion à la base MYSQL de Koha;
– le module CURL de PHP5;
– les fichiers PHP joints.

Installation
– Copier le dossier ContentFlow dans le dossier js de chaque langue de l’OPAC concernée par le carrousel. Ici, on a choisi en et fr-FR.
– Modifier le fichier opac-header-close.inc de chaque langue concernée, pour ajouter
<script type="text/javascript" language="javascript" src="<!-- TMPL_VAR NAME="themelang" -->/js/ContentFlow/contentflow_src.js"></script>
avant la fin du fichier.
– Créer une nouvelle qui s’affichera sur la page localisée de l’OPAC, ici « OPAC fr-FR »
– insérer le contenu suivant dans la nouvelle :
pour ouvrir la div du carrousel :
<div class="ContentFlow"><div class="loadIndicator"><div class="indicator"></div></div><div class="flow">
puis pour chaque exemplaire :
<div class="item" href="http://catalogue.enc.sorbonne.fr/bib/97602"><img src="http://images.amazon.com/images/P/1843842602.01.MZZZZZZZ.jpg" alt="" class="content" title="Medieval Romance, Medieval Contexts" /><div class="caption"><a href="http://catalogue.enc.sorbonne.fr/bib/97602">Medieval Romance, Medieval Contexts<br/></a>edited by Rhiannon Purdie and Michael Cichon</div> </div>
et enfin pour fermer la div :
</div><div class="globalCaption"></div><div class="scrollbar"><div class="slider"><div class="position"></div></div></div></div>

Analysons ce qu’il faut insérer pour chaque exemplaire :
<div class="item" href="http://catalogue.enc.sorbonne.fr/bib/97602">
pour ouvrir la div de l’exemplaire et préciser le lien à suivre quand on clique sur la couverture
<img src="http://images.amazon.com/images/P/1843842602.01.MZZZZZZZ.jpg" alt="Medieval Romance, Medieval Contexts" class="content" title="Medieval Romance, Medieval Contexts" />
donne l’adresse de la couverture chez Amazon et affiche le titre quand on clique dessus ou que l’utilisateur refuse d’afficher les images ou d’exécuter des scripts JavaScript. Le format de l’image est medium, pour ne pas trop ralentir le chargement de la page.
<div class="caption"><a href="http://catalogue.enc.sorbonne.fr/bib/97602">Medieval Romance, Medieval Contexts<br/></a>edited by Rhiannon Purdie and Michael Cichon</div> </div>
Cette div affiche le titre et l’auteur sous la couverture, et crée le lien sur le titre qui renvoie à la notice

La contrainte principale est l’existence de la couverture dans la collection d’Amazon et l’identification de son adresse (généralement basée sur l’ISBN 10 du livre concerné).
C’est ce qui m’a amené à automatiser le processus.

Le script PHP joint se charge tester l’existence de toutes les images de couverture des ouvrages présents dans une liste sélectionnée, avant de générer automatiquement la partie de la div Content Flow qui concerne les exemplaires.
Fonctionnement :
– connexion à la base Koha et récupération de tous les titres avec leur ISBN
– nettoyage des données ISBN : on garde 10 caractères s’il n’y en a que 10 et sinon on ne garde que les 9 caractères correspondant à la racine de l’ISBN 10 avant de calculer le 10e en utilisant l’algorithme ISBN. Voir page Wikipedia sur le sujet :
http://fr.wikipedia.org/wiki/ISBN#Calcul_du_chiffre_cl.C3.A9_d.27un_num….
– test de l’existence d’un fichier à l’adresse automatiquement générée pour l’image de la couverture d’après l’ISBN
– si ce test est positif, vérification de la taille du fichier retourné, pour éviter d’afficher un fichier image GIF transparent de 1 pixel de coté…
– si la taille est supérieure à 1000 octets, écriture de la div correspondant à l’exemplaire
– mise à jour de la nouvelle et de sa date de publication par envoi d’une requête SQL
– fermeture de la connexion à la base.

Paramètrage :
renseigner les variables $liste et $nouvelle en fonction de votre usage de Koha
$numero_liste correspond à la liste de titres pour laquelle vous voulez créer un carrousel
$numero_news correspond à la nouvelle dans laquelle vous voulez voir s’afficher le carrousel
NB : la liste et la nouvelle doivent exister avant le lancement du script.

Fichier attaché Taille
carrousel_koha.zip 2.62 Ko