Adding Images to Website Page within Text areas

Adding Images to Website Page within Text areas

Overview

This article will show you how to place photographs and graphics within your website.

Who has access:

  1. Website Administrators
  2. Department Level Users

Instructions

On each page pictures can be displayed in the center content section. You have access to change these pictures, but first the picture must be prepared. Everyone should have the ability to crop and size pictures. 

Preparing photos and graphics

  1. First, the pictures for this section need to be cropped as desired.
  2. Next, the pictures need to be sized down. Recommend photos within the content area to be less than 300 pixels wide
  3. Lastly, if possible the picture needs to be saved at a “for the web” resolution, 150 dpi, previously 72 dpi, but we recommend a higher dpi now to account for high resolution screens/devices.

Uploading images to the site

  1. While in editing mode (see page 3), place your curser in the text where you wish the photos to go.
  2. Click the “Image” button. In the “Image Info” window, click “Browse Server”. 
  3. Under “Departments”, select the “Images” folder for your department. 
  4. Click the upload icon at the top, and this will open a pop up window for Uploading Files.
  5. Click the “+Add Files(s)” button or you can drag and drop files from your local computer onto the red bar area. (they must be dropped on the red bar, otherwise they will not be queued for uploading.)
  6. Once you’ve added all your images, click “Start Upload”. This will upload the picture(s) to the site.

Placing images

Select one of the pictures you just uploaded, and then click “OK”. This will place the picture in your text edit area. (leave the default URL type to “Relative URL”).
Once you have placed your picture click “Update” and they will appear on the site. If the image does not display correctly, the picture was probably not sized correctly, Contact your Administrator for questions. 
IMPORTANT: ADA Guidelines require Alternative Text (alt text or alt tag) for every image on government websites. Under image properties, you MUST include alternative text for every image on the website.

    • Related Articles

    • Resizing Images using Windows 10 Photos App

      To resize an image, before uploading to the website, open the Photos app and choose the picture from your library that you want to resize. Or, you can open File Explorer and right-click the image you want and choose Photos from the “Open with” ...

    • Add a YouTube a video

      Overview This article will show you how to embed a YouTube video in your website. Who has access: Website Administrators Department Level Users Instructions 1. Go to your YouTube video, located at the bottom of the video there will be a share button, ...