Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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.
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World 
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
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
Cliquez ensuite sur continue & edit . Une fois arrivé à l’écran ci dessous :
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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).
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
  Dans la fenêtre suivante, insérez la valeur cycle-slideshow dans le champ dénommé list class . Cliquez ensuite sur apply (all displays).
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
  Cliquez sur ensuite sur la commande add , située dans la zone fields.
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
ajoutez ensuite les 3 champs suivants :
1. un champ du type body
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
  En cochant l’option ‘exclude from display’ et en décochant l’option ‘create a label’
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
Mettez la valeur du champ formatter à trimmed et trim length à 300
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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’
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
  3. Un champ body. Pour ce dernier, sélectionnez l’option Rewrite results ,  et cochez l’option rewrite the output of this field .
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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>

Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
Une fois vos modifications créés cliquez sur l’espace “block settings”, pour donner un nom à votre bloc. Nommez le slider
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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.
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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. 
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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.
 Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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 .
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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.
Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle), A Unix Mind In A Windows World
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 Houedanou