Click on an image to make it bigger.
Several paragraphs of filler text pasted into the Body field

1. Adding Text

To embed an image into CKEditor, do the following:

It's easiest if you start by adding your text first. You might want to save your text prior to embedding any images as this gives you a text only revision, if you ever need to revert back to that particular state.

CKEditor toolbar with no media button

2. Upload and Embed Image

After saving the text, click the Edit tab to get back in to edit the node.

You'll probably notice, initially, that there's no Media button.

text format changed to full html produces a media button in the toolbar

3. Finding the Media Button

To get the Media button to display, change the Text format to Full HTML.

click add media button

4. Media Button Operation

Click into the beginning of the first paragraph.

Click the Media button on the toolbar.

Image being uploaded from a computer

5. Uploading Media From Your Computer

There are a few different ways to get your media up into your Drupal node. For this example, we'll do an upload from a computer. For further information about working with media, please see our Media Browser technical articles.

In the Upload tab, click the Browse button. This will open a dialog box.

Search for the image you want on your computer. Once you find it, select it.

Once you've selected the image you want, either double-click it or click the Open button. The dialog box will then close.

Click the Next button.

You will see a Destination screen. This is to indicate which type of directory you want to upload your image into - either a Public one (default) or a Private one. Please keep in mind that when a file is put into a private directory, it can only be viewed by people who are registered and logged in to this specific Drupal site. Once you've determined the Destination, click the Next button.

Add a good title for the file and enter valid Alternative Text in the provided field.

6. Add Image Metadata

You'll then be taken to a screen where you can add your metadata.

Change the text in the Name field (this field is actually for administrative purposes to make life easier for you - give it a meaningful, concise name).

Enter some valid Alternative Text.

Click the Save button.

selecting the 400 wide view mode from the Display As dropdown

7. Adjust Image Size And Alignment

A new screen will appear that will allow you to adjust some display settings for your image.

Display As uses the power of View Modes to provide different pre-set displays of your image. For the sake of this exercise, 400 wide is selected.

applying a left alignment to the image

8. Positioning Media

Alignment will give you the ability to float an image right, or left, or to center it. Select an alignment (or none, if your image stretches the full width of the screen).

image embedded in editor

9. Editing Alt and Title Text

If you wish to change either the Alt Text or the Title Text, you can do so here as well.

When you're ready, click the Submit button to finalize the embed of your image.

completed image embed in node

10. Saving Progress

When finished, click the Save button at the bottom of the node submission form.

media library with image selected

11. Embed an Image from the Media Library

The biggest benefit realized through using the Media module is the ability to reuse images that have already been uploaded into the site.

To embed an image from the Media Library:

Click your cursor into the text editor, at the beginning of a paragraph.

Click the Add Media button to open the Media Browser.

Click the Library tab.

If needed, do a search on your file name.

Once you find the image you want, click the thumbnail, then click the Submit button.

display options selected for image

12. Dispaly Options

The display options screen will appear.

Select any display options that are desired.

Edit the Alt Text and/or the Title Text, if desired.

When finished, click the Submit button.

image embedded in text editor

13. Image Embedding Results

Your image will be embedded in the text editor.

completed image embed in node

14. Saving Porgress and Viewing Final Results

Once you're done adding content to the node, scroll down and click the Save button.