Implémentation d'un carrousel d'images

Vous pouvez personnaliser la page d'accueil du portail de développeur pour afficher des images dans un carrousel. Le carrousel d'images fournit à votre page d'accueil du portail de développeur un diaporama continu qui est personnalisé en fonction de vos spécifications.

Avant de commencer

Vous devez disposer d'un accès administrateur au portail de développeur pour effectuer cette tâche.
Remarque : ce module synchronise les informations d'identification des applications créées par les consommateurs dans l'interface utilisateur du site Developer Portal. Il ne peut pas synchroniser les informations d'identification des applications créées par le fournisseur dans l'interface utilisateur du gestionnaire d'API.

A propos de cette tâche

En implémentant un carrousel d'images, vous remplacez la bannière de bienvenue par défaut ou les images déjà définies.

Procédure

  1. Créez un type de contenu Image pour votre carrousel.
    1. Cliquez sur Structure > Types de contenu > Ajouter un type de contenu.
    2. Entrez le nom de votre type de contenu dans la zone Nom.
      Par exemple, Image de diaporama.
    3. Facultatif : Spécifiez la description du type de contenu dans la zone Description.
      Par exemple, Image à afficher dans le diaporama.
    4. Cliquez sur Sauvegarder et gérer les zones pour le type de contenu que vous venez de créer.
    5. Cliquez sur Ajouter une zone.
    6. Sélectionnez Image pour Ajouter une nouvelle zoneet entrez un libellé pour votre zone.
      Par exemple, image de diapositive.
    7. Cliquez sur Enregistrer et continuer.
      La page Field settings s'affiche pour la nouvelle zone.
    8. Dans la section Image par défaut , cliquez sur Choisir un fichier pour affecter l'image que vous souhaitez comme image par défaut pour votre diaporama si aucune autre image n'est trouvée.
    9. Facultatif: renseignez les zones Texte alternatif et Titre .
    10. Cliquez sur Sauvegarder les paramètres de zone.
    11. Dans l'onglet Gérer les zones de votre nouveau type de contenu Image de diaporama, supprimez laBodyen cliquant sur Supprimer dans le menu déroulant OPERATIONS . Cliquez à nouveau sur Supprimer pour confirmer.
  2. Envoyez par téléchargement les images qui doivent figurer dans le carrousel.
    1. Cliquez sur Contenu > Ajouter du contenu, puis sur le type de contenu que vous avez ajouté à l'étape 1.
    2. Entrez le titre de votre image dans la zone Titre.
      Par exemple, si vous disposez d'une image de phare, vous pouvez appeler le contenu Phare.
    3. Cliquez sur Choisir un fichier sous Image de diapositive et sélectionnez une image pour votre diaporama. Dans la zone Texte alternatif, indiquez le texte à utiliser si l'image ne peut pas être chargée.
    4. Cliquez sur Sauvegarder.
    5. Répétez les sous-étapes 2.a à 2.d jusqu'à ce que vous soyez satisfait du contenu des diapositives de votre carrousel.
  3. Créez une vue pour le carrousel.
    1. Cliquez sur Structure > Vues > Ajouter une nouvelle vue.
    2. Terminé Nom de la vue.
      Par exemple, Diaporama.
    3. Cochez la case Créer un bloc dans la section Paramètres de bloc .
    4. Sélectionnez Slick Carousel pour le format d'affichage.
    5. Entrez le nombre de diapositives que vous avez pour votre carrousel dans la zone Items per block , puis cliquez sur Save and edit.
      La page Editer de la vue en diaporama s'affiche.
    6. Cliquez sur le titre de la vue et entrez <none> dans la zone de texte. Cliquez sur Appliquer.
    7. Dans la section FIELDS , cliquez sur Ajouter, cochez la case correspondant à l' image de diapositive, puis cliquez sur Ajouter et configurer des zones.
    8. Vérifiez que la case à cocher Créer un libellé n'est pas sélectionnée et cliquez sur Appliquer.
    9. Dans la section CHAMPS, cliquez sur Contenu : Titre > Supprimer.
    10. Dans la section FORMAT , cliquez sur Settings pour le carrousel Slick, puis définissez Skin Main sur Default.
    11. Faites défiler vers le bas jusqu'à la section CAPTION FIELDS et cochez les cases Content: slide image et Override main optionset .
    12. Dans la section OVERRIDABLE OPTIONS , sélectionnez les cases à cocher Autoplay, Dotset Draggable .
    13. Cliquez sur Apply.
    14. Dans la section CRITÈRES DE FILTRAGE, cliquez sur Contenu : Publié > Supprimer.
    15. Cliquez sur Sauvegarder pour sauvegarder la vue Diaporama.
  4. Configurez la page d'accueil pour qu'elle héberge le carrousel.
    1. Cliquez sur Structure, puis sur Pages.
    2. Cliquez sur edit pour la page d'accueil , puis cliquez sur content dans la section Panneaux .
    3. Pour supprimer la bannière de bienvenue en cours, cliquez sur la flèche vers le bas sous la colonne OPERATIONS de la bannière de bienvenueet sélectionnez Supprimer. Cliquez à nouveau sur Supprimer pour confirmer.
    4. Pour ajouter votre carrousel, cliquez sur Ajouter un nouveau bloc et sélectionnez la vue de diaporama que vous avez créée à l'étape 3. Désélectionnez Afficher le titre et cliquez sur Ajouter un bloc.
    5. Cliquez sur Mettre à jour et sauvegarder.

Résultats

La page d'accueil de votre portail de développeur comporte désormais un carrousel de diaporama.