Adding and Deleting Images

The WebCMS lets you create and edit image metadata, delete or replace images. You can upload and add images to pages with WebCMS. Once an image is uploaded onto a page, it may be added to other pages.

Whoever uploads an image owns it, and the image is associated with the web area where it was originally uploaded. Other people in the same web area can delete and replace it. Other people in other web areas may be allowed to search for and embed your image into their pages.

• EPA's guidance on using images
• Adding images to your page
  • Uploading images
  • Adding an image from the library

  • Configuring how the image will display

• Editing the image after uploading it
• Deleting images
• Linking to high-resolution files
• Linking to full-sized original image
• Adding clickable image maps

---

EPA's guidance on using images

Per EPA’s guidance, if you want to use an image that does not belong to you or your web area, whether in the WebCMS or another source, you must contact the image owner and the EIC of the web area of where the image was uploaded originally. It's quite possible that you will not be allowed to use the image, as there could be usage restrictions. If you are permitted to embed the image onto your page, you might have to include proper attribution, which can be added as part of the image caption below the image. This restriction applies to all pages that include images from other sources.

Adding images to your page

Add your text to the page first: this step will make it easier for you to add images exactly where you want them.

There are two ways of adding an image to your page. One is by uploading an image from your hard drive. The other is by using an image that has already been uploaded to the WebCMS.

When you upload an image, it will be associated with the web area the page belongs to.

Uploading an image

If you have an image on your hard drive that you wish to add to your page:

1. Make sure that image you wish to add is in a file format that is supported by WebCMS. The only file types that you can use on a web page are JPG, GIF and PNG.
2. Do not upload very large images
   • Uploading images that are too large will appear sideways on the page
   • Images should not exceed 10 MBs, you will not be able to upload images larger than that
   • Example: a 3750x3000 size image is too big, cut it down in size before uploading it
3. Resize and optimize your image using graphics editing software before you upload it. Do not resize your image using HTML width and height attributes since this will result in skewed images and pages that load slowly.
4. Select the Add Images and Files button on the Drupal WebCMS Editor (see image below).

   

5. Select choose file to browse to the image on your hard drive. The file will load after you choose it.
   1. Note: once an image has been uploaded it is immediately accessible to the public. Unlike web pages, you do not need to make the extra step of publishing them.
   2. Note: if you want to load them so the public does not see them, then select the Private option. This option will ensure that the public cannot see the images until you select the Public option.
6. You will next be prompted to enter information about the image you just uploaded. Title text and Tags are important for finding your image later in the WebCMS library if you want to use it on another page or make changes.
   • The Title is required, use unique words.
   • The alt text is generally required and is always a good idea. Concisely explain what's in the image.
   • Under Usage Restrictions, select "restricted" If the image is subject to copyright restrictions from a stock photo library.
   • The image will appear in the left column with a "Preview" link below it.
     • Clicking this preview link will not do anything, please ignore it.
   • You can add unique words in the Tag field that will allow you to search for the images by keywords. These words are not exposed to the public.
   • Though the file name will be entered into the title field by default, you will not be able to save the file unless you enter a new title for the image.
   • Select "Save and Insert" to add the image to your page. "Save and Select" will add it to the library, not to the page.

Adding an image from the library

It is possible to reuse images that have already been uploaded to WebCMS. If you want to use an image that does not belong to you or your web area, whether in the WebCMS or another source, you must contact the image owner and the EIC of the web area of where the image was uploaded originally. It's quite possible that you will not be allowed to use the image, as there could be usage restrictions. If you obtain the go-ahead, then:

1. Pick the add image + icon.
2. Filter and search for the image.
3. Scroll down to the grid.
4. Select and image you would like to add to your web page.
5. Then select "Insert selected."

Note: If you embed an image that's then deleted by someone else, it will disappear from your page.

Configuring how the image will display

After you have added an image to the page, there will be an Edit Media button.

Select that button and you will be given the opportunity to fill out alt text, pick a size for the image to display, choose the alignment for the image.

Alt Text: is for visually impaired users who might access your page using a screen reader. For any image that is used to convey information, it is important to have alt text. If you add a caption instead of alt text, make sure the image tag has an empty alt text (alt=""). The WebCMS will automatically add this for you. You can use the original alt text or change it for your page.

See Web Standard: Graphics and Images

Image Display Size: Choose the size that works best for the page. If you select a size that is larger than the image, the image will display as-is. If you select a size that's smaller than your image, your image will be scaled down.

• The thumbnail option creates a small version of your image. You can link the thumbnail to the full sized original version.
• The original option is to use when loading really large images where you need to see the fine details.

In addition, the responsive design means the image will be adjusted further by the browser based on the screen size of the device accessing your page.

Image Alignment: You have a number of image alignments you can set.

Caption: Select the Caption checkbox if you want to include a caption for your image. A yellow box will appear below the image in the WYSIWYG editor. Enter the caption text in this yellow box.

Deleting Images

Deleting an image from the page

Click on the image then use the Delete or Backspace key on your keyboard. Sometimes deleting the image from the Body field does not remove the image <div> tag or caption tag from your code. You may need to disable rich-text and delete any errant code. You can also right-click over the image or caption space and select "Remove div" first, then delete the image.

Deleting an image from WebCMS

Only people in the same web area, where the image was originally uploaded, can delete or change the image. If you delete an image from the WebCMS, and other people have embedded that image on their pages, the image will disappear from their pages.

Editing the image after uploading it

You can replace an image with a new version and edit the keywords, alt text, or other metadata, from the Edit This Media Item on the Edit Media tab. See: Finding and Managing Your Uploaded Files if you own the image or if you belong to the same web area where the image was originally uploaded.

If you replace an image with a new version, and someone else has embedded your image on their page, your new version will appear on their pages.

You can edit the image’s properties in the WYSIWYG editor by selecting the image, then hitting the Edit Media in the WYSIWYG editor. You can change alignment, keywords, alt text and other metadata there.

Linking to High-Resolution Image Files

Web browsers do not render certain image files, such as .psd or .tif files. See& Linking to High-Resolution Images for how to upload and link to these.

Linking to full-sized original image

After an image has been uploaded:

1. Click the “edit” button that appears after clicking on the image
2. Copy the URL to the full image from the modal ("edit media" pop-up) that appears
3. Dismiss the modal
4. Click once on the embedded image to select it
5. Click the “link” button in the editor and paste in the URL you previously copied
6. Save it

Adding Clickable Image Maps

When adding an image map, such as the Standard U.S. National Maps, point directly to the image rather than inserting it via the rich-text editor. Upload the image, find the URL of that image, and point to it using a relative path, like so:

<img src="/sites/production/files/YYYY-MM/yourimage.jpg" />

"YYYY-MM" is the year and month it was uploaded, and "yourimage.jpg" is the filename of the image you want to add the imagemap to. Wrap that image in the appropriate map and area tags. You also want to include some JavaScript to ensure that the imagemap is responsive, for people on different sized displays, mobile devices, or people who are zooming in and out on the page. See: JavaScript: Responsive Image Maps.