Skip to main content

Sélections de la rédaction

Créer des fiches d’images personnalisées dans ArcGIS Hub

Published Date

Plongez dans le monde de la personnalisation d’ArcGIS Hub en explorant le potentiel de ses widgets! Au-delà de l’affichage standard des vignettes et des icônes des éléments de vos applications ArcGIS, ce billet de blogue vous guidera dans la personnalisation et l’amélioration de vos pages Hub. Si vous souhaitez apporter une touche personnelle aux fiches de votre galerie, qu’il s’agisse de modifier les vignettes ou d’ajuster les boutons et les couleurs d’arrière-plan, vous êtes au bon endroit. Joignez-vous à moi et découvrez les étapes à suivre pour créer des fiches personnalisées qui ressemblent aux fiches de galerie, mais avec une touche d’originalité. Exploitons ensemble les possibilités de personnalisation!

Des plateformes d’hébergement d’images efficaces pour vos pages ArcGIS Hub

Tout d’abord, vous aurez besoin d’une source fiable pour stocker et conserver les images que vous souhaitez présenter sur vos fiches personnalisées. Vous pouvez envisager plusieurs options pour l’hébergement de vos images en ligne. Les deux plateformes ci-dessous sont les plus populaires – et, selon moi, les meilleures – pour héberger vos images publiques.

ArcGIS Online

  • Fait partie de l’écosystème ArcGIS.
  • Permet de téléverser des fichiers allant jusqu’à 500 Go.
  • Permet d’obtenir facilement les URL d’images publiques permanentes, qui peuvent être utilisées dans ArcGIS Hub et d’autres plateformes en ligne.

GitHub

  • Permet de téléverser des fichiers allant jusqu’à 2 Go avec le compte GitHub gratuit.
  • Permet d’obtenir facilement des images publiques permanentes
  • Permet de créer plusieurs dépôts
  • Permet de compresser les images dans une certaine mesure

Que vous utilisiez ArcGIS Online ou GitHub, vous pourrez accéder aux URL des images publiques, lesquelles se trouvent dans le coin inférieur droit des pages d’éléments dans ArcGIS Online.

Capture d’écran de l’URL d’une image publique dans ArcGIS Online.

Créer des fiches personnalisées dans ArcGIS Hub en utilisant les URL d’images publiques et le code HTML

Accès à l’interface HTML

Une fois que vous avez l’URL de votre image publique à portée de main, suivez les étapes ci-dessous pour accéder au code HTML de votre fiche :

  1.       Cliquez sur « Layout »  (mise en page).
  2.       Glissez-déposez la configuration « Row » (ligne) sur la page.
  3.       Glissez-déposez le widget « Text » (texte) dans la ligne.
  4.       Dans le widget « Text » (texte), cliquez sur le signe + (insérer), puis cliquez sur « Cards » (fiches). Le widget contiendra trois fiches avec les images par défaut.

Option de sélection « Cards » (fiches) dans le widget Text (texte).

  1.       Cliquez sur le bouton « </> Edit in HTML » (modifier en HTML) situé dans la partie inférieure du widget.

Félicitations! Vous avez réussi à entrer dans l’interface HTML du widget « Text » (texte), ce qui constitue la première étape de votre parcours de personnalisation!

Interface HTML de configuration des fiches dans le widget Text (texte).

Remplacer l’image par défaut

L’une des premières lignes à modifier est le lien vers l’image de votre choix. Remplacez simplement l’URL à côté de « src = » par l’URL publique de votre image. Ce code se trouve aux lignes 5, 28 et 51 du code HTML par défaut. Vous pouvez également modifier les renseignements de remplacement de l’image situés sur la même ligne de code.

Bloc de code HTML qui introduit des images à partir d’ArcGIS Online. La ligne 5 est mise en évidence pour montrer aux lecteurs où se trouve le code source de l’image.

Enregistrez vos modifications dans le bloc de code HTML en cliquant sur « Apply » (appliquer) dans le coin supérieur droit. Vous verrez que vos fiches personnalisées ont été mises à jour avec la nouvelle image!

