Click on an image to make it bigger.
Media Module - Browser - Switch to Full HTML to Get Toolbar Button

1. Click the Add Media Button

To upload and embed a new file via your text editor, click your cursor into the text editor.

Click the Add Media button.

Media Module - Browser - Upload Tab - Upload File

2. Upload File

When the Media Browser opens, it will, by default, show the Upload tab.

Click the Browse button. This will open up a dialog box to your computer.

Navigate to your files on your computer. When you've found the file, select it and then click the Open button.

Once the dialog box closes, click the Upload button.

Media Module - Browser - Upload Tab - File Uploaded

3. Beware of the Remove Button

When the file is uploaded, the Upload button will change to a button that says Remove - don't click this button unless you want to remove the file.

Click to the Next button to proceed.

Media Module - Browser - Upload Tab - Select Public or Private File

4. Select Storage Method

A Destination screen will then appear. This screen will ask you if you want to make your file Public or Private.

Public files can be seen by anyone on the web. This is the default.

Private files can only be seen by people who are logged in to the site.

Click Next after you've made your decision.

Media Module - Browser - Upload Tab - Add Admin Title and Alt Text

5. Add Metadata

A file metadata screen will then appear.

Name field = this is the administrative name of your file. It is suggested that you put a human friendly name in here for your own file administration purposes.

Alt Text field = this field is used to provide a textual description of the image in the event that either the link to the image is lost or that the image is being accessed by a screen reader. Please enter a brief description of the image. For more information on what Alternative Text is and why it's really important, please visit WebAIM's Alternative Text article.

Title Text field = this optional field provides text that appears when a user

Filling out this data doesn't take long and it will provide many benefits to you down the road.

Once you have your metadata updated, click the Save button.

Media Module - Browser - Upload Tab - Display Options Adjusted

6. Adjust Display Options

You will then be moved to a screen that is concerned with how your file is displayed.

Media works hand in hand with View Modes.

View Modes are preset styles that a user can click through and apply to the file.

Just for fun, we're going to apply a Colorbox view mode to this image, so that when the image is clicked, a larger image will pop up in a colorbox display. We'll also center align the image.

Display As field = Colorbox

Alignment field = Center

On this screen, you can also choose to update any of your metadata and you can also set a link to your image in the Link Image field. (Please note that the linking will not work properly if you use a colorbox display. Also, centering currently does not show properly in the text editor, but will show properly once you save).

When all updates have been added, click the Submit button.

Media Module - Browser - Upload Tab - Image Embedded

7. Add Any Extra Content

After the image is embedded, add any additional content to your node that you wish.

When you're finished, scroll down and click the Save button.

Media Module - Browser - Upload Tab - Image Embedded - Hover on Image

8. Completed Node

Your completed node will then display with your embedded image.

Media Module - Browser - Upload Tab - Image Embedded - Colorbox View Mode Sample

9. Open Colorbox Display

Clicking on the sample image pops open a colorbox display.

And that's it for uploading and embedding an image through the Media Browser.

Read on to discover what other things the Media Browser can do for you.