Adding Images

Introduction

This page begins by showing you how to add an image to a Text Block. Next, it will show you how to add an image directly to your Warehouse. If you would like to learn how to add one or more images to an Image Gallery with a slideshow function, see Manage Image Galleries.


There are two methods for adding an image to a Text Block. The first allows you to insert an image directly into the content of your Text Block. The second method offsets the image from the main body of content, and can be used for special purposes, such as creating Image Blocks. 

Adding an Image with the WYSIWYG Editor

METHOD ONE: Step 1 - Use Your WYSIWYG Toolbar

The WYSIWYG toolbar can be used to add an image to your Text Block, Post, or FAQ. Using the toolbar will add an inline image to your main body of content. Click the button with the green tree icon, on the second row of the toolbar, as shown in the example image. This is the "Insert/Edit Image" button.

Return to Top
Step 2 - Select Your Image

Clicking on the "Insert/Edit Image" button will create a pop-up window with five tabs, as shown in detail below. There are three ways to insert an image into your Text Block from this window. The method you choose depends on where your image is located.

1. Click the "Browse" tab if the image you are inserting is already uploaded to your Web site's Warehouse.

Any previously uploaded image will be available to you, from the Warehouse. You can select a Warehouse image by using the "Browse" tab to search for your desired image. Type the image's filename into the field labeled "Filter," then press the Enter/Return key on your keyboard, and locate your image on the list that appears. Once you have found the correct image, click on the preferred resolution, from the list located to the right of the image thumbnail.

2. If the image you are inserting is on your computer, click the "Upload" tab.

Once in the "Upload" tab, click the large button labeled "Choose file for upload." A file browser will then pop up in a new window. Use this window to browse to the folder or directory where your image is saved. When you have found the correct file, double click it to begin the upload process.

After double clicking your file a new window will appear, titled "Upload Image." Wait for the upload to complete, then click the dropdown menu, labeled "Select this image." Click on "Original" from the dropdown menu to insert the image at its default resolution, or select a new resolution from the list, if desired.

Using the "Upload" tab to insert your image will add it to your Web site's Warehouse. Give your image files relevant, unique names, so that they can easily be found by searching your Warehouse.

Insert/Edit Image window

  • General: This tab shows you a preview of your image, and allows you to enter a title and description. 
  • Appearance: This tab is used to set the alignment (left, right, or center), dimensions (image display resolution), padding (blank space surrounding the image), and border.
  • Advanced: This tab should only be edited by experienced HTML users.
  • Browse: This tab is used to select images that have been added to your Warehouse.
  • Upload:  This tab allows you to insert an image from your computer's hard drive into the Text Block.
Return to Top
Step 3 - Add a Description / Alt Tag Text to your Image
After you have selected an image, locate the "Description" field in the pop-up window. Here, you will enter the "Alt" tag text for the image, which should be a description of the information provided in the image, or if the image is used to perform an action (such as linking to another page), a description of the action the image performs.This text is read aloud to those using a screen reader, and shown in place of the image in web browsers that have images disabled. Return to Top
Finish - Insert Your Image

Your image should now be visible in the "Preview" box, located in the "General" tab. Set your preferred options in the "Appearance" tab, and click the "Insert" button to place your image into the TextBlock. If you would like to change the appearance or properties of your image after inserting it into the Text Block, simply click the image to select it, then click the "Insert/Edit Image" button.

Return to Top
METHOD TWO: Attach an Image to the Properties Section

The second method of adding images allows you to upload a new image, or select an existing image from your Warehouse, and insert it into the "Properties" section of your Text Block. This method offsets the image from the main body of text in your Text Block, as seen in the example image, and can also be used to create Image Blocks.

This method requires the settings of the Text Block to be modified for the image to appear. Once you have added a new Text Block Group to your page (click the "Text Block" link, located under the "Add Content" section), click the settings link in the upper right hand corner. Next, locate the "Layout" field and select your desired format, as described in the following link: Table of Contents, Profile, or Image Blocks. After you have made your selection, click the "Submit" link to modify the Text Block.

After the settings have been updated, add your content to the Text Block. Note, you will be unable to add an image unless the "Content" section of your Text Block contains at least one character - if you would like to have a blank "Content" section, a single space can be entered to circumvent this. Once you have entered your content, locate the section labeled "Properties," underneath the editor's "Content" field. Clicking on the "Properties" label will expand this section.

If your image has been uploaded to The Digital Bell, click "Choose from warehouse." This will create a new window titled "Image Selector," which lists the images that are currently stored in your Warehouse. The search box at the top of this window can be used to locate an image by its title or file name. Once you have found the appropriate image, click the "Select" button to the right of the image. This will attach the image to your Text Block.

