Click on an image to make it bigger.
D7 - Working with Content - Text Editor - Media - Add Text

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.

D7 - Working with Content - Text Editor - Media - 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.

D7 - Working with Content - Text Editor - Media - Full HTML Text Format

3. Finding the Media Button

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

D7 - Working with Content - Text Editor - Media - Click Add Media Button

4. Media Button Operation

Click into the beginning of the first paragraph.

Click the Media button on the toolbar.

D7 - Working with Content - Text Editor - Media - Browse For Image From Your 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.

D7 - Working with Content - Text Editor - Media - Fill Out Metadata

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.

D7 - Working with Content - Text Editor - Media - Select View Mode

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.

D7 - Working with Content - Text Editor - Media - Apply Left Align

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

D7 - Working with Content - Text Editor - Media - Image Embedded

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.

D7 - Working with Content - Text Editor - Media - Completed Image Embed in Node

10. Saving Progress

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

D7 - Working with Content - Text Editor - Media - Select Image From Media Library

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.

D7 - Working with Content - Text Editor - Media - Set Display As Desired

12. Display 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.

D7 - Working with Content - Text Editor - Media - Completed Text Editor Embed

13. Image Embedding Results

Your image will be embedded in the text editor.

D7 - Working with Content - Text Editor - Media - Completed Embed

14. Saving Progress and Viewing Final Results

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

Related Video

Please note that videos which are provided from a source outside of OSU may not completely reflect OSU systems. Instead, use the provided video as a general guide to working with this particular subject.