#  Adding an image 

 



 ##  

  expand\_more  

 
  

 

## How to add an image

Note that there are many ways to add images, including using the “Image” component. This article covers how to use the text editor to upload, insert, and format an image.

### Step 1: Insert an image

1. In the **Body** text editor toolbar of your content type, click on the **Media** button (see [Text Editor](/resource/text-editor "Text Editor") for details about the text editor toolbar).
2. Click to **Choose Files** and select the image that you would like to upload. Supported file formats are: PNGs and JPGs.
3. Provide **Alternative text** for the image (learn how to [write helpful alt text](/resource/when-add-alt-text "When to add alt text") for images).
4. Click on **Crop Image**, and determine if you would like to crop the image for the placement that you are adding the image. Click **Save** when you are finished cropping your image.
5. Click on **Insert Selected.**

### Step 2: Format the image

1. Once the image is in your body copy, you have options to resize the image and have text wrap around it. Below are the selections you can choose from. Each option has tooltip help text in order to help you choose the correct image options for your content.
    1. **Toggle on the caption:** You can add a caption to your image in this area.
    2. **Link the media:** Allows you to make the media clickable.
    3. **Override image alt text:** Allows you to add your own alt text to an image.
    4. **View Mode:** Ability to size the image based on how you want it to appear on a page. You can change this from small all the way to large or the original image size (see [Images Sizes](/node/1166#text-editor-image-size) for details about image dimensions).
    5. **Wrap Text Options:** Multiple ways to wrap text around the image on the left, right, have text appear above/below the image or center the image.

   ![Screenshot of the text editor showing a text block on the left and an image on the right with the image selected and the image formatting toolbar outlined.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-07/Image%20formatting%20toolbar_0.png?itok=DV3GtNI_) 

 

Use the image formatting toolbar to add an image caption, link the image, adjust alternative text, and change the image size and alignment.2. If you would like to add paragraphs above and/or below the image you can click on the arrows on the image to add a paragraph above or below the image to help address positioning.
3. Click **Save** to save the content created for your content type when finished editing.



 

---

 

##  Related resources 

 



  [### Images in HarvardSites Drupal: Getting the results you expect (VIDEO)

 ](/resource/images-harvardsites-drupal-getting-results-you-expect-video)Learn how images are handled differently depending on how and where you use them.



 

 

   ![a person using a phone that has images on its screen](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-cottonbro-5082579%20%281%29.jpg?itok=JlHI6Xvr) 

 



 

 

   [### Hero component: Styles, sizes, and best practices (VIDEO)

 ](/resource/hero-component-styles-sizes-and-best-practices-video)Understanding the options available in the Hero component and best practices.



 

 

   ![a tablet computer showing a website](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-pixabay-39559.jpg?itok=-VFJXOhB) 

 



 

 

   [### Image Sizes

 ](/resource/image-sizes)How to size images to best fit the content type or component.



 

 

   ![Two people walking through an archway with columned windows.](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-10/thumb_image_sizes.jpg?itok=zYWT0et7) 

 



 

 

   [### Sharing audio and video on your site

 ](/resource/sharing-audio-and-video-your-site)Best practices for sharing audio files (like podcasts) and videos.



 

 

   ![a computer screen displaying digital audio waves](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-12/pexels-pixabay-257904.jpg?itok=Cp1H1EbL) 

 



 

 

   [### When to add alt text

 ](/resource/when-add-alt-text)How to approach writing text descriptions that convey concepts in images to screen reader users.



 

 

   ![Two people in a workroom standing in front of a whiteboard, one writing and one observing.](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-10/thumb_alt_description.jpg?itok=aU2s_oZd) 

 



 

 

  

 

 

 

 

 



 

 See also:- [ How-tos ](/content-structure/how-tos)
- [ Images ](/general-site-management/images)