{"id":657,"date":"2014-10-11T15:45:44","date_gmt":"2014-10-12T01:45:44","guid":{"rendered":"http:\/\/state.sbuhi.org\/?page_id=657"},"modified":"2014-10-11T15:45:44","modified_gmt":"2014-10-12T01:45:44","slug":"inserting-media-into-posts-and-pages","status":"publish","type":"page","link":"https:\/\/state.sbuhi.org\/?page_id=657","title":{"rendered":"Inserting Media into Posts and Pages"},"content":{"rendered":"<p><a href=\"http:\/\/state.sbuhi.org\/wp-content\/uploads\/2014\/10\/Wordpress-blogs-viajes-alsa-1-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-663\" src=\"http:\/\/state.sbuhi.org\/wp-content\/uploads\/2014\/10\/Wordpress-blogs-viajes-alsa-1-150x150.png\" alt=\"Wordpress-blogs-viajes-alsa\" width=\"150\" height=\"150\" srcset=\"https:\/\/state.sbuhi.org\/wp-content\/uploads\/2014\/10\/Wordpress-blogs-viajes-alsa-1-150x150.png 150w, https:\/\/state.sbuhi.org\/wp-content\/uploads\/2014\/10\/Wordpress-blogs-viajes-alsa-1-250x250.png 250w, https:\/\/state.sbuhi.org\/wp-content\/uploads\/2014\/10\/Wordpress-blogs-viajes-alsa-1-100x100.png 100w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>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.<\/p>\n<p>Embeddable media include:<\/p>\n<ul>\n<li>Images<\/li>\n<li>Audio<\/li>\n<li>Video<\/li>\n<li>Documents of various types<\/li>\n<\/ul>\n<p>The following will take you step by step through the process of embedding media into your content.<\/p>\n<h3><span class=\"mw-headline\">Step 1 \u2013 Placing your cursor<\/span><\/h3>\n<p>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.<\/p>\n<p><a class=\"image\" title=\"File:add-image-insert-cursor.png\" href=\"http:\/\/codex.wordpress.org\/File:add-image-insert-cursor.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/4\/46\/add-image-insert-cursor.png\" alt=\"File:add-image-insert-cursor.png\" width=\"502\" height=\"182\" border=\"0\" \/><\/a><\/p>\n<p><i>Tip: It\u2019s a good idea to <b>place your cursor on the left margin of your text<\/b>, 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.<\/i><\/p>\n<h3><span class=\"mw-headline\">Step 2 \u2013 Click the Add Media button<\/span><\/h3>\n<p>Once you\u2019ve 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.<\/p>\n<p><a class=\"image\" title=\"File:add-media-button.png\" href=\"http:\/\/codex.wordpress.org\/File:add-media-button.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/3\/32\/add-media-button.png\" alt=\"File:add-media-button.png\" width=\"568\" height=\"193\" border=\"0\" \/><\/a><\/p>\n<p>As of WordPress 3.9, you may also drag media directly onto the editor to upload them.<\/p>\n<p><a class=\"image\" title=\"drop-images.jpg\" href=\"http:\/\/codex.wordpress.org\/File:drop-images.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/thumb\/8\/8b\/drop-images.jpg\/304px-drop-images.jpg\" alt=\"\" width=\"304\" height=\"237\" border=\"0\" \/><\/a><\/p>\n<h3><span class=\"mw-headline\">Step 3 \u2013 Add or Select Your Media<\/span><\/h3>\n<p>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:<\/p>\n<ul>\n<li><b>Upload Files:<\/b> Upload the media you want to use from your computer by dragging it into the upload area.<\/li>\n<li><b>Media Library:<\/b> Select from any previously uploaded media in the media library by clicking on the one you wish to add to your page or post.<\/li>\n<\/ul>\n<p><a class=\"image\" title=\"Insert Media Screen\" href=\"http:\/\/codex.wordpress.org\/File:insert-media.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/9\/99\/insert-media.png\" alt=\"Insert Media Screen\" width=\"1280\" height=\"800\" border=\"0\" \/><\/a><\/p>\n<p>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.<\/p>\n<h3><span class=\"mw-headline\">Step 4 \u2013 Attachment Details<\/span><\/h3>\n<div class=\"floatleft\"><a class=\"image\" title=\"image-details-and-display-settings.png\" href=\"http:\/\/codex.wordpress.org\/File:image-details-and-display-settings.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/7\/7c\/image-details-and-display-settings.png\" alt=\"\" width=\"297\" height=\"595\" border=\"0\" \/><\/a><\/div>\n<p>The <b>Attachment Details<\/b> pane displays a small preview or icon as well as important information such as the filename, date uploaded, and dimensions in pixels for image files or length for audio\/video files.<\/p>\n<dl>\n<dt>Title<\/dt>\n<dd>The name of this media.<\/dd>\n<dt>Caption<\/dt>\n<dd>Brief explanation. This text will be displayed below the image.<\/dd>\n<dt>Alternate Text<\/dt>\n<dd>Text to describe the media. Used for accessibility.<\/dd>\n<dt>Description<\/dt>\n<dd>An explanation of this particular media.The <b>Attachment Display Settings<\/b> pane controls how the media embed will be displayed when viewed on the site.<\/dd>\n<dt>Alignment<\/dt>\n<dd>Left, Center, Right, or None<\/dd>\n<dt>Link To<\/dt>\n<dd>Media File, Attachment Page, Custom URL, None<\/dd>\n<dt>Link URL<\/dt>\n<dd>Read only display of the media URL or web address.<\/dd>\n<dt>Size<\/dt>\n<dd>Thumbnail, Medium, Large, Full Size<\/dd>\n<\/dl>\n<p>Available sizes depend on what sizes were generated for the image at the time it was uploaded based on the sizes in <b>Settings &gt; Media<\/b> compared to the original image size. a size will only be generated if it the dimensions are equal to or smaller than the original image size.<\/p>\n<p>For images, there are also action links that allow you to <b>Edit Image<\/b>, which takes you to the <a title=\"Edit Media\" href=\"http:\/\/codex.wordpress.org\/Edit_Media#Edit_Image\"><b>Edit Media<\/b><\/a> page, or to <b>Delete Permanently<\/b> to remove the image from your site.<\/p>\n<p>Audio and video files have embed options instead of alignment, link, and size options.<\/p>\n<div class=\"floatright\"><a class=\"image\" title=\"audio-details-and-display-settings.png\" href=\"http:\/\/codex.wordpress.org\/File:audio-details-and-display-settings.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/c\/ce\/audio-details-and-display-settings.png\" alt=\"\" width=\"297\" height=\"443\" border=\"0\" \/><\/a><\/div>\n<div class=\"floatright\"><a class=\"image\" title=\"video-details-and-display-settings.png\" href=\"http:\/\/codex.wordpress.org\/File:video-details-and-display-settings.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/2\/27\/video-details-and-display-settings.png\" alt=\"\" width=\"297\" height=\"438\" border=\"0\" \/><\/a><\/div>\n<p><b>Embed or Link<\/b>:<\/p>\n<ul>\n<li>Embed Media Player<\/li>\n<li>Link to Media File<\/li>\n<li>Link to Attachment Page<\/li>\n<\/ul>\n<h4><span class=\"mw-headline\">Image Alignment<\/span><\/h4>\n<p>The <b>Alignment<\/b> 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:<\/p>\n<ul>\n<li><b>Left:<\/b> 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.<\/li>\n<li><b>Right:<\/b> 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.<\/li>\n<li><b>Center:<\/b> Aligns the image to the center of the page, with no text displayed around it.<\/li>\n<li><b>None:<\/b> Inserts the image in to the page with no alignment<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td>\n<div><a class=\"image\" title=\"image-alignment-4up.png\" href=\"http:\/\/codex.wordpress.org\/File:image-alignment-4up.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/thumb\/0\/06\/image-alignment-4up.png\/750px-image-alignment-4up.png\" alt=\"\" width=\"750\" height=\"566\" border=\"0\" \/><\/a><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>Top row: Left and Right alignments. Bottom row: Center and &#8220;None&#8221; alignments<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4><span class=\"mw-headline\">Image Link<\/span><\/h4>\n<p>The <b>Link To<\/b> settings determine where someone is taken when they click the image. You can specify the following image link settings:<\/p>\n<ul>\n<li><b>Attachment Page:<\/b> Links your inserted image to its WordPress media attachment page.<\/li>\n<li><b>Media File:<\/b> Links your inserted image directly to the original, full-size version of the file.<\/li>\n<li><b>Custom URL:<\/b> Allows you to set a custom link URL for your inserted image to link to when clicked.<\/li>\n<li><b>None:<\/b> This setting will remove the link completely, rendering the image \u201cun-clickable\u201d.<\/li>\n<\/ul>\n<h4><span class=\"mw-headline\">Image Size<\/span><\/h4>\n<p>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:<\/p>\n<ul>\n<li><b>Thumbnail:<\/b> Displays a small thumbnail-sized version of your image on the page\/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.<\/li>\n<li><b>Medium:<\/b> Displays a medium-sized version of your image on the page\/post. This is a good size to use with Left\/Right alignments, as it leaves sufficient space for legible text to either side.<\/li>\n<li><b>Large<\/b>: Displays a large-sized version of your image on the page\/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.<\/li>\n<li><b>Full Size:<\/b> Displays a full-sized version of your image on the page\/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td>\n<div><a class=\"image\" title=\"image-sizes-3up.png\" href=\"http:\/\/codex.wordpress.org\/File:image-sizes-3up.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/thumb\/2\/21\/image-sizes-3up.png\/750px-image-sizes-3up.png\" alt=\"\" width=\"750\" height=\"265\" border=\"0\" \/><\/a><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>Thumbnail, Medium, and Large image sizes (Image Alignment: Left)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>You can visit the <a title=\"Settings Media Screen\" href=\"http:\/\/codex.wordpress.org\/Settings_Media_Screen\"><b>Settings &gt; Media<\/b><\/a> section of your WordPress dashboard to customize the image sizes. Note that the 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.<\/p>\n<p>As of WordPress 3.9, you can now grab the handles that appear when you click on an image and resize the image by dragging.<\/p>\n<h3><span class=\"mw-headline\">Step 5 \u2013 Inserting Media<\/span><\/h3>\n<div class=\"floatleft\"><a class=\"image\" title=\"insert-into-post-button.png\" href=\"http:\/\/codex.wordpress.org\/File:insert-into-post-button.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/1\/1e\/insert-into-post-button.png\" alt=\"\" width=\"151\" height=\"60\" border=\"0\" \/><\/a><\/div>\n<p>Once you have determined your embed settings, click on the <b>Insert into post<\/b> or <b>Insert into page<\/b> button at the bottom right to add the media. After the media uploader window closes, you will see the media in the editor window.<\/p>\n<h3><span class=\"mw-headline\">Image Details<\/span><\/h3>\n<p>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 <b>Image Details<\/b> screen, or remove the image by clicking the &#8220;x&#8221; icon.<\/p>\n<p><a class=\"image\" title=\"File:edit-image-icon.png\" href=\"http:\/\/codex.wordpress.org\/File:edit-image-icon.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/2\/21\/edit-image-icon.png\" alt=\"File:edit-image-icon.png\" width=\"321\" height=\"246\" border=\"0\" \/><\/a><\/p>\n<p>The <b>Image Details<\/b> screen can be used to modify image attributes for individually inserted media files. Click the &#8220;Advanced Options&#8221; heading to see additional options.<\/p>\n<p><a class=\"image\" title=\"Image Details\" href=\"http:\/\/codex.wordpress.org\/File:image-details.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codex.wordpress.org\/images\/c\/c8\/image-details.png\" alt=\"Image Details\" width=\"1003\" height=\"752\" border=\"0\" \/><\/a><\/p>\n<ul>\n<li><b>Caption:<\/b> Brief explanation. This text will be displayed below the image.<\/li>\n<li><b>Alternative Text:<\/b> Text to described the media. Used by screen readers.<\/li>\n<li><b>Align:<\/b> Image placement within the content area.<\/li>\n<li><b>Size:<\/b> Selected sizes based on images sizes generated at upload time.<\/li>\n<li><b>Link To:<\/b> Destination when someone clicks on an image.<\/li>\n<li><b>Image Title Attribute:<\/b> Sets a title for the &#8220;img&#8221; HTML tag. Used as a tooltip that appears when you hover over the image.<\/li>\n<li><b>Image CSS Class:<\/b> Adds a CSS class to the &#8220;img&#8221; HTML tag that can then be used to style the image via a custom CSS plugin or a child theme.<\/li>\n<li><b>Open link in a new window\/tab:<\/b> Adds <code>target=\"_blank\"<\/code> to the link HTML.<\/li>\n<li><b>Link Rel:<\/b> Sets the link relationship or <a class=\"external text\" title=\"http:\/\/www.w3.org\/TR\/html401\/types.html#type-links\" href=\"http:\/\/www.w3.org\/TR\/html401\/types.html#type-links\">link type<\/a>.<\/li>\n<li><b>Link CSS Class:<\/b> Adds a CSS class to the link HTML that can then be used to style the link via a custom CSS plugin or a child theme.<\/li>\n<\/ul>\n<p>From the <a href=\"http:\/\/codex.wordpress.org\/Inserting_Media_into_Posts_and_Pages\" target=\"_blank\">WordPress Codex<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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: Images Audio Video Documents of various types The following will take you step by step through the process of embedding media into your content. Step &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/state.sbuhi.org\/?page_id=657\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Inserting Media into Posts and Pages&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":663,"parent":649,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-657","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=\/wp\/v2\/pages\/657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=657"}],"version-history":[{"count":0,"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=\/wp\/v2\/pages\/657\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=\/wp\/v2\/pages\/649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=\/wp\/v2\/media\/663"}],"wp:attachment":[{"href":"https:\/\/state.sbuhi.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}