Faire un album qui défile à partir d'un contenu

Contributeurs

Statut du tutoriel : 

À jour

Catégorie du tutoriel : 

Niveau du tutoriel : 

Modules utilisés : 

1. Différence avec ddblock

Ddblock permet de réaliser facilement et rapidement un diaporama à partir d'images situées dans un dossier. Vous n'avez aucun moyen de filtrer les images ni des les lier à un contenu existant. Flexslider demande plus de configuration (il faut une vue) et se base sur un champ des contenus. De plus, si vous faîtes un champ avec des valeurs multiples (plusieurs images dans un même champ), vous devrez utiliser les view modes et le module Display Suite mais cela sort du cadre de ce tuto. En revanche, cela permet de lier très facilement l'image avec son contenu.

Si ddblock est plus proche de vos besoins, allez voir ce tuto.

2. Pré-configurer le site

Activez les modules "Views", "Views UI", "Flexslider" et "FlexSlider Views Style".

3. Le diaporama

Flexsilder permet de faire des diaporama avec n'importe quel type de champ : image, texte, … Dans ce tuto, nous allons utiliser le type de contenu Article et son champ image ce qui correspond à un cas d'utilisation typique du module.

  1. Commençons par ajouter deux articles avec les photos : Menu d'administration : Contenu > Ajouter du contenu > Article.
  2. Créons maintenant la vue qui contiendra notre diaporamma : Menu d'administration : Structure > Vue > Ajouter une nouvelle vue.
    1. Donnez un nom à la vue. Par exemple : Diaporama. Cliquez ensuite sur Continuer & modifier.
    2. Il faut désormais changer le format d'affichage. Pour cela, dans Format, cliquez sur Liste non mise en forme puis sélectionnez FlexSlider. Validez avec Appliquer (tous les affichages).
    3. Il faut désormais que la vue n'affiche que les champs images. Pour cela, dans Format, cliquez sur Contenu puis Champs. Enfin, validez avec Appliquer (tous les affichages).
    4. Retirez le champ titre : cliquez sur celui-ci puis sur Retirer.
    5. Ajoutez le champ image.
      1. Cliquez sur Ajouter à côté de Champs.
      2. Trouvez le champ qui vous intéresse et ajoutez le.
      3. On pourra enlever l'étiquette pour rendre l'affichage plus joli.
      4. On peut aussi choisir à quoi lier l'image. Par exemple, si vous choisissez contenu, quand vous cliquerez sur l'image, vous serez redirigé vers le contenu associé.
    6. Reste à ajouter un filtre pour ne voir que le bon contenu : dans Critères de filtrage, cliquez sur Ajouter. Sélectionnez Contenu : type. Appliquez puis sélectionnez Article.

C'est bon.