#  Replace and Edit Inline Images in the Text Editor 

 



 ##  

  expand\_more  

 
  

 

Inline images can help break up text and add visual clarity, but managing them in the editor view requires a few extra steps. You can’t drag-and-drop replacements or edit them directly in the editor—everything is managed through the media library.



 

##  Why it matters 

 



 

- **Frustration:** Direct replacements often break links or formatting.
- **Risk:** Skipping workflows can lead to inaccessible or duplicate content.
- **Clarity:** Using the media library keeps images clean and consistent.



 



      ![Illustration of a text editor interface with formatting icons, text lines, and an embedded image placeholder.](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2025-12/images_6_0.png?itok=icW8skM1) 

 

 

  

 



 

 

 

##  How to do it 

- **Click the image** in the CKEditor body field.
- Select the **“Insert Media”** icon (it looks like an image and a musical note).
- In the **Add or select media** dialog box, choose the image tab to upload a new image or choose one from the library below.
- Click **“Insert selected”** in the media window.
- Review and **update the alt text** for the new image by clicking on the Override media image alternative text icon (it looks like a shaded eye) in the Image toolbar.
- Save the page as usual.
- Double-check that the image appears correctly and is not broken.



 

##  Accessibility tip 

- Avoid reusing decorative images with meaningful file names.
- Always update the **alt text** to match the new image’s purpose, even if you’re only changing a visual or size.



 

##  Resources 

- [Images Component on the HarvardSites Drupal User Guide](https://drupal.harvardsites.harvard.edu/images)
- [Image Sizes on the HarvardSites Drupal User Guide](https://drupal.harvardsites.harvard.edu/resource/image-sizes)
- [Web Accessibility: Images Tutorial (W3C)](https://www.w3.org/WAI/tutorials/images/)
- [An alt Decision Tree (W3C)](https://www.w3.org/WAI/tutorials/images/decision-tree/)



 

 



 

 See also:- [ Images ](/how-guides-topics/images)
- [ Media ](/how-guides-topics/media)
- [ Performance ](/how-guides-topics/performance)
- [ How-To Guides ](/page-categories/how-guides)