Modifier les légendes et la description de la fiche

Vous pouvez également modifier les légendes et les descriptions pour les adapter au contexte de vos images. Pour les légendes, remplacez le texte des lignes 7, 30 et 53 :

Bloc HTML qui code la légende de l’image. La ligne 7 est mise en évidence pour montrer aux lecteurs où se trouve le code de la légende.

Pour la description, modifiez le texte des lignes 14, 37 et 60, entre <p slot="subtitle"> et </p> :

Bloc HTML qui code la description de l’image. La ligne 14 est mise en évidence pour montrer aux lecteurs où se trouve le code de la description.

Pour valider vos modifications, cliquez sur « Apply » (appliquer) dans le coin supérieur droit.

Lier la fiche à votre élément

Après avoir quitté la fenêtre HTML, vous verrez deux boutons dans le widget « Text » (texte) : « Details » (détails) et « View » (affichage). Cliquez sur l’un de ces boutons, puis sur l’option « Link » (lien), dans la partie supérieure du widget :

Image montrant le processus en deux étapes pour associer un lien à un bouton. À côté du bouton se trouve le chiffre 1, qui indique que le bouton doit être sélectionné en premier. Le chiffre 2 est inscrit à côté de l’option de lien, ce qui indique que celle-ci doit être sélectionnée en deuxième.

Ajoutez le nom du lien et la destination de votre choix. 

L’interface d’ajout de lien. Des champs permettent d’indiquer le nom et la destination du lien.

Cliquez sur « Add Link » (ajouter un lien) pour effectuer la modification.

Modifier le style et l’emplacement des boutons

Vous souhaitez modifier le style des boutons ou leur nombre sur des fiches? Vous pouvez facilement personnaliser les boutons à votre guise en entrant dans le code HTML.

Aux lignes 16 et 17, vous trouverez du code correspondant aux boutons. Les noms par défaut des boutons sont « Details » (détails) et « View » (affichage), mais n’hésitez pas à les personnaliser selon vos préférences. N’oubliez pas que la longueur des noms des boutons (en nombre de caractères) peut avoir une incidence sur leur apparence.

Bloc de code HTML permettant de personnaliser les boutons. Des parties des lignes 16 et 17 sont mises en évidence pour montrer aux lecteurs où se trouve le texte des boutons.

Si vous souhaitez supprimer un bouton, il vous suffit de supprimer la ligne correspondante (16 ou 17) et de faire passer le paramètre « width » (largeur) de « half » (demi) à « full » (entier).

Code HTML avec la ligne 17 supprimée.

Si vous souhaitez ajouter un autre bouton, il vous suffit de copier la ligne 16 ou 17 et de la coller sur la ligne suivante, en réglant le paramètre de largeur à « 33% » sur chaque ligne. Modifiez le pourcentage au besoin pour allouer l’espace souhaité à chaque bouton.

Modifier la couleur d’arrière-plan

Pour rehausser encore plus l’aspect de vos fiches, personnalisez leur couleur d’arrière-plan. La couleur d’arrière-plan par défaut est le blanc, mais vous pouvez facilement la remplacer par une autre couleur en remplaçant « white » (blanc) dans le paramètre ci-dessous.

Bloc de code HTML avec une partie de la ligne 3 mise en évidence, là où le lecteur peut indiquer la couleur d’arrière-plan de son choix.

Procédez ainsi pour toutes vos fiches (le code pour les mises en page des trois fiches est situé aux lignes 3, 26 et 49).

Le résultat

C’est à vous de décider si vous devez tout personnaliser de fond en comble, ou seulement quelques éléments ici et là. Quel que soit votre choix, vous obtiendrez une apparence plus personnalisée et originale pour votre page ArcGIS Hub!

Trois fiches personnalisées côte à côte, avec la vignette, le titre, la légende et la description personnalisés.

Ce billet a été écrit en anglais par Grace Kim et peut être consulté ici.