Print Friendly and PDF

Adding Images / Pictures to a Web Page

Adding an image is a three step process. 

  1. Prep the image and resize it to a proper size for use on the web page. 
  2. Upload the image to the website. 
  3. Insert the image into the page.

Note:  Use Step 2:  Uploading Images to upload other files as well such as PDFs,  Word documents and Excel spreadsheets.

This process is also demonstrated in the tutorial video: Re-sizing and Adding Photos to Your Website

Resizing Your Image

Before you can use an image, you must prepare it for use on the district web page.  This process involves resizing the image down to the width of the Content Area.  This step is very important.  If the image is too large, it will break the template or slow the download speed of the web page.

An online photo editing software is available to use at photos.foxbright.com to resize the image. Scroll to the next step, Uploading the Image, if the image is already edited and ready to be uploaded.

    1. The image needs to be in an electronic format, either on your computer, a CD-Rom, or other storage device.
    2. Open an internet browser and go to the website photos.foxbright.com.
    3. Click Open Image and browse to your image. Select your image and click Upload this image.
    4. Click on the Resize Tool to resize your image.
      Note: If you are unsure what a button in the photo editor does, hover over it and a pop up description will appear.
    5. Enter the desired width for your image. For most content areas, widths of 600 pixels or less are preferable.  There is no need to enter the height.  It will be calculated automatically for you based off of the width that you entered.
    6. Click on Apply.
    7. Click Save to Disk in the upper left hand corner of the screen.
    8. Click Save File to save your image back to your computer

Uploading the Image

Now that the image is resized, it is ready for uploading.  In this example we will upload a picture of the school board.

Note:  These steps can also used to upload PDF files other documents that you would like to link to from the web site.

  1. Click Images/Files from the left of the Administrative Page.
  2. Click Add File.
  3. The Add File screen opens. Select the Category where you want to save this image (or file).
  4. Give your image a Name and a brief Description.
  5. Click Select New File, and browse to where the image (or file) is currently saved.
  6. Click OK to select the file. The file will now appear in the window.
  7. Click Save.

Note: You can also upload an image at the same time as adding it to a page, thus skipping the above process. This is described in the following section.

Inserting the Image into a Web Page

  1. Click Web Pages from the left of the Administrative Page and choose Page Tree.
  2. Click Edit next to the page in which you want to add the image.
  3. Click Edit in the content block you would like to add the image.
  4. Click within the content place the cursor where you would like the image to appear.
  5. Click the Image button.

  6. Click Browse for Image.
  7. You may search for your image by name or use the Select Category to filter the results by category.
  8. Select the image by clicking on either the image name or the thumbnail image.
    Note: If you need to upload a new image, select Add File at the bottom of the browse image window. Choose the category to put the image in, give it a name and description and click Select New File to find the image on your computer. Click Save to add the image to the list of images.
  9. Make necessary changes to the image such as size or alignment. Clicking the Link tab will allow you to make the image a link to an external page or a page inside the website.
    Note: If the image is used to convey information, as opposed to just being ornamental, any information such as text, dates, etc. displayed in the image MUST be added to the Alternative Text field of the image properties. In addition, if the image is being linked, the Alternative Text should contain a good description of the link destination. Alternative Text is what gets read by screen readers and is important to include in order to keep a website compliant.
  10. Click OK.

The image will now appear in the Content Area. This change will not appear to the public until the page is published.

Deleting Uploaded Images and Files

Only certain users will have rights to delete images that were uploaded to the web site.  Only these users will see delete in the image options menu.

  1. Click Images/Files from the Administrative Page on the left and choose List Files.
  2. To the right of the image or file name, click the Settings icon and choose.

  3. Confirm the deletion by checking the confirm delete box and click Delete.

Warning!!  This deletion is permanent.  If the image appears on the website, and the image is deleted, the image will be permanently removed from the website.  If there is a link to a file, and the file is deleted, the link will no longer function correctly.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk