Adding an Image to a Content Block (NEW)

 For instructions using the legacy Web Content Editor, please see Adding an Image to a Content Block (Legacy).

TABLE OF CONTENTS

• Quick Guide
• Full Guide
  • Upload new image
• Edit image properties
  • Replacing an existing image

Quick Guide

1. In the Web Content Editor, click the Image icon to open the Add Image window.

2. Paste the image URL in the field, or click Browse... to upload a new image.

3. In the Resource Browser, navigate to your hub’s folder → Images folder.

4. Click Choose File, select your image from your file browser, then click Open.

5. Confirm the filename appears beside the Choose File button, then click Upload.

6. Select the uploaded image from the folder.

7. The image URL will display in the Add Image window. Enter a brief description in the Alternative Text field, then click Insert.

8. Preview the image in the editor.

   • Note: The image width defaults to 100%, but you can adjust it to a percentage or pixel value. The height scales automatically.

9. Click Save as Draft or Submit for Approval to finish.

Full Guide

1. While in the Web Content Editor, click the Image icon to open the Add Image window.

2. Paste the URL of your image in the field, or upload a new image by selecting the Browse... button. 

Upload new image

3. In the Resource Browser, navigate to the folder of the hub you are currently working on, then to the Images folder.

4. In the bottom right corner, select the Choose File button. Select the image you want to upload from your file browser and click Open. 

5. You should see the filename shown beside the Choose File button. Click Upload. The image will now upload into the folder above. 

6. Select the image in the folder above. 

7. The image URL will now show in the Add Image window. Add a brief description of the image to the Alternative Text field. When you are finished, click the Insert button.

9. You may now preview the image in the editor field.

10. Click Save as Draft or Submit for Approval to finish working on your Content Block and preview it on your web page.

Edit image properties

You may edit an existing image's properties by clicking the image in the editor and selecting the Image icon in the Toolbar or Quick Access Menu.

Options include: 

• Adjusting the maximum width of the image
• Add a caption
• Replacing the image with a new one

Replacing an existing image

1. Select the image you'd like to replace in the editor.
2. Click the   Image icon.
3. In the Image window, click the Browse... button.
4. Repeat the above steps under Upload new image to add your image to the File Browser.