Image Editable Widget

Image Editable Widget

Last updated 02.14.25

The Image Editable widget allows content editors to select a single image from the media library to display on the page with or without a clickable link. An optional feature is to add a caption above or below the image.

Tips on Image Sizes

Note that the widget only requires one image size for all devices therefore the size should work well on desktop first. Images will scale down proportionally on tablet and mobile. Image width is key while heights may vary depending on the design intent.
  • Full Page Width – 1920 pixels in width
  • Half Page Width – 960 pixels in width
  • Third Page Width – 640 pixels in width
  • All other small page widths should be at least 640 pixels to fill the screen on a mobile device. 


Image Size Settings in Properties

  • The widget can be added anywhere there is a blue plus add widget icon.
  • If the image selected is too small for the planned space, it can be scaled up a bit without losing too much image quality. The image size settings in the Properties popup can override the standard size of the image.
  • Note that increasing the size of the width only will automatically scale the height as well.
  • Both settings can be used to stretch the image both ways if required. However, it's important to remember that the site is responsive so the effect should be tested on tablet and mobile to avoid surprises.

Related Links & Videos

How to add a Image Editable Widget

1. Select where on the page you would like the image to appear
2. Click on the blue plus add widget icon   
3. Select the Image Editable widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Image Editable Widget Properties

5. In the Image Editable Widget properties pop up, select an image from the media library, add copy for SEO, URL, adjust width and height plus margins and padding.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Image Editable Widget

Hover over the Image Editable widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Image Editable Widget

Hover over the Image Editable widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Image Editable Widget Properties

PROPERYDESCRIPTION
ImageSelect an image from the Atlas Media Library. (Image size should not be more than 100kb)
Image TitleThe title attribute on an image adds a tooltip with title text to the image. Hovering the mouse over the image will display the tooltip. Optional but recommended.
Alternate TextThis attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error, or if the user uses a screen reader). Optional but recommended.
HeightEnter the height of the image in pixels – optional. If left blank the image will display at actual size.
WidthEnter the width of the image in pixels – optional. If left blank the image will display at actual size.
AlignSelect from:
  • Center
  • Left
  • Right
MarginUse margin to increase spacing between the widget and other widgets on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the feature callout background area

Bottom
User can select from 1-5 rems to increase spacing below the feature callout background area

Right
User can select from 1-5 rems to increase to the right of the feature callout background area

Left
User can select from 1-5 rems to increase spacing to the left of the feature callout background area
PaddingUse padding to increase spacing within the image background area. This is especially useful when using a background color to provide space between the image content and the outside edges of the image rectangle.

Top
User can select from 1-5 rems to increase room in the top of feature callout background area

Bottom
User can select from 1-5 rems to increase room in the bottom of the feature callout background area

Right
User can select from 1-5 rems to increase room in the right of the feature callout background area

Left
User can select from 1-5 rems to increase room in the left of the feature callout background area
Image Target URLSelect Page
Checked: clicking the Select Button opens a dialog box to access content pages within the current site only.
Note that it is possible to type directly in the Target URL field to add the URL to an anchor tag within the site, to type in a third-party URL to leave the site, to open an email (mailto: emailaddress.com) or link to a phone number (tel: 000-000-000).
Unchecked: opens dialog box to specifically access the Media Library to select an image or document.
Image Link TargetBelow are the targets to choose from:  
  • Default – this will open in the same tab of the browser and is typically used to move around within your site
  • Blank – this will open in a new tab of the browser and is typically used for links that leave your site
Content BeforeText entry area for simple title and descriptive copy right above the image – useful for an image header. A light text editor is provided.
Content AfterText entry area for simple descriptive copy right below the image – useful for an image caption. A light text editor is provided.

Image Editable Examples

Carrots Fresh from the Garden

This is optional content placed before the image.

Click image to read about carrots. This is optional content placed after the image. Set to 1920 pixels wide.

Clickable Image

Grain Bins Image 960 Pixels Wide

Clickable Image

Soybean Field Image 960 Pixels Wide

Cows in Field 640 Pixels Wide

Cows in Field 640 Pixels Wide

Cows in Field 640 Pixels Wide

Lightning Image 640 Pixels Wide

Distant Rain Image 640 Pixels Wide

Winter Weather Image 640 Pixels Wide

Rainbow Image 640 Pixels Wide