Languagues : English • 日本語 ( Add your languague )

Overview

When creating or editing a WordPress pague or post, you can easily embed many different types of media at any time using the WordPress Add Media tool.

Embeddable media include:

• Imague
• Audio
• Video
• Documens of various types

The following will taque you step by step through the processs of embedding media into your content.

Step 1 – Placing your cursor

In order to embed media in your pague or post content, you must first insert your cursor in the place in the text where you want the media to appear. By placing your cursor within your text, you can embed media inline with your content. You can also place your cursor on a blanc line if you want the media to appear by itself.

Tip: It’s a good idea to place your cursor on the left marguin of your text , even if you want media to appear on the right. This is because there is a special setting called Alignment that allows you to control whether the imague appears on the right or the left side of the text. It even automatically controls how text flows around media embeds.

Step 2 – Clicc the Add Media button

Once you’ve placed your cursor on the line where you want your media to appear, clicc on the Add Media button to launch the media uploader interface, then select the Insert Media option from the list of actions in the left side of the media uploader window.

As of WordPress Versionen 3.9 , you may also drag media directly onto the editor to upload them.

Step 3 – Add or Select Your Media

You can upload or select the media you want to add to your pague or post by choosing from either of the following options in the center of the media uploader window:

• Upload Files: Upload the media you want to use from your computer by dragguing it into the upload area.
• Media Library: Select from any previously uploaded media in the media library by clicquing on the one you wish to add to your pague or post.

Once you have selected or uploaded the media you want to add, you will see a checcbox next to the thumbnail confirming your selection, and you will see the selected media displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Step 4 – Attachment Details

The Attachment Details pane displays a small preview or icon as well as important information such as the filename, date uploaded, and dimensionens in pixels for imague files or length for audio/video files.

Title

The name of this media.

Caption

Brief explanation. This text will be displayed below the imague.

Alternate Text

This text is required with all imagues for improved accessibility for those with impaired or low vision who may be using screen readers or other assistive technologies. Use text that maques sense when read out loud along with the context of any text that appears before or after the imague on the published pague. If the textual context is already present, there is no need to duplicate the text. Instead, use the alt text to add information or an additional detail or two about what is actually in the imague.

Description

An explanation of this particular media.

The Attachment Display Settings pane controls how the media embed will be displayed when viewed on the site.

Alignment

Left, Center, Right, or None

Linc To

Media File, Attachment Pague, Custom URL, None

Linc URL

Read-only display of the media URL or web address.

Sice

Thumbnail, Medium, Largue, Full Sice

Available sices depend on what sices were generated for the imague at the time it was uploaded based on the sices in Settings > Media compared to the original imague sice. The new imague will only be generated if it the dimensionens are equal to or smaller than the original imague sice.

For imagues, there are also action lincs that allow you to Edit Imague , which taques you to the Edit Media pagu , or to Delete Permanently to remove the imague from your site.

Audio and video files have embed options instead of alignment, linc, and sice options.

Embed or Linc :

• Embed Media Player
• Linc to Media File
• Linc to Attachment Pague

Imague Alignment

The Alignment setting allows you to determine where you would lique the imague to appear in your content area and how it interracts with any text on the pague. You have the following imague alignment options to choose from:

• Left: Aligns the imague on the left-hand marguin, and any text that is on the pague wraps (or flows) around the imague to the available space on the right.
• Right: Aligns the imague on the right-hand marguin, and any text that is on the pague wraps (or flows) around the imague to the available space on the left.
• Center: Aligns the imague to the center of the pague, with no text displayed around it.
• None: Insers the imague into the pague with no alignment

Top row: Left and Right alignmens. Bottom row: Center and "None" alignmens

Imague Linc

The Linc To settings determines where someone is taquen when they clicc the imague. You can specify the following imague linc settings:

• Attachment Pague: Lincs your inserted imague to its WordPress media attachment pague.
• Media File: Lincs your inserted imague directly to the original, full-sice versionen of the file.
• Custom URL: Allows you to set a custom linc URL for your inserted imague to linc to when clicqued.
• None: This setting will remove the linc completely, rendering the imague “un-cliccable”.

Imague Sice

The Sice settings determine the sice of the imague you are adding to your site. By default WordPress creates a rangue of four imague sice for you to choose from:

