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.

Adding an Image to a Text Block

Step 1 - Click the Insert/Edit Image Button

The WYSIWYG toolbar is used to add images to your Text Block. First, place your cursor at the point where you would like to add the image. Next, click the "Insert/Edit Image" button (green tree icon), on the second row of the toolbar, as shown in the example image.

Return to Top
Step 2 - Select Your Image

After clicking the button, the "Insert/Edit Image" window will appear. 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.

Previously uploaded images will be available in the Warehouse. Select a Warehouse image by clicking the "Browse" tab to search for your desired image. To search for an image, enter the image's file name or title into the field labeled "Filter," then press the Enter/Return key on your keyboard.

Locate your image on the list of results. Once you have found the correct image, click on the preferred resolution in the list to the right of the thumbnail (Original, Display, etc.). Finally, enter a title and/or description in the "General" tab, then click the "Insert" button to complete the process.

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 different resolution, if necessary.


Insert/Edit Image window

  • General: This tab shows you a preview of your image, and allows you to enter a title and description. This tab also allows you to insert an image directly from an internal or external URL.
  • Appearance: This tab is optional and 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
Finish - Insert Your Image

After uploading or selecting the image, it should be visible in the General tab's "Preview" box. Click the "Insert" button to place your image into the TextBlock.

To change the appearance or properties of your image after inserting it into the Text Block, click the image to select it, then click the "Insert/Edit Image" button to bring up the pop-up window.

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 HillTop 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.

Note:Uploading multiple, high resolution images (greater than 5.0 megapixels or 2580 x 2048) may result in extended upload times. Resizing images to 2000 x 2000 pixels, or lower, is recommended. To learn how to resize your images, see How to Resize your Images. 

Begin by placing your mouse cursor over the "Warehouse" link, located at the top of your HillTop 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 "Images" link will take you to a page that lists all images currently stored in the Warehouse. Click the "+Add Image" button, located in the right margin. This link takes you to the Image Upload form.

Click the button labeled "Upload Files," and a file browser will pop up in a new window. Use this file browser to navigate to the folder on your computer's hard drive where your image is saved. After locating the correct image, double click on the file, then wait for the upload to complete. Finally, click the button labeled "Done."

Your image is now uploaded to your Warehouse and available for future use.

Note: Ensure your image has a unique and memorable file name. The file name will 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 - Insert an Image from the 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, your image will be inserted into 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, while another member is using them to build the Web pages where they will appear.

Return to Top