Image Editable Widget

Image Editable Widget

Last updated 03.29.24

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.

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 Llibrary. (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 Text
This 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
WidthEnter the width of the image in pixels
AlignEnter the width of the image in pixels
  • Center
  • Left
  • Right
MarginUse margin to increase spacing between the Feature Callout 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 feature callout background area. This is especially useful when using a background color to provide space between the text/buttons content and the outside edges of the feature callout 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 URL
The URLs attached to the button can simply link to another page of the website, to an anchor link on a page, to a different website, can automatically open a pre-addressed email, link to a phone number or a document from the Media Library Application.

Uncheck the checkbox to access the Pages Application or the Media Library Application to select a page in the site or a document.
Image Link Target
Below 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 Before
Text entry area for simple title and descriptive copy right above the image. A light text editor is provided.
Content After
Text entry area for simple descriptive copy right below the image. 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.