Create Custom Image Cards in ArcGIS Hub

Dive into the world of ArcGIS Hub customization as we explore the potential of its widgets! Beyond the standard display of thumbnail images and item icons from your ArcGIS applications, this blog will guide you through customizing and elevating your Hub pages. If you're eager to infuse a personal touch into your gallery cards, from tweaking thumbnail images to adjusting buttons and background colours, you're in the right place. Join me in this blog as I walk you through the steps to craft custom cards that mimic the gallery card but with a flair of individuality. Let's unlock the possibilities of customization together!

Efficient image hosting platforms for your ArcGIS Hub pages.

First, you will need a reliable source to store and maintain the images you would like to showcase on your custom card. You can consider a couple of options for hosting your images online. The two platforms below are the most popular —and dare I say, the best — platforms to host your public images.

ArcGIS Online

• Part of the ArcGIS ecosystem
• Can upload files up to 500 GB
• Easy to obtain public permanent image URL, which can be used on ArcGIS Hub and other online platforms

GitHub

• Can upload files up to 2 GB for GitHub Free account
• Easy to obtain public permanent image
• Can create multiple repositories
• Some image compression

Whether you use ArcGIS Online or GitHub, you’ll be able to access the public image URL, which can be found on the bottom right of the item page in ArcGIS Online.

Create custom cards on ArcGIS Hub using the public image URL and HTML

Accessing the HTML interface

Once you have your public image URL handy, follow the steps below to access the HTML of your card:

1. Click on Layout.
2. Drag and drop the “Row” configuration onto the page.
3. Drag and drop the “Text” widget into the Row.
4. In the Text widget, click on the Insert (+) sign and click on “Cards”. The widget will now be populated with three cards with the default images.

5. Click on “</> Edit in HTML” button located on the bottom of the widget.

Congratulations! You've successfully entered the HTML interface of the Text widget, opening the door to your customization journey!

Replacing the default image

One of the first lines you will want to change is the link to the image of your choice. Simply replace the URL next to src = with the public URL of your image. You can locate this code on lines 5, 28 and 51 on the default HTML. You may also change the image’s alternative information located on the same line of code.

Save your changes to the HTML code block by clicking Apply on the top right corner. You will see that your custom cards have updated with the new image!

Changing the Captions and card description

You may also want to change the captions and description to match the context of your images. For the captions, change lines 7, 30 and 53 to the desired text:

For the description, change text on lines 14, 37, and 60 between <p slot="subtitle"> and </p>:

To lock in your changes, click Apply at the top right corner.

Linking the card to your item

After exiting the HTML window,  within the text widget, you will see two buttons: Details and View. Click on one of the buttons, and then click on the “Link” option at the top of the widget:

Add the link name and destination of your choice. 

Click on “Add Link” to make the change.

Changing the button style and placement

Interested in altering the number of buttons on the card(s) or changing their style? You can easily customize the buttons to your liking by entering the HTML.

On line 16 and 17, you’ll find code lines indicating the buttons. The default names of the buttons are “Detail” and “View”, but feel free to personalize these names to your preference. Please keep in mind that the character length of the button names can impact the appearance of the buttons.

If you would like to delete one button, simply delete one of the lines (either 16 or 17) and change the width parameter from “half” to “full”.

Should you wish to add more buttons, simply copy and paste line 16 or 17 onto the next line, adjusting the width parameter to “33%” for each line. Modify the percentage as needed to allocate the desired space for each button.

Changing the background colour

To enhance the look of your custom cards even further, customize the background colour of the card. The default background colour is white, but you can easily switch it to another colours by replacing “white” in the parameter below.

Do this for all your cards (code lines for 3 card layouts are located at 3, 26, and 49.)

The final result

It is up to you whether you would like to customize everything from start to finish, or just bits and pieces here and there. Regardless of your choice, you will be left with a  more customized and unique look for your ArcGIS Hub page!