Learn how to manage notices and alerts on your colorado.gov website.


Adding Images with Media Cards

Video Transcript


Media Cards are the best way to display images on individual pages (as opposed to embedding images into the body field of a page). The benefits are numerous:

  • Images are automatically scalable and adjust for mobile.
  • They can be linked to other pages and documents.
  • Images in Media Cards require alternative text, helping your site comply with modern accessibility standards.
  • Images used in Media Cards only have to be uploaded once, but can be used across multiple pages.
  • Deleting a Media Card does not delete the image, preserving your site assets.

Once you have learned how to use Rows & Cards, you are ready to use Media Cards! Follow the instructions below to learn how to add Media Cards to your pages.

Step 1: Upload the Image to the Media Library

If this step is not already completed, follow the instructions outlined in our Uploading Images to the Media Library tutorial.

Step 2: Open the Rows and Cards

When editing your page, click the Rows and Cards tab.

Rows and Cards Tab screenshot

Step 3: Select the Row to Edit

Drill down to the row you need to edit or create a new row.

Step 4: Add the Media Card

Under Cards Content, click the drop-down arrow and select Add Card - Media.

Add Card - Media screenshot

Step 5: Open the Media Library

Click Media Card Item to open the Media Library.

Media Card Item Dropdown screenshot

Step 6: Select the Image

Scroll down and click on the image you want to display.

Images should have a visible thumbnail. Under the Source column, it should say Image.

Media Card - Choose Image screenshot

Step 7: Confirm your Selection

Scroll down inside the Media Library window and click the blue Use Selected button.

Media Card Use Selected Button

Step 8: (Optional) Add a Link

If you need to make the image a clickable link, add the link to the URL field.

  • If the link is pointing to an external webpage, copy and paste the entire URL in the Link field.
  • If the link is pointing to a page inside your website, simply search for the page name. 
Media Card Link Field screenshot

Step 9: (Optional) Add a Media Caption

The Media Caption field displays a small description below the image. If you wish, add a short description for your image here.

Media Card Media Caption Field screenshot

Step 10: Save your Changes

When you are done make your page edits, click Save.

Basic Page Save Button screenshot

Purple Comic Talk Bubble
Other Resources

Check out some of these other resources that may help. 


 Self-Study Training Curriculum

Search All Topics (COMING SOON!)

Are you an EPM?

Entity Project Managers can open help tickets with our Service Desk.

 Open a Help Ticket

 (303) 534-3468