Topics

  • Overview
  • Step one – Placing your cursor
  • Step 2 – Click the Add together Media button
  • Step three – Add together or Select Your Image
  • Step four – Attachment Details
  • Step 5 – Attachment Display Settings
    • Paradigm Alignment
    • Paradigm Link
    • Image Size
  • Step 5 – Inserting the image
  • Resource

Overview

When creating or editing a WordPress page or weblog post, you can hands add together images at any time using the WordPress Media Uploader tool. Here'southward how to add an paradigm, step-by-step, using the media uploader:

Top ↑

Stride 1 – Placing your cursor

Cursor at beginning of a paragraph
Placing cursor where the image should announced

In social club to add an paradigm to your page or mail, you must start insert your cursor in the identify in the text where you lot want the image to appear. By placing your cursor within your text, y'all tin can add images inline with your content. You can also identify your cursor on a bare line if you want the image to appear by itself instead.

Tip: It's a proficient thought to place your cursor on the left margin of your text, fifty-fifty if you lot want the image to appear on the correct. That's considering there is a special setting called Alignment that allows you lot to command whether the paradigm appears on the correct or the left side of the text. It even controls how text flows around the image automatically.

Peak ↑

Step 2 – Click the Add Media button

Once you've placed your cursor on the line where you lot want your epitome to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media choice from the list of actions in the left side of the media uploader window.

Add Media button circled
"Add Media" button above editor

Top ↑

Step iii – Add or Select Your Image

You lot can add or select the epitome you want to add to your page or postal service by choosing from either of the following options in the center of the media uploader window:

  • Upload Files: Upload the image you desire to use from your computer by dragging it into the upload area.
  • Media Library: Select from any previously uploaded images in the media library past clicking on the ane you wish to add to your page or post.

Once you accept selected or uploaded the image y'all want to add, You will see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Height ↑

Step 4 – Attachment Details

Attachment details pane with: title, caption, alt text, and description
Attachment details

The Attachment Details pane displays a small un-cropped thumbnail of the image, also every bit important information such every bit the filename, date uploaded, and paradigm dimensions in pixels.

There are too action links that allow yous to Edit Image, which takes y'all to the page, or to Delete Permanently to remove the image from your site.

In addition, y'all can edit the following media information:

  • Title: The title of this media.
  • Caption: The explanation for this image. The text you enter here will be displayed beneath the image.
  • Alternating Text: Enter the Alt text for the image, e.one thousand. "The Mona Lisa" to describe the media.
  • Clarification: A description for this particular media.

For more than information on these media settings, see the Edit Media folio.

Height ↑

Stride 5 – Attachment Display Settings

Attachment display settings: alignment, link to, and size
Attachment display settings

The Zipper Display Settings pane controls how the image is displayed when viewed on the site.

Yous accept options to set up how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image volition be, In addition you tin set up what size epitome yous would like to display on your folio.

Top ↑

Image Alignment

The Alignment setting allows yous to determine where yous would like the image to appear in your content area and how it interacts with any text on the page. You have the following prototype alignment options to choose from:

  • Left: Aligns the image on the left paw 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 manus margin, and whatsoever text that is on the page wraps (or flows) around the epitome to the bachelor space on the left.
  • Center: Aligns the epitome to the heart of the folio, with no text displayed around it.
  • None: Inserts the image in to the folio with no alignment
Different image alignments
Aligning images using editor controls

Acme ↑

The Link To settings decide the URL/web accost to which the paradigm volition exist linked when clicked on by a visitor to your site. You tin can specify the following image link settings:

  • Attachment Page: Links your inserted image to its WordPress media attachment page.
  • Media File: Links your inserted paradigm directly to the original, total-size version of the file.
  • Custom URL: Allows you to set up a custom link URL for your inserted prototype to link to when clicked.
  • None: This setting will remove the link completely, rendering the epitome "un-clickable".

Top ↑

Prototype Size

The Size settings determine the size of the image y'all are calculation to your site. Past default WordPress creates a range of iv prototype size for you to choose from:

  • Thumbnail: Displays a small thumbnail-sized version of your epitome on the page/post. Note, past default the Thumbnail size is a foursquare, so some cropping of your original prototype may occur.
  • Medium: Displays a medium-sized version of your image on the page/mail. This is a good size to utilise with Left/Right alignments, as information technology leaves sufficient infinite for legible text to either side.
  • Large: Displays a big-sized version of your image on the page/post. Notation: WordPress will determine the width of the content column of your theme, and brandish the largest possible image for that infinite.
  • Full Size: Displays a total-sized version of your image on the page/postal service. Notation: 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.
Different image sizes
Different epitome sizes

You can visit the Settings>Media section of your WordPress dashboard to customize the above paradigm sizes.

Pinnacle ↑

Step 5 – Inserting the epitome

Selecting the edit image option whenever hovering over an image
Edit image selection

One time you have adamant your prototype settings, click on the bluish Insert into postal service or Insert into the page button, to add the image to your page or post. After the image uploader window closes, you lot will see the prototype in the text editor window, including a preview of the alignment of the image, if yous have specified an image alignment.

At any time, you can edit the image settings past clicking on the Edit Image button in the upper left hand corner. You can remove the paradigm from your folio/postal service by clicking on the Remove Image push.

Height ↑

Resources

  • Using Image and File Attachments
  • Embeds – Inserting dissimilar medias.
  • Gallery – Inserting a simple paradigm gallery to pages or posts on your site