Réaliser un carrousel dynamique [Niveau intermédiaire ]

• 26 août 2016
• Steeve

Pour ce tutoriel vous devez avoir de bonnes notions de HTML, CSS, Javascript et avoir un Slider (carrousel) prêt à l’emploi ou avoir lu mon tutoriel sur l’intégration de Bootstrap dans votre site MODX.

Pour ma part je vais me servir de Bootstrap afin de gagner du temps. Sur la page « getting started » de Bootstrap vous avez des exemples dont celui qui nous intéresse « Boostrap carousel ».

Je vous ai préparé un exemple simplifié que vous pouvez télécharger sous forme de fichier compressé zip (carousel Bootstrap modifié).

Vous devez à présent mettre en place les fichiers de mon exemple et copier coller le code HTML dans un modèle de page. Vous ne devriez pas avoir de difficultés si vous avez de bonnes notions de HTML. Allez je vous donne un coup de main !

1. Copiez tous les dossiers à la racine du site (css, js, images) sans le fichier index.html

2. Copiez le contenu du fichier HTML (index.html) dans le modèle de base

Aller dans l’interface administrateur de MODX et téléchargez l’extension MIGX. Une fois téléchargée, installez la. Si vous avez une perte de mémoire je vous rappel mon tutoriel sur comment installer une extension MODX. Une question vous sera posé pour savoir ou vous préféré voir le bouton MIGX, personnellement je préfère qu’il soit dans le menu « Extensions » (Extras/Components) mais ce choix vous appartient.

Maintenant on passe dans le vif du sujet. Créez une nouvelle variable de modèle et nommé la imagesCarousel.

Configurer la comme dans l’onglet « Informations générales » comme ci-dessous :

Nom : carousel
Légende : Images du carousel
Description : Taille des images 1600 x 500 pixel
Éditez, dupliquez, supprimez avec le clic droit.
Organisez avec le glisser / déposer.

Puis dans l’onglet « Options d’entrée » :

Type d’entrée : migx

Onglets du formulaire :

[
{"caption":"Informations", "fields": [
    {"field":"titre","caption":"Titre"},
    {"field":"image","caption":"Grande image","inputTVtype":"image"}
]}
]

Colonnes de la grille :

[
{"header": "Titre", "width": "160", "sortable": "true", "dataIndex": "titre"},
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

Intitulé du bouton : Ajouter une image

Et pour finir dans l’onglet « Accès au modèle », cliquez sur le modèle sur lequel vous voulez appliquer cette variable de modèle. Dans mon exemple le modèle de base.

Maintenant allez dans une ressource sur lequel est appliqué le modèle de page sélectionné lors de la configuration de notre variable de modèle. Dans l’onglet variable de modèle vous devriez trouver un sous onglet « Non catégorisé » dans lequel ce trouve votre variable de modèle Images du carousel (imagesCarousel). Vous devriez voir le bouton « Ajouter une image » et un tableau qui est vide pour le moment.

Pour ajouter une image au carousel, cliquez sur le bouton du même nom. Une fenêtre popup s’ouvre avec nos deux champs, le titre et l’image. Pour le titre mettez ce que vous désirez, pour l’image cliquez sur le bouton à droite du champ, en bleu sur mon image de démonstration ci-dessous. Une nouvelle fenêtre s’ouvre, c’est un gestionnaire de média. Il permet de gérer les fichiers de tous types sur votre hébergement web. Sélectionnez la première image dans le dossier « images » que vous avez du transférer avec les fichiers CSS, Javascript au début du tutoriel. Vous devriez avoir le résultat ci-dessous.

Cliquez sur terminer et vous devriez voir la première image dans le tableau de votre variable de modèle comme ci-dessous.

Maintenant dupliquez la première image et changez le texte et l’image afin de les distinguer.

Répéter l’opération pour avoir trois images.

Maintenant nous allons afficher les images, rendre dynamique notre modèle de page.
Documentation de MIGX pour l’affichage partie frontend (partie visible par les internautes de votre site).

Allez dans le modèle qui affiche le carousel (carrousel en français), dans mon exemple le modèle de base. Remplacer les trois bloc d’images du carousel par ce code :

[[getImageList? 
    &tvname=`imagesCarousel`
    &tpl=`carouselTpl`
]]

Ce code appel le snippet (bout de code PHP) « getImageList » qui fait partie de l’extension MIGX avec comme paramètre « tvname » le nom de notre variable de modèle « imagesCarousel » et comme paramètre « tpl » bout de code HTML (chunk) nommé « carouselTpl »

Créez le chunk « carouselTpl » avec ce code HTML :

  <img class="first-slide" src="[[+image]]" alt="[[+titre]]" />
  

	

	  
[[+titre]]
	
  

Ligne 1 : juste un commentaire avec [[+idx]] qui renvoie le numéro de l’image. Première image il renvoie 1, deuxième image 2 ainsi de suite…
Ligne 2 : [[+idx:is=`1`:then=`active`]] ce code renvoie active si idx est égale a 1
Ligne 3 : [[+image]] et [[+titre]] sont les champs que nous avons créer dans notre variable de modèle. Ils renvoient ce que vous avez rentré dans le tableau.
Pour les autres lignes, vous retrouverez ce qu’on vient de voir.

Et voilà vous avez un carousel dynamique ! Pour vérifier que ça fonctionne correctement il suffit d’afficher la votre page. Vous devriez voir ceci :

Vous pouvez aussi vous amusez a changer l’ordre d’affichage des images en faisant un glisser / déposer des images de votre variable de modèle dans votre ressource. N’oubliez pas d’enregistrer et de rafraichir votre page pour voir le changement effectués.

J’espère que ce tutoriel vous a aidé, si c’est le cas partagé le pour m’aider à votre tour avec les boutons ci-dessous ;-)