Comment ajouter un slider d’articles à un site web Drupal (en 4 étapes, avec jQuery Cycle)

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

image
Une fois vos modifications créés cliquez sur l’espace “block settings”, pour donner un nom à votre bloc. Nommez le slider
image
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.
image
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. 
image
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.
 image
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 .
image
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.
image
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

Commentaires

Posts les plus consultés de ce blog

Comment changer le mot de passe de la Canalbox de Canal+ Afrique

Batocera : linux pour le retrogaming, entre plaisir et défis

Comment activer le contrôle du curseur sur Gboard ?