Image

Owned by Chelsea Shadowens (Unlicensed)
Last updated: Mar 09, 2020 by Yen Tang

Images are considered Media Items on the platform.

See Guidelines on Image Dimensions


Adding a new Image

You can add an Image directly to a page by embedding it in the WYSIWYG editor or adding it to an image field, or you can add an image to the media library to access later.

File restrictions

There is a 5MB limit. Allowed file types are: PNG, GIF, JPG, JPEG

  1. Login to your agency website.
  2. Add the image to a page, a block, or the Media Library.
    1. Upload an Image directly in a text editor (WYSIWYG):
      1. Images can be embedded into the text editor, or "What You See Is What You Get" (WYSIWYG), field of certain Content Types. 
      2. Select Edit for the page to which you'd like to add the image, or Create a new page.
      3. In the WYSIWYG box, click the Embed Media icon and select Image media.
      4. Check the Image Library first to make sure the image you need is not already saved to your website.
      5. Click on Upload Image at the top of the selection screen.
      6. Either drag-and-drop or click Select files to upload an image from your computer.
    2. Upload an Image directly to an image field:
      1. Certain Content Types and Micro-Content Types have a field specifically for an image. 
      2. Edit the node:
        1. If you want to add an image to a block on a Landing Page or Program or Service page:
          1. Select Layout for the page.
          2. Edit or create a block:
            1. To add a new block:
              1. Click + Add Block in the area you want to add the content.
              2. Use the menu on right side to select the content you want to add.
            2. To edit the contents of a block:
              1. Select the Edit Icon in the top-right corner of the block, which looks like a pencil.
              2. Click Configure.
              3. Click Edit.
            3. See our training on /wiki/spaces/KB/pages/628326414 for more.
        2. If you want to add an image to an image field on a Content Type (like a Teaser Image on News):
          1. Select Edit for the page.
        3. If you want to add an image to block embedded into the WYSIWYG of a page:
          1. Select Edit for the page.
          2. Locate the block in the WYSIWYG, indicated by a grey box with the title and type of block.
          3. Either double-click the box, or right-click and select "Edit BLOCK TYPE"
          4. In the pop-up window, click Edit.
      3. Locate the image field.
      4. Click the Add Image button.
      5. Check the Image Library first to make sure the image you need is not already saved to your website.
      6. Click on Upload Image at the top of the selection screen.
      7. Either drag-and-drop or click Select files to upload an image from your computer.
    3. Add an Image to the Media Library to access later:
      1. Select Content from the toolbar at the top of the screen. 
      2. Select the Media tab.
      3. Click the Add media button.
      4. Select Image.
      5. Click Choose File and select the file you want to upload from your computer.
  3. Enter a Name for the Image so you can find it later (required).
  4. Add Alternative Text for the Image (required).
    1. This text should be a brief description of the image to be read aloud on screen readers for people with visual impairments.
  5. Add a Caption if needed.
  6. Select a Category to which you'd like to associate the image (optional).
  7. Add an Image Credit if needed.
  8. Click Save.
    1. If you uploaded directly in a WYSIWYG:
      1. Select the image alignment (Full-width, Left, or Right).
      2. Click the Embed button.
    2. If you uploaded directly to an image field:
      1. Make sure the the Published checkbox is checked, or the Moderation state is set to Published.
      2. Click Save.
        1. If you're editing a block embedded into the WYSIWYG of another page, the edit page will be open in a separate window from your previous window. Once your block edits are published, it will immediately update on the page, and you can close the extra window where you were editing the embedded block.
    3. If you uploaded to the Media Library:
      1. Make sure the the Published checkbox is checked, or the Moderation state is set to Published.
      2. Click Save.
  9. Your image is now available to be embedded in pages across your website.

Placing an existing Image

Once you've added an image to your website through any of the methods describe above, it is available for reuse anywhere else on the site. If, at any point, you edit the Image media item itself, all placements will update.

To add an existing image either to a WYSIWYG or to an image field, follow the same steps listed above, except:

  1. Instead of clicking "Upload Image," locate the image you want from the Image Library.
    1. If you know the name given to the image on upload to the site, you can filter the list to find it easier.
  2. Click the image thumbnail to select it.
  3. Click Select.

Edit or replace an Image throughout the entire site 

If you want to edit or replace an Image across all placements on the site:

  1. Navigate to the Image in the Media Library by clicking Content in the Admin toolbar.
  2. Select the Media Tab.
  3. Find the Image you would like to delete in the list.
  4. Select Edit in the Operations column.
  5. Update any information: Name, Alternative text, Caption, Category, or Credit.
  6. To replace the image itself in all placements across the entire site:
    1. Click the Remove button under the Alternative text field.
    2. Follow the steps above for adding a new image through the Media Library.

Remove an Image from a page

If you want to remove an Image from a certain page without deleting it from the entire site:

  1. To remove the image from a WYSIWYG editor:
    1. Navigate to the page housing the Image.
    2. Select Edit.
    3. Scroll down to the WYSIWYG editor and highlight the Image placeholder.
    4. Hit Delete on your keyboard.
    5. Publish the page.
  2. To remove the image from an image field:
    1. Edit the node:
      1. On a Landing Page or Program or Service page:
        1. Select Layout for the page.
        2. Select the Edit Icon in the top-right corner of the block, which looks like a pencil.
        3. Click Configure.
        4. Click Edit.
      2. On a Content Type:
        1. Select Edit for the page.
      3. In a block embedded into the WYSIWYG of a page:
        1. Select Edit for the page.
        2. Locate the block in the WYSIWYG, indicated by a grey box with the title and type of block.
        3. Either double-click the box, or right-click and select "Edit BLOCK TYPE"
        4. In the pop-up window, click Edit.
    2. Click Remove under the image preview.
    3. Make sure the the Published checkbox is checked, or the Moderation state is set to Published.
    4. Click Save.

Remove the Image from the entire site 

If you want to remove an Image from the site entirely:

  1. Navigate to the Image in the Media Library by clicking Content in the Admin toolbar.
  2. Select the Media Tab.
  3. Find the Image you would like to delete in the list.
  4. Select the drop-down in the Edit button in the Operations column. 
  5. Select Move to Trash.
    1. Note: If the image is being used on any pages or blocks, it will be listed in a table on the confirmation page. Check this table to be sure that you're aware of all pages and blocks that will be impacted by deleting this Image. If you do not want to delete the image, select Cancel.
    2. Move to Trash if you're sure that you want to move the item to the Media Trash.

Once the item is in the Media Trash, public users will no longer see the Image in any of its previous placements on the site.