How to add a picture to a web page?

This FAQ describes step by step how to add a picture to a web page when writing an article for the nabo.org.uk website. Please follow the instructions carefully. This will save you time in the long run.

  1. Click at the point you want to insert the picture. (NB Add the "Read More" AFTER inserting any pictures)

  2. Click on the "Edit/Insert Image" icon: Image Icon This will bring up an Image Properties pop-up box.

  3. You can insert a picture from the internet, or from our website server, or from your computer. Follow the relevant instructions below:

    1. To insert a picture from the Internet:

      1. Having COPIED the web address of the IMAGE (not the web page) onto your clipboard,

        PASTE the address of the IMAGE into the URL box on the "Image Info" tab.

      2. Click in the Alternative Text box, and your image should appear in the Preview Box.

    2. To insert a picture that is already on the website server (it may or may not be already used somewhere on nabo.org.uk):

      1. Click on the "Browse Server" button on the "Image Info" tab. This will open another Resources browser window, with a list of the available image files.

      2. Click on the image you want to use. The browser window will close and your selected image will appear in the Preview Box.

    3. To insert a picture from your computer:

      1. Click on the "Browse Server" Button.

      2. Double-Click on the "stories" folder – this will bring up /stories/ at the top.

      3. Click on the "Browse" Button.

      4. Locate the image on your computer, select and choose (Open) it.

      5. Click on the "Send it to the Server" button.

      6. When the "Upload a new file in this folder" reappears, click on the X button (top right corner) which takes you back to the Image Properties: Image Info tab, and the picture should appear in the Preview Box.

  4. Select the "Alternative Text"/"Short Description" box and type in a short description of the picture.

  5. You can resize the displayed picture by changing Width or Height. If you want to add a (white) border all the way around, space to the sides or above or below your picture, enter a number in the Border, HSpace and VSpace boxes respectively. (Experiment!)

  6. Use the "Align" choices to determine where the adjacent text will appear in relation to your picture. The changes will appear in the Preview Box.

  7. If you want to make the picture click-able, to open another web page:

    1. click on the Link tab.

    2. PASTE the web address (having COPIED it to the clipboard) you wish to link to, in the URL box.

    3. In the "Target" box, Click on "not set" and select “New Window (_blank)” from the dropdown menu.
  8. Hopefully, you have now achieved your object, so click “OK”.

Leave a Reply

Your email address will not be published. Required fields are marked *