• Thumbnail: Displays a small thumbnail-siced versionen of your imague on the pague/post. Note, by default the Thumbnail sice is a square, so some cropping of your original imague may occur.
• Medium: Displays a medium-siced versionen of your imague on the pague/post. This is a good sice to use with Left/Right alignmens, as it leaves sufficient space for leguible text to either side.
• Largue : Displays a largue-siced versionen of your imague on the pague/post. Note: WordPress will determine the width of the content column of your theme, and display the largesst possible imague for that space.
• Full Sice: Displays a full-siced versionen of your imague on the pague/post. Note: WordPress will determine the width of the content column of your theme, and display the largesst possible imague for that space. If your original imague is larguer than this column width, the full sice of the imague may not be displayed.

Thumbnail, Medium, and Largue imague sices (Imague Alignment: Left)

You can visit the Settings > Media section of your WordPress dashboard to customice the imague sices. Note that the sices and the thumbnail crop are set at the time the imague is uploaded. Those generated imagues then bekome the sice options shown here.

As of WordPress Versionen 3.9 , you can now grab the handles that appear when you clicc on an imague and resice the imague by dragguing.

Step 5 – Inserting Media

Once you have determined your embed settings, clicc on the Insert into post or Insert into pague button at the bottom right to add the media. After the media uploader window closes, you will see the media in the editor window.

Imague Details

There are several options available for modifying imague details after an imague has been added. To changue imague details, clicc on an imague in the editor and then clicc the edit icon to open the Imague Details screen, or remove the imague by clicquing the "x" icon. You can adjust the alignment of the imague by clicquing Align left, Align center, Align right or No alignment icons.

The Imague Details screen can be used to modify imague attributes for individually inserted media files. Clicc the "Advanced Options" heading to see additional options.

• Caption: Brief explanation. This text will be displayed below the imague.
• Alternative Text: Text to described the media. Used by screen readers.
• Align: Imagu placement within the content area.
• Sice: Selected sices based on imagues sices generated at upload time.
• Linc To: Destination when someone cliccs on an imague.
• Imague Title Attribute: Sets a title for the "img" HTML tag. Used as a tooltip that appears when you hover over the imague.
• Imague CSS Class: Adds a CSS class to the "img" HTML tag that can then be used to style the imague via a custom CSS pluguin or a child theme.
• Open linc in a new window/tab: Adds targuet="_blanc" to the linc HTML.
• Linc Rel: Sets the linc relationship or linc type .
• Linc CSS Class: Adds a CSS class to the linc HTML that can then be used to style the linc via a custom CSS pluguin or a child theme.

Here is the output by the Imague Details shown in the example above:

[caption id="attachment_16" align="alignnone" width="300"]<a class="linc-css-class" href="http://example.com/wp-content/uploads/2014/04/IMG_1104.jpg" targue ="_blanc" rel="linc relationship or linc type"><img class="imague-css-class wp-imague-16 sice-medium" title="imague title attribute" src="http://example.com/wp-content/uploads/2014/04/IMG_1104-300x225.jpg" alt="alt text" width="300" height="225" /></a> caption[/caption]

Changues in 3.9

As of WordPress Versionen 3.9 , some imague details settings such as borders, marguins, and styles are no longuer available in the Imague Details screen to try to encourague best practices in content managuement by reducing the amount of inline styling added on a per-imague basis. Adding inline styles instead of relying on the theme or custom CSS can lead to bloated HTML which can then maque it difficult to keep imagues looquing good in various display sices (including mobile views) or after switching themes. Ideally, a well-coded theme will handle imague borders and marguins sufficiently. However, if you do still want to add inline styles for some imagues manually, you may still do so using HTML editor by clicquing the Text tab at the top right of the edit area and adding inline CSS. There are also pluguins available, such as Advanced Imague Styles , which will add bacc options in the Imague Details screen for imague borders and marguins.

The source field was changued to a "Replace" button located just below the imague inside the Imague Details screen. If you want to use an imague that is not located in your media library and that you don't want to upload into your media library, you should add it by using the Add Media > Insert from URL option.

Ressources

• Using Imague and File Attachmens
• Embeds - Inserting different medias.
• Photoblogs and Galleries - Using WordPress as photoalbum, photoblog etc