Adding Images in Drupal | Web Services | Kent State University

Adding Images in Drupal

Add an Image to a Body Field

Follow these steps to upload, configure and align images in a text box.

  • If needed, enter edit mode.
  • Confirm or change your Body field's Text format to Full HTML.  This setting is located just under the field where you enter text into the body. 
  • Place your cursor on a blank line.  The image must be added in its own paragraph.  It cannot be added within text of another paragraph, otherwise the paragraph text will not format correctly.
  • Select the add media icon.
  • Browse to locate the image you want to upload and upload it.
  • Enter the required Alt Text. (How you would describe the image to someone you were talking on the phone to, someone that could not see the image.)
  • Select the focal point of the image.
  • Select Save.
  • Right click the image to select Media settings .
  • *Select WYSIWYG from the Display as menu.
  • If hover text is desired, enter it in the Tooltip Title Text field.
  • Select Submit.
  • **To align the image right or left, select the image again, right click, select Image Properties.
  • From the Alignment options, select Right or Left.
  • Select OK.

*The display type must be changed, to remove titles from being displayed after the page is saved.

**The alignment must be selected under Image Properties. The alignment option does not work under Media settings.

Add a Feature Image

Directions on how to add either a large header at the top of a page or a small square image above the navigation are located on the Basic Fields Page.

Add an Image to a Mega Menu

Directions are located on the Navigation page.

Add an Information Graphic Menu

The Information Graphics Library displays the various graphics that have already been created for use on Drupal with the option to download the graphic. Note: if you’re using a non-traditional theme color template, it is best to have info graphics prepared that match your site’s accent color first.  If you require a different graphic to be created you can complete the Information Graphic Request Form.

Screenshot of example information graphics 

Part 1:  Add Information Graphics Menus

An information graphics menu is a good way to add a secondary menu to your site.  If you would like to add one to your site please follow these instructions:

  1. Submit a support ticket requesting an infographic menu be added to your site.
  2. Once the menu is added to your site you will receive notification that your ticket is closed.
  3. To add the infographics to the site, on your home page click the Group button and select Menus.
  4. Locate the menu from the list of menus displayed.
  5. Add your first item (info graphic).
    a.  Menu link title - the text of your info graphic
    b.  Path - the node to which you want to link (e.g. node/123456)
    c.  Click Show Advanced Settings - Upload your icon (a transparent png or gif - 417pxx417px) under the Image option.
    d.  Click Save.
  6. Continue adding as many info graphic graphics as needed.  They can be ordered under the List Items tab by dragging them up or down.  Save your configuration.

Part 2: Add Your Infographics Menu to Your Site

  1. Navigate to the page you’re placing the graphics and choose Customize this page.
  2. Click the Plus sign within the panel you want to add the graphics.
  3. Choose OG Menus and click OG Menu.
  4. Click Override title if you would like a heading above the graphics.
  5. Under Menu Style, choose HTML Grid
  6. Under Items per row, choose the number of graphics to display per row (0 - 12).
  7. Under OG Menu, choose the name of the menu you just created.
  8. Click Finish.

You will see your information graphics populate on the page.  You can always add new items and reorder items by visiting the InfoGraphics Menu (Section 1).