Home content top
 
 
 Help and Support 

Images

You can enhance the appearance of the articles, adverts and forms published on your web site by adding images to the document.

 

This article explains how to upload an image to the media view in your group and add it to your document.

Uploading new Images

  • If you haven’t logged into the web site already, do so now. Click the Login link at the top of the home page and enter the login name and password as supplied.
  • Once you have successfully logged in, click the web office link at the top of the home page. 
  • Select a  usergroup group folder where your images will be stored.  For example click on the youth group folder if the images relate to the youth group.
  • Select the media tab to display the existing images available in this group.
    Media tab not available?  Contact your site administrator to request the "documents and media" Web Office permission.
  • Click the  tasksbullet Add an image to groupname task link, located at the bottom of the page.
    Note:  You can also access this feature whilst you are creating a document; click on the insertimagebutton to add an image and select the same task link at the bottom of the window.
  • Click on the Browse button to display the Choose file dialogue box; select the .gif, .jpg or .png file you wish to upload and click the Open button.The file should now be displayed. Repeat the process for additional files you wish to upload.
  • When you've selected all the images you wish to upload click the Upload button.
  • Once the file has been successfully uploaded the image will be displayed below the image title. To edit the title, caption or dimensions of your image, click on the relevant image.
    Note: The title is used in the HTML alt attribute. The alt attribute appears to users who are viewing your pages without images, either because they have a disability or because they require a low bandwidth version of the page. The alt attribute is also used by search engines e.g.Google, to interpret the meaning of objects, so is therefore useful for Search Engine optimization. The alt attribute should therefore be descriptive of the image.
    The caption is displayed on the fullsize image where the "thumbnail image linking to the fullsize image" option thumbnaillinkis used.for your image.
  • Click the save button to complete the upload process; the media view will be displayed shortly afterwards with the new image added.
    Note:  Please ensure that you have copyright permission for any images you wish to use on your web site.

 Adding Images to Articles and Adverts

Within the document or advert editors select the insertimagebutton to launch the media browser.

  • Media browser pop-up window not appeared? This is most likely because you have the pop-up blocker enabled in your browser. For help with disabling the pop-up blocker on your site refer to the Disabling the pop-up blocker article.
  • The media browser window will display all the images in the current usergroup group folder of your site. Locate the image you require.
    Can't find the image you require? Use the folder navigation on the left-hand side to navigate to other groups the image may be located in. If the image hasn't already been uploaded use the   Add an image to groupname task link, located at the bottom of the window, and then follow the instructions above titled "uploading an image stored on your computer"
  • There are several different ways to insert an image into a document - choose from one of the following options:
    insertimage Selects the fullsize version of the image. Clicking on the image itself will also insert the fullsize version.
    imageedit Use this to edit the image properties, including resizing the image,  before inserting into your document.
    image thumbnail button Inserts a smaller version of the image. The image will have a maximum height (portrait) or width (landscape) of 100 pixels.
    thumbnaillink Inserts the a smaller version of the image that links to the fullsize version. Useful for a photo gallery.

    Click on the required "insert image" option and the image will appear in the editor.
  • You can reposition your image in 2 ways:
    • To move the image up or down the page click and drag it to the position required.
    • To place the image to the left or the right and have the text neatly wrap around it follow these steps:
      • Select the image and then click on the insertimageinsert image toolbar button (alternatively right-click and select image properties) this will launch the image properties window.
      • Set the align option to left or right depending on what you require.
      • Click OK to commit your change. You image should now display with text neatly wrapped around it.

tipTips

  • Media folders can be used for categorising images to help locate them in future. A mediafolder media folder can be created using the create a media folder task on the media tab.
  • Store images that you, or other members of your team, may wish to use in other areas of the site within the mediafolder Stock Photos media folder e.g.your logo. This will make them easier to locate.
  • To resize an image locate the image choose the imageeditedit image option and select the proportions you require.
    Note: Saving your changes to the image proportions will physically resize the image file on the web server. This means any other documents using the same image will also have their image proportions modified.

    Resizing the image proportions in the image properties window, or by dragging the image proportions in the document editor, will not physically resize the image but will instead change the dimensions set in the HTML code of the page. This could be used for small size modifications but it means the image downloaded by the user will be the larger original image which will therefore take longer to download. Also resizing the image in this way won't produce as crisper image as physically resizing the image.

    It is therefore best practice to physically resize the image to the desired proportions ideally in some image editing software before you upload the image or within the Insight system's editing image functionality described above.
  • If you wish to download an image from a web site you can achieve this by right-clicking your mouse and selecting 'Save Image as' ('Save picture as' in the Mozilla Firefox browser). This is useful for downloading images from your previous web site or for downloading images from your current web site so you can resize them within image editing software. You should not copy images from web sites which you don't have copyright permission for.

 Related Articles 
bullet-point
bullet-point
bullet-point