Embedding Images With the Media Module

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.

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.

3. Finding the Media Button

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

4. Media Button Operation

Click into the beginning of the first paragraph.

Click the Media button on the toolbar.

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.

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).