Afficher les vignettes vidéo avec le module média

 

 

Le module média est idéal pour gérer les fichiers médias tels que les images et les vidéos sur un site Drupal. Aujourd’hui, je vais aborder la gestion des vidéos, plus précisément la façon d’afficher une vignette vidéo. Dans ce tutoriel, vous apprendrez comment afficher une vignette pour les vidéos qui sont hébergées sur YouTube et Vimeo. Ensuite, nous verrons comment modifier le mode d’affichage  » aperçu  » de la vidéo.

 

Démarrer

 

Avant de commencer, téléchargez et installez les modules suivants :

  • Media (7.x-1.3) 
  • Media : YouTube 
  • Médias : Vimeo Ctools Views

Si vous utilisez Drush, exécutez la commande suivante :

$ drush dl media media_youtube media_vimeo ctools views

 

Étape 1 : Créer un champ vidéo

 

D’abord, nous allons créer un champ appelé « field_video » sur le type de contenu Article qui fera référence à notre vidéo YouTube ou Vimeo.

1. Allez dans Structure -> « Types de contenu » et cliquez sur « gérer les champs » dans la ligne Article.

2. Créez un champ vidéo en utilisant les valeurs définies dans le tableau 1.0.

Tableau 1-0. Créer un champ vidéo

Option Valeur Label Vidéo Nom de la machine field_video Type de champ Fichier Widget Sélecteur de fichier média

3. Sur la page d’édition du champ vidéo : cochez la case Vidéo dans la liste « Types de médias distants autorisés » et cochez à la fois « vimeo:// (vidéos Vimeo) » et « youtube:// (vidéos YouTube) » dans la liste « Schémas URI autorisés ».

 

Une fois que vous avez coché les bonnes cases, cliquez sur Enregistrer les paramètres.

À ce stade, nous avons un champ vidéo sur le type de contenu Article. Maintenant, nous devons créer du contenu de test, pour ce tutoriel, j’ai utilisé les deux vidéos suivantes :

http://www.youtube.com/watch?v=UuSb9VNWXgk et http://vimeo.com/18352872 

 

Étape 2 : Créer la page de vues

 

Maintenant, nous sommes prêts à créer notre page de liste de vues. À ce stade, nous avons un champ vidéo et du contenu de test. Le seul travail qui nous reste à faire, c’est de créer une page de listing qui affichera le mode d’affichage « Preview » de la vidéo.

1. Allez dans Structure -> Vues et cliquez sur « Ajouter une nouvelle vue ».

 

2. Remplissez le formulaire « Ajouter une nouvelle vue » en utilisant les valeurs définies dans le tableau 1.1 et cliquez sur « Continuer & ; modifier ».

Tableau 1-1. Créer une nouvelle vue

Option Valeur Nom de la vue Vidéos récentes Nom de la machine recent_videos Afficher le Contenu de type Article trié par Newest first Créer une page Coché Titre de la page Vidéos récentes Chemin recent-videos Format d’affichage Liste non formatée de champs

 

3. Cliquez sur Ajouter dans l’ensemble de champs Champs et sélectionnez le champ Vidéo.

4. Sélectionnez « Fichier rendu » dans la liste déroulante Formateur, puis sélectionnez Aperçu dans la liste déroulante « Mode d’affichage ».

 

Maintenant, si vous regardez l’aperçu des vues, vous devriez voir des images redimensionnées des vignettes vidéo.

 

Étape 3 : Personnaliser l’aperçu vidéo

 

La section ci-dessus, vous montre à quel point il est facile d’afficher une vignette vidéo. Tout ce que nous avons fait, c’est de configurer les vues pour afficher le mode d’affichage de l’aperçu et le module Media a fait le reste.

Mais que faire si vous voulez changer la taille de la vignette ? Heureusement, le module Media permet de tout changer facilement dans un mode de vue.

1. Allez dans Configuration -> « Types de fichiers » et cliquez sur « gérer l’affichage des fichiers » dans la ligne Vidéo.

2. Cliquez sur Aperçu dans le coin supérieur droit.

3. Faites défiler jusqu’au bas de la page et sélectionnez un style d’image différent dans la liste déroulante.

 

Mais prenez note du message d’avertissement sur la page :

Si vous prévoyez d’apporter des changements drastiques à l’affichage de l’aperçu, je vous recommande de créer un mode d’affichage distinct pour votre aperçu personnalisé. Pour définir un mode d’affichage personnalisé, regardez les modes d’affichage des entités ou le module Display Suite.

Si vous avez des questions, n’hésitez pas à laisser un commentaire.

 

Facebook
Twitter
LinkedIn