Vues, vues-diaporama et pagination dans Drupal 7
La situation est la suivante: j'ai un type de contenu Diapositive et je souhaite afficher les trois dernières diapositives dans un diaporama. Les diapositives doivent faire un cycle et les diapositives doivent également être contrôlables par un téléavertisseur. Le téléavertisseur doit avoir trois puces/liens/images pour pouvoir accéder à une diapositive particulière du diaporama. Le téléavertisseur doit également avoir des flèches gauche et droite pour incrémenter et décrémenter la diapositive dans le diaporama.
Cette technique est utilisée de manière omniprésente sur le Web, mais je n'arrive pas à comprendre comment configurer cela correctement à l'aide de vues et de diaporamas de vues. Tous les pointeurs de vous tous qui ont expérimenté des Drupalites sont les bienvenus.
À la vôtre, Les.
(1) Modules requis (Version: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Installer les modules
Dans Drupal7, vous pouvez installer des modules à partir de la section admin, mais je pense toujours que cette nouvelle fonctionnalité n'a pas de sens, car nous devons rechercher le lien du module sur le site Druapl, puis copier-coller dans la zone d'installation du module d'administration, vraiment fou. Cela aurait été si bien qu'ils l'auraient fait quelque chose comme wordpress un petit festin de recherche. Quoi qu'il en soit, je vais juste le télécharger et l'istaller à l'ancienne (je recommande toujours cette ancienne façon).
Téléchargez tous les modules depuis le site Drupal et installez-les dans le répertoire yoursitename/sites/all/modules. Allez sur http://www.yoursitename.com/node#overlay=admin/modules et activez ces modules comme ci-dessous;
(1) Vues (2) Vues UI (3) Vues Diaporama (4) Vues Diaporama: Cycle (5) Outils du chaos (6) Lien (7) Bibliothèques (8) Jeton (facultatif) (3) Créer un cache d'image
Dans Drupal7, imagecache fait partie du module de base et est nommé en tant que styles d'image. Créons donc deux caches d'images à partir d'ici, une pour l'image du curseur pleine taille et l'autre pour l'image miniature. Dans ce didacticiel, j'utilise la dimension 935x293 (pixels) pour l'image de curseur pleine taille et la dimension 210x100 (pixels) pour l'image miniature. Remarque: Ces configurations peuvent être différées selon vos besoins.
- Paramètres d'image Fullsize Slider
Allez sur http://www.yoursitename.com/node#overlay=admin/config/media/image-styles et cliquez sur le lien Ajouter un nouveau style (1) Donnez un nom de style d'image et cliquez sur sur le bouton Créer un nouveau style (2) Sur l'écran de configuration suivant, sélectionnez le nouveau style que vous souhaitez, puis cliquez sur le bouton Ajouter (Dans ce tutoriel, je choisis le redimensionnement du style) (3) Sur l'écran suivant, définissez la largeur et la hauteur et cliquez sur l'effet d'ajout bouton. (Les paramètres peuvent varier selon le style que vous choisissez). J'ai défini la largeur sur 935 et la hauteur sur 293 pixels.
Faites ce même processus pour l'image miniature également. (pour la dimension de l'image miniature, j'ai défini la largeur sur 210 et la hauteur sur 100 pixels.) (4) Créer un nouveau type de contenu
Créons un nouveau type de contenu, dans la barre de menus du tableau de bord, cliquez sur Structure puis sur types de contenu puis cliquez sur le lien Ajouter un nouveau type de contenu.
(1) Donnez un nom lisible par l'homme, je l'ai nommé comme curseur en vedette (le nom de la machine sera généré automatiquement en fonction du nom lisible par l'homme) (2) Donnez une description brève et pertinente (3) Paramètres du formulaire de soumission, je laisse comme paramètres par défaut (4) Options de publication, j'ai coché uniquement publié (tous les autres paramètres ne sont pas cochés) (5) Paramètres d'affichage, j'ai décoché les informations sur l'heure et la date. (6) Paramètres de commentaire, j'ai défini masqué (désactivé) (7) Paramètres du menu, je laisse comme paramètres par défaut. (8) Cliquez sur le bouton Enregistrer et ajouter des champs (5) Créer de nouveaux champs
Ici, dans cet exemple, je ne crée que deux fichiers, et ce sont le champ d'image et le champ de lien. Nous utiliserons le champ d'image pour télécharger notre image de curseur et le champ de lien pour créer un lien personnalisé où nous voulons que notre curseur soit lié.
Paramètres du champ d'image
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
J'ai défini ce champ comme requis, j'ai ajouté un nom de directeur de fichier appelé slider-image afin que ces images soient organisées séparément des autres images. Vous pouvez définir la taille et la résolution de téléchargement maximales ici, j'ai un champ alt et titre activé et enfin cliquez sur le bouton Enregistrer les paramètres.
En utilisant la même méthode, créez également le champ de lien.
Paramètres de champ de lien (1) Étiquette: lien de curseur (2) Champ: lien de curseur (3) Type de champ: lien (4) Widget (élément de formulaire): lien (5) Cliquez sur le bouton Enregistrer, pour les configurations de champ de lien, laissez tout aux paramètres par défaut . J'ai réorganisé le champ comme indiqué ci-dessous; Champ de titre Champ d'image Champ de lien Champ de corps (vous pouvez même supprimer ce champ si cela n'est pas nécessaire) Gérer l'affichage Dans l'onglet Gérer l'affichage, vous pouvez configurer la façon dont l'affichage du champ doit être affiché. J'ai défini le champ du lien comme masqué et j'ai également défini le libellé de l'image comme masqué Drupal7: gérer les champs (6) Créer un contenu de curseur de fonctionnalité
J'ai créé quatre contenus de curseur pour ce tutoriel.
(1) Cliquez sur ajouter un lien de contenu (2) Créer un contenu de curseur en vedette (3) Donnez un nom de titre approprié (4) Téléchargez une image de curseur (5) Donnez des noms de champ alt et titre (6) Donnez un titre de lien et une URL où vous voulez le curseur à lier (7) Laissez tous les autres paramètres par défaut à l'exception du champ du chemin si vous le souhaitez, vous pouvez donner un alias d'URL compatible avec le référencement. (8) Enregistrez le contenu.
De la même manière, créez plus de contenu de curseur en vedette (j'ai créé quatre contenus) (7) Créer une nouvelle vue
Il est maintenant temps de créer notre nouvelle vue de diaporama. Dans le menu Tableau de bord, cliquez sur la structure, puis sur les vues.
(1) Cliquez sur Ajouter un nouveau lien de vue (2) Donnez le nom de la vue, je l'ai nommé en tant que curseur en vedette (le nom de la machine sera généré automatiquement) (3) Donnez une description de la vue appropriée (4) Choisissez Afficher le contenu de type Curseur en vedette (votre contenu nom du type). (5) Décochez Créer un Pge et cochez Créer un bloc (6) Tapez le titre du bloc et choisissez le format d'affichage comme "Diaporama" des éléments "champs" par page 5 (vous pouvez entrer le nombre d'éléments que vous souhaitez afficher) (7 ) Cliquez sur le bouton "Continuer et éditer". Affichage des paramètres du champ Commençons par ajouter un champ de lien (le lien doit être le premier champ pour que tout fonctionne correctement) .Cliquez donc sur l'icône d'ajout et dans le filtre Groupes sélectionnez Contenu Ajouter du contenu: Lien, Cliquez sur "Bouton Ajouter et configurer" dans la fenêtre de configuration suivante décochez "Créer une étiquette". "Vérifier" Exclure de l'affichage. Cliquez sur "bouton Appliquer"
Ensuite, ajoutons un champ d'image, alors cliquez sur l'icône d'ajout et dans le filtre Groupes sélectionnez le contenu Ajouter du contenu: champ d'image (Remarque: assurez-vous de choisir le champ d'image que nous avons créé pour ce type de contenu de curseur uniquement.) Cliquez sur "Ajouter et configurer "dans la fenêtre de configuration suivante, décochez" Créer une étiquette ".
Formateur: Image (si vous avez installé Colorbox ou lightbox, vous pouvez les choisir ici!) Style d'image: Fullsize (Choisissez le cache d'image que vous avez créé à l'étape ci-dessus) Liez l'image à: Rien Paramètres de style: Laissez les paramètres par défaut Aucun comportement de résultat: Laissez Paramètres par défaut Réécrire les résultats: cochez Afficher ce champ sous forme de lien Chemin du lien: [view_node] (Remarque: faites défiler un peu et vous pouvez voir les modèles de remplacement créés par le module Core Token, (si nous n'avons pas défini le champ de lien comme premier, nous ne peut pas voir l'option de champ de lien ici) copiez uniquement [view_node] puis faites défiler vers le haut et collez-le dans le champ du chemin du lien.) Cliquez sur "bouton Appliquer"
Enfin, nous avons besoin d'un champ supplémentaire pour la vignette, alors cliquons sur l'icône d'ajout et dans le filtre Groupes sélectionnez Contenu Ajouter du contenu: champ d'image (Remarque: assurez-vous de choisir le champ d'image que nous avons créé pour ce type de contenu de curseur uniquement.) Cliquez sur "Ajouter et configurer le bouton" dans la fenêtre de cofiguration suivante décochez "Créer une étiquette" et VERIFIEZ EXCLURE DE L'AFFICHAGE, Formateur: Image (si vous avez installé Colorbox ou lightbox vous pouvez les choisir ici!) Style d'image: Miniature (Choisissez l'imagecache vous avez créé à l'étape ci-dessus) Lier l'image à: Rien Paramètres de style: Laisser les paramètres par défaut Aucun comportement de résultat: Laisser les paramètres par défaut Réécrire les résultats: Cochez Sortir ce champ comme lien Chemin du lien: [view_node] (Remarque: faites défiler un peu et vous pouvez voir les modèles de remplacement créés par le module Core Token, (si nous n'avons pas défini le champ de lien comme premier, nous ne pouvons pas voir l'option de champ de lien ici) copiez uniquement [view_node] puis faites défiler vers le haut et collez-le dans le champ du chemin du lien. ) Cliquez sur "bouton Appliquer"
Affichage des paramètres de filtres
Dans views3, les filtres sont créés au début pendant que nous choisissons le type de contenu et d'autres paramètres! Si vous avez besoin d'un filtrage supplémentaire, vous pouvez le créer ici!
Affichage des paramètres de style
Cliquez sur le diaporama de format | paramétrages et sur la fenêtre de configuration suivante définie comme ci-dessous; (1) Type de liste: Liste non ordonnée (2) Classe Wrapper: laissez les paramètres par défaut (3) Style> Apparence: sourd (4) Diapositives> Type de diaporama: cycle (5) Options de cycle Vous devez télécharger le plug-in de cycle jQuery et copier jquery. cycle.all.min.js vers sites/all/bibliothèques/jquery.cycle Vous pouvez trouver le plugin sur http://malsup.com/jquery/cycle .
EN ANGLAIS SIMPLE Créez un dossier nommé "bibliothèques" dans le répertoire site/all puis créez un autre dossier nommé "jquery.cycle" dans ce répertoire et enfin copiez et collez uniquement le "jquery.cycle.all.min.js" dans ce répertoire.
(6) Transittion: fondu (7) Action: pause au survol (8) Tweaks d'Internet Explorer: par défaut (9) Widgets: Vous pouvez choisir l'un ou les deux en haut et en bas (je choisis le bas ici et les paramètres avancés comme ci-dessous;) (10) Widgets inférieurs> Téléavertisseur> Type de téléavertisseur: Champs (11) Champ de téléavertisseur: Contenu: Image (Remarque: le dernier que nous avons ajouté pour le pouce, ne vous méprenez pas car les deux champs seront nommés de la même façon.) (12) Activer la diapositive et Pause sur Pager Hove: coché, les commandes et le compteur de curseur ne sont pas cochés. (13) Cliquez sur le bouton Appliquer.
Format Afficher les paramètres de champ
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Créer une région personnalisée (étape facultative)
(1) Sur votre dossier thems, ouvrez le fichier your_theme_name.info et ajoutez une nouvelle région comme celle ci-dessous; regions [Featured_slider] = Slider présenté et enregistrez le fichier .info. (2) Ouvrez votre fichier de thèmes page.tpl.php et ajoutez ce code là où vous souhaitez que votre diapositive soit affichée comme indiqué ci-dessous;
Vous pouvez même créer un modèle de page d'accueil personnalisé comme page - front.tpl.php afin de ne pas avoir à modifier le modèle page.tpl.php par défaut. [9] Activer et configurer le blocage
Maintenant, ce bloc sera visible dans la zone des blocs désactivés, alors dans le menu Tableau de bord, accédez à Structure> Bloc et activez le bloc dans une région par défaut du thème ou dans la région personnalisée que nous avons créée (Featured_slider). (Les régions varient selon le thème que vous utilisez.)
Paramètres de configuration du bloc Après avoir activé le bloc, vous obtenez un lien pour configurer le bloc, cliquez sur le lien Configurer et sur la section des paramètres définie comme ci-dessous;
(1) Bloquer le titre (si vous ne voulez pas que le titre blobk soit affiché, tapez simplement) (2) Encore une fois, vous obtenez tous les paramètres de région spécifiques au thème activé. Sur les paramètres de visibilité (3) Pages> Afficher le bloc sur une page spécifique: choisissez Uniquement les pages répertoriées et saisissez pour que ce bloc ne s'affiche que sur la première page. CONSEILS CSS POUR AFFICHER LES THUMBNAILS EN LIGNE
Ajoutez ces codes CSS à votre feuille de style de thèmes pour afficher les vignettes en ligne. .views-slideshow-controls-bottom .views-slideshow-pager-field-item {float: left; marge: 20px 6px; } Effectuez les ajustements nécessaires.
Jetez un œil à ce podcast de Mustardseed Media: Views Slideshow Theming .
Pendant le podcast, Bob passe en revue quelques notions de base du diaporama de vues ainsi que la façon de thématiser la sortie. Il est basé sur Drupal 6, mais je crois que la plupart des bases et des leçons seront les mêmes. Avec seulement un peu de CSS, un diaporama peut ressembler à ton mieux. Je recommande fortement de regarder ce podcast si vous voulez de beaux diaporamas.
Si vous voulez en savoir plus sur le diaporama de vues (par exemple avec des miniatures), vous devez voir ce bon tutoriel: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on- drupal7