Position images

On certain pages, once you have uploaded your images, you need to manually position them.  If you are unsure, firstly upload the images, and save - if they appear on the page, then you don't need to follow these instructions.

  1. Navigate to the page you want to edit, and click on the 'Edit' button.
  2. Upload your images if you haven't already done so.
  3. Scroll upwards to the body text area and locate the paragraph, heading or other part of the text where you want an image to appear.  For best effect, you should always insert your cursor at the beginning of a paragraph or other text element.
  4. Click to place a cursor in the exact place where you want to insert the image.
  5. Next, scroll down to your uploaded images, and locate the image that you want to insert.
  6. Click on the 'Insert' button.  If there is no insert button, then that means your images are positioned automatically, and you don't need to follow these instructions.
  7. The image will appear inside of the body text field where you put your cursor.
  8. Scroll to the bottom of the page and click 'Save' when you are finished with your edits.

Changing size

You can reduce the size of any of the images in your page.  The software will let you enlarge photos too, but generally that's not a good idea as the quality will decrease.  (If you really need larger images throughout your site, contact us and we can change the setting).

Once you have inserted your photo, you can click on it within the body text, and you will see little 'handles' at the corners.  You can drag these to change the image size.  Note that the image automatically scales in both directions at once - anything else looks pretty silly as the people get squashed!  If you want to crop the image down and exclude part of it, then you should use your photo-editing software before you upload it.

Floating and alignment

If you do nothing but insert the image, the AlbanyWeb software will leave the image where you placed it, and no text will flow around it.  Here are some ways you can manage the placement of your image:

Leaving the image on the page free of any text

There are circumstances where you do not want the text to float around an image - for example, if the image itself is quite large, or if you want to keep the image near a certain paragraph.

To keep the image clear of any text:

  1. Before inserting the image, go to the body text field and make a blank paragraph where you want to insert the image by clicking the return key twice.  Leave the cursor on the blank paragraph.
  2. If you would like the image to be centred, click on the 'Center' button (4th from left).
  3. Insert the image as described above.

Floating the image left

Making the image float left means that the image will stay on the left hand margin, and the text will flow around the image:

Insert the image, following the instructions above.

  1. Double click on the image.
  2. This will open an extensive dialog box.  At the bottom of the box there is an Alignment drop down list which you can change.  Select 'left' from this list and click save (don't change any other settings unless you are quite experienced).
  3. The software will add suitable margins to make it look nice. 

Floating the image right

Making the image float right means that the image will stay on the right hand margin and the text will flow to the left around the image.

  1. Insert the image, following the instructions above.  Note that for a successful right float, you need to place your cursor at the beginning of the paragraph or heading where you want to attach the image.
  2. Double click on the image.
  3. This will open an extensive dialog box.  At the bottom of the box there is an Alignment drop down list which you can change.  Select 'right' from this list and click save (don't change any other settings unless you are quite experienced).
  4. The software will add suitable margins to make it look nice. 

Checking your image placement

The appearance of the image within the edit form is not exactly how it will appear once the page is saved.  If you want to check the image appearance before saving and publishing a page, then you can use the Preview function on the editing page.

If you scroll to the bottom of the editing form, you will see a 'Preview' button next to the 'Save' button.  Click this, and you will see how the page will appear once it is saved.

If you keep scrolling down, you will return to the editing form, where you can continue to make changes.

 

Things to consider when adjusting the placement of an image

 

  • Adding an image to a web page is not the same as adding it to a document that you might print out.  Images, text, color and other web page effects are meant to move about and slide around each other.  This makes it possible to read on many different sizes of screens.  So you have to accept that image placement is always a little approximate, to allow for that movement.
  • Really precise image placement requires a good knowledge of html and css.  If you have a need for very precise image placement, please contact us for a bit of help or extra training.

Working effectively with images is a balancing act, if you want to empower your editor to add and change images...

Recently, Google increased the security warnings on the Chrome browser.  Chrome now generates a warning for any website without a...

One of the most useful ways to keep in touch with your audience, customers or regular readers is to send...