If you are adding a new image, click "Upload." After clicking the button, a file browser will appear. Locate the image on your computer's hard drive, then double-click the file to begin the upload process. Once the upload is complete, click the "Select this image" button to add the image to your Text Block. 

When the image has been attached, and the thumbnail is shown in the "Properties" section, click the "Submit" button to complete the process. If you have uploaded a new image, please see Uploading an Image to the Warehouse - Step 2 to provide "Alt" tag text for the image This step will explain how to naviagate to the "Images" section of the Warehouse, and add "Alt" tag text to your newly uploaded image.

Note: Unless each individual Text Block in your Text Block Group will contain an image, it is recommended that you create a separate Text Block Group (click the "Text Block" link under the "Add Content" heading, instead of clicking the "+New Text Block" button at the bottom of an existing group) for each image.

Sample Key Issues

Return to Top

Uploading an Image to the Warehouse

Step 1 - Upload Your Image

The images uploaded to your Web site are stored in the Warehouse. You can add, edit, or delete images, from the Warehouse section of your Digital Bell Dashboard. All images stored in the Warehouse can be inserted into any image-compatible Content Element, such as Text Blocks, Posts, or Image Galleries.

The following steps will focus on how to upload an image from your computer directly to the Warehouse.

Begin by placing your mouse cursor over the "Warehouse" link, located at the top of your Digital Bell Dashboard, to create a drop-down menu. Next, place your cursor over the "Files" link, to create a sub-menu. Finally, click the link labeled "Images," as shown below.

Clicking the link brings you to the "Images" section. Next. click the "+Add Image" button, located in the right margin of the page, to use the "Upload Image" form.

To select the image file you would like to upload, click the button labeled "Upload Files" to bring up a file browser. Use this file browser to navigate to the folder/directory where the image file is saved. After locating the correct image, double click on the file to being the upload. When the upload is complete, click the button labeled "Done."

Clicking the "Done" button will add the file to a list on the "Upload File" form. To upload more than one image, click again on the "Upload Files" link, and repeat the process described above. Once the image(s) have been added to the list, click the "Submit" button to add them to the Warehouse. The new image(s) can now be attached to Content Elements on the site.

Note: Ensure your image has a unique and memorable file name. The file name can be used to search for your image, when adding it to Content Elements, such as Text Blocks or Image Galleries.

Return to Top
Step 2 - Add an "Alt" Tag Text Description to your New Image

After clicking the "Submit" button, you will be returned to the list in the "Images" section of the Warehouse. If you have uploaded an image through alternate means, such as in the "Properties" section of a Text Block, mouse over the "Warehouse" tab to create a drop-down menu, then mouse over the "Files" tab to create a sub-menu. Finally, in this menu, click the "Images" link to view the list of images uploaded to the Warehouse.

Here, locate the image you have uploaded, and click the Edit button (pencil icon) to the left of the file name. This will bring you to the "Edit Image" form. Here, locate the "Title" field - the "Title" field's text will be used as the "Alt" tag text. Enter a description of the information in the image, or if the image is used in an action (such as linking to a page), enter a description of the action the image performs for a visitor. This text is read alout to individuals using a screen reader, or shown in place of the image in web browsers that have their images disabled. 

Return to Top
Step 3 - Insert an Image from Your Warehouse into a Text Block

Once the image has been uploaded to your Warehouse, it can be added to any image-compatible Content Element. This step will explain how an image from your Warehouse can be added to a Text Block.

While creating or editing a page's content, create a new Text Block, or click on an existing Text Block to edit it. Next, click the "Insert/Edit Image" button, located in the WYSIWYG toolbar to begin adding your image.

Add/Edit Image Button

In the pop-up window that appears, click the "Browse" tab. Search for your newly uploaded image by typing the filename into the field labeled "Filter," then press the Enter/Return key on your keyboard and locate your image in the list of results.

Browse Tab

Once you have found the correct image, click on the preferred resolution from the options to the right of the image thumbnail. After clicking the appropriate resolution, you will be returned to the "General" tab of the pop-up window. Here, if the "Description" field is blank, or a new description is needed, enter the text for the image's "Alt" tag. This text will be read aloud to individuals using a screen reader, and shown in place of the image in web browsers that have their images disabled. Once the image is ready to be added, click the "Insert" button to add it to the Text Block.

Select Image Resolution

Return to Top
Finish - Complete Your Text Block

Once you have inserted the image and, if necessary, added or edited any additional content, click the "Submit" button to update or create your Text Block.

Uploading images directly to the Warehouse can be useful if one team member is creating or selecting images for upload, while another member is using them to build the Web pages where they will appear.

Return to Top