Understanding the Media Library

You can find the Media Library on any page you create. To see the full Media Library list, click the "Content" button. Then, hover over "Media" to find the "Media Library" in the dropdown.

The Media Library stores all document files, URL embeds, and images uploaded to the site. 

This is the current list of media items that are available to upload to the media library:

  • ArcGIS Visualization: Embed an ArcGIS map or app on a page easily, just providing the URL.
  • Crowdiff: Embed a Crowdiff ID
  • Data & Insights: Embed a Data & Insights widget
  • Document: A downloadable document, like a Microsoft Word file or PDF
  • Flickr: Embed a Flickr image or slideshow from a URL embed
  • Google Calendar: A Google Calendar from a embed URL
  • Google My Map: Embed a public Google My Map embed URL
  • Image: An image to be used in your site
  • Power BI Visualization: Embed a Power BI visualization on a page using the visualization URL or embed code
  • Qualtrics: Embed a Qualtrics embed from a URL
  • Remote Video: An embedded remote video from a site like YouTube or Vimeo
  • Tableau Visualization: Embed a Tableau visualization on a page easily, just providing the visualization URL

Image alt text location

The Media Library is also where you can easily locate and review the alt text for your images to make sure they follow accessibility guidelines. This is also where you can edit your media item name or update an old image file to be replaced with a new image file. 

Special note on Media Library image sizes

If you are planning to place images in the Hero section, they will need to be a minimum of 1440px x 604px, but ideally to scale for retina, we like to double the size 2880px (wide). 

Our rule of thumb is the image should always be equal or bigger to the size it will be displayed.

We are trying to keep all images on the site to a 4:3 ratio, but the hero is a bit more custom. We have allowed for uploads of source image at up to 100MB with the focal point to be determined at the Media Library level. If you are planning to use them elsewhere i.e. promos, they should work fine in terms of size. Try to keep everything to a minimum of 1440px for width. 

Images used as the feature on Basic pages, Promos, and Visual Link Collections follow the 4:3 ratio, meaning that for every 4 pixels of width there should be 3 pixels of height. To calculate the image ratio: Take the height of your image and multiply it by 4/3 to compute the width or take the width of your image and multiply it by 3/4 to compute the height. You can use this image ratio calculator.

If you need to adjust your image size and do not have Adobe Photoshop, you can use one of these free online tools:

Photopea - a free online photo editor

PicResize - a free picture resizing tool

1

Log in to your site

You can login to your site from login.iowa.gov.

how to login to DX website

Each person on your agency team has a specific user role for the website. These roles set permissions. They control who can edit, review, and publish content. You can ask for a role change or remove a role. Just submit a ServiceNow support ticket if you need help.

How to find the Media Library

You can easily find the media library by hovering over Content in the top left corner, then over Media, and select Media library.

How to find the media library example
2

How to find the Media Library

You can easily find the media library by hovering over Content in the top left corner, then over Media, and select Media library.

How to find the media library example

How to update alt text for images

To update the alt text for your media images, go to the media library. Then, in the search filter, select "Images." This will show all the images on your site. From here you can search for the name of that image that needs to have the alt text updated.

How to update alt text screen shot

Click the edit button. This opens the media item edit section. Here, you can check the image's alt text and title. You can also replace the image file with a new version if you want. Once you are done all you have to do is select save. 

Update alt text screen shot

If the editorial checker flags an image on a page, you can still update its alt text. Even if you're unsure how to find that image in the media library, it’s easy to make the change right in the page.

Just click the edit button on the page with the flagged image. Then, in the text field, select the embedded image. This will show a small toolbar pop-up. 

Alt text pop-up tool bar screen shot

Here, you can choose the eye icon to change the alt-text. You can also mark the alt-text as "decorative."

"decorative"

Special Reminder: Alt-text is ordinarily set as decorative if the information in the image is redundant. If the meaning and purpose of an image is already covered within the text that image is embedded in, then there is no need to make screen reader users listen to the same information twice.

3

How to update alt text for images

To update the alt text for your media images, go to the media library. Then, in the search filter, select "Images." This will show all the images on your site. From here you can search for the name of that image that needs to have the alt text updated.

How to update alt text screen shot

Click the edit button. This opens the media item edit section. Here, you can check the image's alt text and title. You can also replace the image file with a new version if you want. Once you are done all you have to do is select save. 

Update alt text screen shot

If the editorial checker flags an image on a page, you can still update its alt text. Even if you're unsure how to find that image in the media library, it’s easy to make the change right in the page.

Just click the edit button on the page with the flagged image. Then, in the text field, select the embedded image. This will show a small toolbar pop-up. 

Alt text pop-up tool bar screen shot

Here, you can choose the eye icon to change the alt-text. You can also mark the alt-text as "decorative."

"decorative"

Special Reminder: Alt-text is ordinarily set as decorative if the information in the image is redundant. If the meaning and purpose of an image is already covered within the text that image is embedded in, then there is no need to make screen reader users listen to the same information twice.

How to add Media to a Basic Page

To add the media image that you uploaded into your media library, into a basic page, you'll use the "insert media" within your WYSIWIG toolbar.

insert media button within a basic page

Once you select that you can then scroll down to search and view the media items that you currently have within your image library.  

examples of searching for media library items from a basic page

You can also add new media items to your media library and page all at once.

Example of adding a media item to the media library from a basic page

Once you click on the "Insert selected" your image will embed onto your page

4

How to add Media to a Basic Page

To add the media image that you uploaded into your media library, into a basic page, you'll use the "insert media" within your WYSIWIG toolbar.

insert media button within a basic page

Once you select that you can then scroll down to search and view the media items that you currently have within your image library.  

examples of searching for media library items from a basic page

You can also add new media items to your media library and page all at once.

Example of adding a media item to the media library from a basic page

Once you click on the "Insert selected" your image will embed onto your page

How to find Media from a URL

If you have the media file URL but not the name, try this: go to the URL and add "/download?inline" at the end.

Finding a media file example

Replace it with "/edit" and press enter. You will go to the media item edit page. There, you can find the media item name. Use this name to easily locate it in the library.

5

How to find Media from a URL

If you have the media file URL but not the name, try this: go to the URL and add "/download?inline" at the end.

Finding a media file example

Replace it with "/edit" and press enter. You will go to the media item edit page. There, you can find the media item name. Use this name to easily locate it in the library.