Atachibana (talk | contribs) (Update by V4.3) |
(→Image Details) |
||
(2 intermediate revisions by 2 users not shown) | |||
Line 48: | Line 48: | ||
;Title: The name of this media. |
;Title: The name of this media. |
||
;Caption: Brief explanation. This text will be displayed below the image. |
;Caption: Brief explanation. This text will be displayed below the image. |
||
+ | ;Alternate Text: This text is required with all images for improved accessibility for those with impaired or low vision who may be using screen readers or other assistive technologies. Use text that makes sense when read out loud along with the context of any text that appears before or after the image on the published page. 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 image. |
||
− | ;Alternate Text: Text to describe the media. Used for accessibility. |
||
;Description: An explanation of this particular media.<br /><br />The '''Attachment Display Settings''' pane controls how the media embed will be displayed when viewed on the site. |
;Description: An explanation of this particular media.<br /><br />The '''Attachment Display Settings''' pane controls how the media embed will be displayed when viewed on the site. |
||
;Alignment: Left, Center, Right, or None |
;Alignment: Left, Center, Right, or None |
||
;Link To: Media File, Attachment Page, Custom URL, None |
;Link To: Media File, Attachment Page, Custom URL, None |
||
− | ;Link URL: Read |
+ | ;Link URL: Read-only display of the media URL or web address. |
;Size: Thumbnail, Medium, Large, Full Size |
;Size: Thumbnail, Medium, Large, Full Size |
||
− | Available sizes depend on what sizes were generated for the image at the time it was uploaded based on the sizes in '''Settings > Media''' compared to the original image size. |
+ | Available sizes depend on what sizes were generated for the image at the time it was uploaded based on the sizes in '''Settings > Media''' compared to the original image size. The new image will only be generated if it the dimensions are equal to or smaller than the original image size. |
For images, there are also action links that allow you to '''Edit Image''', which takes you to the [[Edit_Media#Edit_Image|'''Edit Media''']] page, or to '''Delete Permanently''' to remove the image from your site. |
For images, there are also action links that allow you to '''Edit Image''', which takes you to the [[Edit_Media#Edit_Image|'''Edit Media''']] page, or to '''Delete Permanently''' to remove the image from your site. |
||
Line 71: | Line 71: | ||
The '''Alignment''' setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from: |
The '''Alignment''' setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from: |
||
− | *'''Left:''' Aligns the image on the left |
+ | *'''Left:''' Aligns the image on the left-hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right. |
− | *'''Right:''' Aligns the image on the right |
+ | *'''Right:''' Aligns the image on the right-hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left. |
*'''Center:''' Aligns the image to the center of the page, with no text displayed around it. |
*'''Center:''' Aligns the image to the center of the page, with no text displayed around it. |
||
− | *'''None:''' Inserts the image |
+ | *'''None:''' Inserts the image into the page with no alignment |
{{img|[[File:image-alignment-4up.png|750px]]|Top row: Left and Right alignments. Bottom row: Center and "None" alignments|}} |
{{img|[[File:image-alignment-4up.png|750px]]|Top row: Left and Right alignments. Bottom row: Center and "None" alignments|}} |
||
Line 80: | Line 80: | ||
====Image Link==== |
====Image Link==== |
||
− | The '''Link To''' settings |
+ | The '''Link To''' settings determines where someone is taken when they click the image. You can specify the following image link settings: |
*'''Attachment Page:''' Links your inserted image to its WordPress media attachment page. |
*'''Attachment Page:''' Links your inserted image to its WordPress media attachment page. |
||
*'''Media File:''' Links your inserted image directly to the original, full-size version of the file. |
*'''Media File:''' Links your inserted image directly to the original, full-size version of the file. |
||
Line 106: | Line 106: | ||
===Image Details=== |
===Image Details=== |
||
− | There are several options available for modifying image details after an image has been added. To change image details, click on an image in the editor and then click the edit icon to open the '''Image Details''' screen, or remove the image by clicking the "x" icon. You can adjust the alignment of image by clicking Align left, Align center, Align right or No alignment icons. |
+ | There are several options available for modifying image details after an image has been added. To change image details, click on an image in the editor and then click the edit icon to open the '''Image Details''' screen, or remove the image by clicking the "x" icon. You can adjust the alignment of the image by clicking Align left, Align center, Align right or No alignment icons. |
[[File:edit-image-icon.png]] |
[[File:edit-image-icon.png]] |
Languages: English • 日本語 (Add your language)
When creating or editing a WordPress page or post, you can easily embed many different types of media at any time using the WordPress Add Media tool.
Embeddable media include:
The following will take you step by step through the process of embedding media into your content.
In order to embed media in your page 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 blank line if you want the media to appear by itself.
Tip: It’s a good idea to place your cursor on the left margin 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 image appears on the right or the left side of the text. It even automatically controls how text flows around media embeds.
Once you’ve placed your cursor on the line where you want your media to appear, click 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 Version 3.9, you may also drag media directly onto the editor to upload them.
You can upload or select the media you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:
Once you have selected or uploaded the media you want to add, you will see a checkbox 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.
Available sizes depend on what sizes were generated for the image at the time it was uploaded based on the sizes in Settings > Media compared to the original image size. The new image will only be generated if it the dimensions are equal to or smaller than the original image size.
For images, there are also action links that allow you to Edit Image, which takes you to the Edit Media page, or to Delete Permanently to remove the image from your site.
Audio and video files have embed options instead of alignment, link, and size options.
Embed or Link:
The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:
Top row: Left and Right alignments. Bottom row: Center and "None" alignments |
The Link To settings determines where someone is taken when they click the image. You can specify the following image link settings:
The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:
Thumbnail, Medium, and Large image sizes (Image Alignment: Left) |
You can visit the Settings > Media section of your WordPress dashboard to customize the image sizes. Note that the sizes and the thumbnail crop are set at the time the image is uploaded. Those generated images then become the size options shown here.
As of WordPress Version 3.9, you can now grab the handles that appear when you click on an image and resize the image by dragging.
There are several options available for modifying image details after an image has been added. To change image details, click on an image in the editor and then click the edit icon to open the Image Details screen, or remove the image by clicking the "x" icon. You can adjust the alignment of the image by clicking Align left, Align center, Align right or No alignment icons.
The Image Details screen can be used to modify image attributes for individually inserted media files. Click the "Advanced Options" heading to see additional options.
target="_blank"
to the link HTML.Here is the output by the Image Details shown in the example above:
[caption id="attachment_16" align="alignnone" width="300"]<a class="link-css-class" href="http://example.com/wp-content/uploads/2014/04/IMG_1104.jpg" target="_blank" rel="link relationship or link type"><img class="image-css-class wp-image-16 size-medium" title="image 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]
As of WordPress Version 3.9, some image details settings such as borders, margins, and styles are no longer available in the Image Details screen to try to encourage best practices in content management by reducing the amount of inline styling added on a per-image basis. Adding inline styles instead of relying on the theme or custom CSS can lead to bloated HTML which can then make it difficult to keep images looking good in various display sizes (including mobile views) or after switching themes. Ideally, a well-coded theme will handle image borders and margins sufficiently. However, if you do still want to add inline styles for some images manually, you may still do so using HTML editor by clicking the Text tab at the top right of the edit area and adding inline CSS. There are also plugins available, such as Advanced Image Styles, which will add back options in the Image Details screen for image borders and margins.
The source field was changed to a "Replace" button located just below the image inside the Image Details screen. If you want to use an image 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.