How to add images to your website:

WebGears allows you to publish images on your website. In order to display an image on your website successfully, you need to prepare it (optimise it) for online viewing. You can do that by using compatible image-editing software.

Step 1. Image optimisation

Photos from your camera are high quality, but they are also massive in file size (megabytes) and visual dimensions (centimeters/pixels). The goal is to scale and crop the images in such a way as to reduce the size of the images while preserving the quality of the original. Try to keep the size of your images smaller than 300K. You can do so by scaling the height or width (whichever is bigger) to 800 pixels (px). When exporting or saving your optimised images, select JPG/JPEG format and adjust the quality to achieve the desired size, quality, and compression.

Step 2. Opening the section for editing

Once you have your image prepared/optimised for online viewing, log in to WebGears and proceed to the section in which you want to place your image.

Click on the gear icon to enter editing mode for that section. The pop-up window with all editing controls will appear.

Step 3. Uploading and placing the image

Use the form at the bottom of the editing window to upload your image.

Once you select your image, you will see an upload progress indicator, as below.

Wait until the link for your image appears. Click somewhere within the content, placing the cursor where you want the image to be placed, and then click on the button, 'Place as Image'.

This will place your image within the content.

Step 4. Formatting the placed image

Now you can click on the image and adjust its properties. You can align the image, just as you align text, to the left side, right side, or center . Aligning the image to the left or right will wrap the text around the image nicely.

Step 5. Making advanced changes to the placed image

To change certain advanced settings, click on the image and then select the 'Insert/Edit Photo' icon from the toolbar.

Here you can specify the description of your image for Accessibility/SEO purposes.

Clicking on the Appearance tab will give you some formatting options. You can change the image alignment, dimensions (specify only one value; the other will automatically scale, preserving the image’s proportions), vertical and horizontal space (distance from text and other elements wrapping around the image), and border size. Don't be afraid to experiment with these settings – it’s the best way to learn.

Step 6. Saving the content

Once you are finished editing the image and its placement, click on the save icon to publish the section, or repeat the process by uploading another image (Step 3).

Step 7. Logging out

You should log out of WebGears after you’re through. To do so, click on the 'Log Out' option from the option bar at the top of the page.