Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle)
Aujourd’hui, je me propose de vous montrer comment intégrer jQuery Cycle (la première version) à une view de Drupal afin de créer un slider d’articles.
Pour les fins de la démonstration, j’utiliserais le template de base Bartik.
Etape 1 : installer jQuery Update
jQuery Update est un module de Drupal qui permet de mettre à jour la version jQuery utilisée par Drupal. Il est nécessaire d’avoir à notre disposition une version plus récente de jQuery, afin d’éviter les erreurs d’initialisation de jQuery Cycle. Pour ce faire, installez jQuery Update 
Si vous le souhaitez, vous pouvez également installer le module administration menu , qui permet d’avoir un menu déroulant – avec des accès aux commandes de développement – dans l’interface d’administration de Drupal .
Il faut bien sûr, télécharger jQuery Cycle ici http://jquery.malsup.com/cycle/download.html – et l’inclure dans le fichier template.php du theme bartik, en utilisant l’instruction ci dessous.
if (drupal_is_front_page()) {
drupal_add_js(drupal_get_path(‘theme’, ‘bartik’).’/js/jquery.cycle2.min.js’);
}else{
}
Enfin, installez le module view, qui vous permettra de créer la structure du slider à l’étape suivante.
Etape 2 : Créer un bloc et le positionner
Avant de commencer, assurez vous d’avoir ajouté un champ image dans le type de contenu qui servira à alimenter le slider. 
Une fois l’image ajoutée, allez dans l’interface de gestion des vues, ( ?q=admin/structure/views/add ) afin de créer un bloc . Utilisez, lors de la création de la vue, les mêmes paramètres que ceux indiqués dans l’image ci dessous 
Cliquez ensuite sur continue & edit . Une fois arrivé à l’écran ci dessous : 
Cliquez sur unformatted list, afin de changer le format de la sortie de la view. Sélectionnez html list, puis cliquez sur apply (all displays). 
Dans la fenêtre suivante, insérez la valeur cycle-slideshow dans le champ dénommé list class . Cliquez ensuite sur apply (all displays). 
Cliquez sur ensuite sur la commande add , située dans la zone fields. 
ajoutez ensuite les 3 champs suivants :
1. un champ du type body 
En cochant l’option ‘exclude from display’ et en décochant l’option ‘create a label’ 
Mettez la valeur du champ formatter à trimmed et trim length à 300 
2. Le champ d’illustration créé en début de tutoriel. Là encore, cochez l’option ‘exclude from display’ et décochez l’option ‘create a label’ 
3. Un champ body. Pour ce dernier, sélectionnez l’option Rewrite results , et cochez l’option rewrite the output of this field . 
Ensuite, saisissez le code suivant dans le champ text situé sous l’option rewrite the output of this field.
[field_illustration]
<div class= »overlay »>[title]</div>
[field_illustration]
<div class= »overlay »>[title]</div>
Une fois vos modifications créés cliquez sur l’espace “block settings”, pour donner un nom à votre bloc. Nommez le slider
Enfin, cliquez sur le bouton save. Une fois le bloc créé, nous devons le positionner quelque part sur le template. Comme le diagramme ci dessous le montre, la position featured du template bartik semble être la plus indiquée pour cela.
Allez donc dans le menu ?q=admin/structure/block/ , puis allez dans le block slider et sélectionnez la position featured dans la liste déroulante. 
cliquez ensuite sur save blocks .
Affichez alors le front end du site : vous aurez un embryon de slider, qui fait certes un peu mal aux yeux et qui ne “slide” pas vraiment.
Voyons comment mettre un peu de vie et de dynamisme dans tous cela.
Etape 2 : Intégrer jQuery CYcle
Allez dans le dossier themes/bartik
Créez un dossier js . Copiez y, si ce n’est pas déjà fait, le fichier jquery.cycle.all.js
Créez un fichier functions.js et copiez y le code suivant
(function ($) {
$(document).ready(function() {
$(‘.cycle-slideshow’).before(‘<div id= »nav »></div>’).cycle({
fx: ‘turnDown’,
speed: ‘fast’,
timeout: 3000,
pager: ‘#nav’,
});
});
}(jQuery));
Enfin, dans le fichier template, rajoutez la ligne
if (drupal_is_front_page()) {
drupal_add_js(drupal_get_path(‘theme’, ‘bartik’).’/js/jquery.cycle.all.js’);
drupal_add_js(drupal_get_path(‘theme’, ‘bartik’).’/js/functions.js’);
}else{
};
Le slider devrait fonctionner. Toutefois, son apparence laisse franchement à désirer .
Voyons comment améliorer cela
Etape 3 : Modifier le css
Allez dans le dossier “css” de bartik et ouvrez le fichier style.css. Copiez y les instructions suivantes.
.cycle-slideshow{
margin:0;padding:0;list-style-type:none;list-style-image:none;
height:auto;
position: relative;
width:100%;
height:300px;
overflow:hidden;}
.cycle-slideshow li {
margin:0;padding:0;list-style-type:none;list-style-image:none;
width:1016px;
height:320px;
position: relative;
}
ul.cycle-slideshow li img{
width:auto !important;
height:300px!important;
}
#nav{
left: 50%;
position: absolute;
text-align: center;
top: 9px;
z-index: 10000000;
}
div#nav a{
background:#3097D6;
font-size:#3097D6;
padding:5px;
width: 5px;
height: 5px;
float: right;
margin:0 0 0 5px;
display: block;
border-radius: 50px;
font-size:0px}
.activeSlide{
background: #064E79 !important;
font-size: #064E79 !important}
.overlay{
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00000000′, endColorstr=’#a6000000′,GradientType=0 ); /* IE6-9 */
color:white !important;
text-shadow: 1px 1px 0px #000;
width:100%;
display: block;
padding:5px;
text-align: center;
position: absolute;
bottom:21px}
.overlay a{
display: block; color:white !important;font-size:12px;padding:10px 0;}
Ce qui devrait donner le résultat suivant.
Avec quelques autres modifications au niveau du css, vous devriez obtenir un résultat satisfaisant. Pour ceux qui ont envie d’aller plus loin, les fichiers du template sont disponibles à cette adresse (une fois cette page ouverte, cliquez sur le bouton vert)
Jean-Luc Houédanou est un blogueur spécialisé dans l’innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l’Université de Sherbrooke, il a travaillé sur des projets d’envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique.
Il aide, par le biais de ce blog, les lecteurs à s’adapter aux évolutions rapides de la technologie et des tendances du marché.
En plus de ses articles sur l’innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d’opinion et donne des conseils sur le bien-être mental. Son objectif est d’aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.