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


Adding Images to the Body Field

{"preview_thumbnail":"/sites/cms/files/styles/video_embed_wysiwyg_preview/public/video_thumbnails/o14iuQBy_Ao.jpg","video_url":"https://www.youtube.com/watch?v=o14iuQBy_Ao","settings":{"responsive":1,"width":"854","height":"480","autoplay":0},"settings_summary":["Embedded Video (Responsive)."]}

Video Transcript


While it is normally recommend to display images in Media Cards, there may some instances where you need to display the image in the body field of a page or basic card. Some reasons might include:

  • You need a little more control over the sizing of the image.
  • You want to wrap text around the image.
  • You want to add a title above the image.

Whatever your reason may be, follow the instructions below to add the image to the body field of your page or basic card.

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: Click the Media Browser Button in the WYSIWYG

Place your cursor where you want the image to appear. Then, click the E button in the WYSIWYG to access the Media Library.

Entity Browser Button screenshot

Step 3: Select the Image

Once the Media Library window opens, click the image that you want to display.

choose image screenshot

Step 4: Confirm your Selection

Scroll down and click the blue Use Selected button.

Media Card Use Selected Button

Step 5: Display Image as Thumbnail

In the Display As drop-down, choose Thumbnail.

Display Image as Thumbnail screenshot

Step 6: Choose the Image Size

In the Image Style drop-down, choose the image size. You have only five choices:

  • Small (100 x 100px)
  • Medium (250 x 250px)
  • Large (450 x 450px)
  • Extra Large (650 x 650px)
  • Original Size
Image Thumbnail Size Dropdown screenshot

Step 7: (Optional) Choose the Image Alignment

If you leave the default alignment to None, then all text will appear above or below the image. If you align the image Left, Center, or Right, then you can wrap text around the image.

Select the corresponding radio button to make your alignment choice if you need to change it.

Image Alignment Choices screenshot

Step 8: Click Embed

Clicking the blue Embed button will add the image to the body field of your page or basic card.

Embed Image Button screenshot

Step 9: Save your Changes

When finished editing your page, click Save to save your changes.

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