There are several ways to add images in a website:

• Picture Block — The Picture Block holds only one image and is the easiest way to display a single image.
• Picture Album — Holds collections of images with the possibility of displaying names and descriptions.
• General Text — In general text, pictures may be inserted along with text and links. General text is found in the General Block and in other blocks like the Articles Block and Bulletin Boards Block.

Steps: How to Add Images in General Text

1. Add a General Block to the web page. How to Add a Block

2. Place the cursor in the text editor where the image will be added and click on the "Insert/Edit Image" icon (small tree).

3. Choose an option in the “Get Pic from:” drop-down menu or enter in a URL.

a. Hand entered URL – Type a specific internet address for the image. See: Finding an Image URL

b. Your Quick Album – Choose an image from your quick album at HotDoodle. The HotDoodle Site Content Selector window appears, then navigate to the album and click on an image to select it.

c. Your Other Album – Choose an image from another album at HotDoodle. The HotDoodle Site Content Selector window appears, then navigate to the album and click on an image to select it.

d. Your Site – Choose an image already incorporated into the website. The HotDoodle Site Content Selector window appears, then navigate to the image location on the website and click on the image to select it.

e. Upload – Choose an image file from the hard drive and upload it to HotDoodle.

f. Standard Library – Choose an image from the stock libraries offered by HotDoodle and other free websites. Navigate to the web page and click on an image to select it.

4. Click on the "Choose File" button.

5. Choose the settings for the image.

• a. Choose the album to store the image in once uploaded.
• b. Click to add a check mark in the box next to [Overwrite] if the image is an updated version of an image already on the website.
• c. Choose a name for the image. This name will be used as the image name in the album, if no name is entered, the file name will be used.

6. Specify the size the image will display.
HotDoodle can only display images at a max size as the pixel dimensions of the original. HotDoodle can scale images down, but anytime an image is displayed smaller than the original, quality may be lost. To retain image quality, display images at their orignal size. 

7. Click on the "Upload This Image" button.

8. Add an image description and title (optional). The image description will display as a pop up hint when hovered over.

9. Click on the "Insert" button.

After you have entered your image, HotDoodle has options for positioning that image alongside the text. These options are accessible under the Image Appearance tab.

Steps: How to Edit and Position Images

1. From the Edit General Block screen, click on the image to position. It will highlight when selected.

2. Click on the "Insert/Edit Image" icon (small tree).

3. On the Edit Picture pop up window, click on the "Appearance" tab.

4. Select settings for image positioning and size.

5. Click on the "Insert" button to apply the changes.

Alignment - This drop-down menu selects how the image will align with surrounding text. The preview window shows an example when an option is selected. Options include:

• Baseline
• Top
• Middle
• Bottom
• Text Top
• Text Bottom
• Left
• Right

Dimensions - These fields specify the size to display the image. When the Constrain Proportions checkbox is checked, only one dimension is necessary to enter and the other will be automatically calculated based on the proportions of the original image. Remember, that displaying images at a size other than the original size, there may be a loss in quality.

Vertical Space - These fields allow spacing to be placed between the image and surrounding text. The values are in pixels for these fields. The fields include:

• Vertical Space Top
• Vertical Space Bottom
• Horizontal Space Left
• Horizontal Space Right

Border - This field allows specification of the number of pixels to make the border that surroundings the image. Some browsers automatically place a border around any image that is also a link. Setting this field to zero will remove that automatically generated border.

Style - This field lists the positioning values chosen above. Values can be removed by erasing them from the Style field.