OSU Drupal 7

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

Enter some valid Alternative Text.

Click the Save button.

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.

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

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.

10. Saving Progress

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

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.

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.

13. Image Embedding Results

Your image will be embedded in the text editor.

14. Saving Progress and Viewing Final Results

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