Image

Insert an Image Item

1. Choose a sublayout placeholder area to add the Image rendering into.
a. Optimal sublayout will be a 4-8-sublayout or 8-4-sublayout (smaller area) if you wish it to display like example above.
Image 2

2. Select the Featured Content Card tab, then select the Featured Content Card rendering.

Image 3

3. Click the Select button. The Select Associated Content dialog box appears.

4. Select the Image item, then select the Create link.

Image 4

5. Enter the name of the Image.

Image 5

6. The Image rendering will appear in the page, ready to edit.

Image 6

Edit an Image Item

The Image rendering is made up of:
• Image
• Caption

1. From the Image toolbox, select the edit image icon.
Image 7

2. Select the Browse link to add in the new image. The Media Library dialog box will appear.
Image 8

a. Image – Insert an image
i. Browse - Insert or change an image found in the Media Library
ii. Properties – Modify the alt text description, image dimensions, and image spacing.
iii. Clear – Removes the existing image from the image field
iv. Refresh – Updates any changes to the image or properties

3. Select the Tree view icon to change the view to the content tree view.
Image 9

Image 10

4. Navigate to the agency folder in the Media Library and select the image you wish to use from the ones displayed. If the image is not displayed, then upload your new image.

5. Click the Select button to place the image on the page.

Image 11

6. The selected image now displays in the image field.
a. The image path displays above the image.
b. The image dimensions display (1350 x 900)
c. The alternate text displays. This is required to be filled out for ADA compliancy. If it is empty, select the Properties link to add it.
Image 12

7. Select OK.

8. Click on the Caption title to add text.
Image 13

9. Save your changes.

Example of Image when completed:

Image 14 This view displays in the following sublayouts:
• 3-3-3-3-Sublayout
• 4-4-4-Sublayout
• 4-8-Sublayout (in the smaller area) (Optimal)
• 8-4-Sublayout (in the smaller area) (Optimal)

• 6-6-Sublayout
• Full-Width-Sublayout
• Mobile view