How To Use The WordPress Media Library

The WordPress media library lets you store and publish different media content on your site. This tutorial shows you how to use the WordPress media library.

How To Use The WordPress Media LibraryWordPress introduced a new content editor in version 5.0.

To learn how to use the new content editor with the Media Library, go here: WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users

***

In WordPress, you can upload, store, and display a variety of file types (media) into your site’s content.

The most common file types are images, videos, and audio files, but you can also use other file types such as PDF document files, spreadsheet files, code samples, etc.

Typically, you will upload and add media into your content when creating or editing a post or page.

Adding media to the WordPress Media Library allows you to upload photos and create image galleries using an interface that makes uploading files and placing them into your posts and pages very easy.

Additionally, you can create image galleries very quickly with drag and drop reordering, inline caption editing, and simplified controls for layout, among other things.

How To Use The WordPress Media Library

In this tutorial you are going to learn how to use the WordPress Media Library feature.

Important

Note: Some media settings such as specifying the size of thumbnail images and options for the location and structure of the media upload directory (where your media files are stored) are controlled in your WordPress Media Settings.

How To Use The WordPress Media Library: Tutorial

You can upload and store various types of media files in your WordPress Media Library …

How To Use The WordPress Media Library

File Types Supported By WordPress

For security reasons, WordPress supports only certain types of files.

These include:

Images

  • .jpg
  • .png
  • .gif
  • .ico

Video

  • .mp4, .m4v (MPEG-4)
  • .mov (QuickTime)
  • .wmv (Windows Media Video)
  • .avi
  • .mpg
  • .ogv (Ogg)
  • .3gp (3GPP)
  • .3g2 (3GPP2)

Audio

  • .mp3
  • .m4a
  • ogg
  • .wav

Documents

  • .pdf (Portable Document Format; Adobe Acrobat)
  • .doc, .docx (Microsoft Word Document)
  • .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
  • .odt (OpenDocument Text Document)
  • .xls, .xlsx (Microsoft Excel Document)
  • .psd (Adobe Photoshop Document)

Info

Some web hosts may not allow you to upload some of the file types listed above (and/or upload large files). Check with your host if you experience issues uploading files to your WordPress site.

How To Upload Media Files To WordPress

You can upload media files to your site without creating a post or page first. This allows you to upload files to use with posts and pages later and/or get a web link for a particular file that you can share.

To view all the media files in your WordPress site’s Media Library, go to your navigation menu and click on Media > Library

How To Use The WordPress Media Library

This brings up the Media Library screen …

How To Use The WordPress Media Library

A table listing all of your media files will display in the Media Library screen. In a later section of this tutorial, we will cover all the features available in this section.

If you have not added any files to your Media Library, you will see an empty Media table …

How To Use The WordPress Media Library

How To Add Media Files To Your WordPress Media Library

To add media files to your WordPress site’s Media Library, go to your navigation menu and click on Media > Add New

How To Use The WordPress Media Library

You can also add new media files by clicking on the Add New button in your Media Library screen …

How To Use The WordPress Media Library

A new screen called ‘Upload New Media’ opens up containing the WordPress Media Uploader functions …

How To Use The WordPress Media Library

There are three options you can use to upload media files to your site:

1) Drag-And-Drop: You can add multiple files to your Media Library by selecting a group of files and dragging them into the Drop files here area surrounded by the dashed border.

2) Select Files: This opens a window that lets you select a folder in your hard drive and upload files from your computer.

3) You can also use the Browser Uploader if you experience any problems using the multi-file uploader …

How To Use The WordPress Media Library

Disclaimer

Note: the maximum upload size for your media files is determined by your web hosting account settings. In the example screenshot above, the Maximum upload file size is showing as 64MB (MegaBytes). Your screen may show a different maximum limit.

If you are experiencing problems uploading media files to your WordPress site, your limit size may be set too low. You could use an image editing application to resize the image, but it’s best to ask your web hosting company to increase your file upload settings or see the tutorial below:

Let’s go through each of the file upload methods now …

Drop files here – Drag-and-Drop method

The drag-and-drop method is useful if you want to upload multiple media files located in the same source folder. However, you can also use it to upload a single image.

Make sure that both the Upload New Media screen and the folder containing your image files are open and visible on your screen (you may have to resize their windows on your browser to see both of them at once).

Next select a single image, or multiple images by holding down the Shift or the CTRL button, then drag your selected files from your media folder into the blue dotted area of the Upload New Media screen (in the Drop files here section) and release your mouse …

How To Use The WordPress Media Library

If you have selected multiple files, these will begin uploading …

How To Use The WordPress Media Library

Once your files have been uploaded, they will display in your Media Library …

How To Use The WordPress Media Library

Select Files Method

This method allows you to search for the location of your media files (e.g. in your hard drive), then upload one or multiple media files.

  1. Click on Select Files in the Media Uploader and locate the folder containing your media files, then …
  2. Select one or more files to upload and click Open in the File Upload window …

How To Use The WordPress Media Library

Selecting the file(s) you want to upload and clicking Open activates a progress bar on the Upload New Media screen …

How To Use The WordPress Media Library

You can also use this method to upload different media file types (e.g. audio and video files) from different folder locations on your hard drive.

Selected files are placed in a queue waiting to be uploaded …

How To Use The WordPress Media Library

Using The Browser Uploader Method

If you experience any problems uploading your files using the previous methods, then try using the browser uploader instead.

After clicking on the browser uploader link, a new screen appears. Click the Browser button, then locate the file you want to upload and click on the Upload button to import your file …

How To Use The WordPress Media Library

Click on Switch to the multi-file uploader to exit the browse uploader and return to the multi-file uploader …

How To Use The WordPress Media Library

Attaching Media Files To Posts And Pages

Typically, there are two ways to upload media to WordPress:

  1. You can upload media into a Post or Page while creating or editing your Post or Page,
  2. You can upload media that is not related to a Post or Page yet.

If a media file is uploaded within the edit screen of a post or page, it will automatically be attached to that post or page.

If a media file is uploaded via the Media Library, then the file(s) will be unattached. The file(s) may become attached to a post or page when added into a post or page later, but you can also attach unattached media items directly inside the Media Library feature …

For example, here is a screenshot of an image that was uploaded via the Media Library and that is currently unattached to any page or post …

How To Use The WordPress Media Library

Clicking on the Uploaded to > Attach link associated with an unattached media file brings up a screen that allows you to associate the file with a page or post …

How To Use The WordPress Media Library

Search for, or select a page or post from the list displayed in the Find Posts or Pages window and click the Select button …

How To Use The WordPress Media Library

Your image will now be attached to your selected post or page and will show up as part of that post’s or page’s image gallery …

How To Use The WordPress Media Library

Tip

Media items are also “Posts” in their own right and can be displayed as such.

  • If the parent post of an attached media item is deleted, the media item will become attached to the deleted post’s parent if it exists.
  • If no parent post exists, the media item will become unattached and available for re-attachment to another post or page.

Editing Media Files In The WordPress Media Library

Once a media item is uploaded to the WordPress Media Library, it can be edited.

You can edit the item by hovering your mouse over it and clicking on the ‘Edit’ link…

How To Use The WordPress Media Library

You can also edit the media item by clicking on its file name and thumbnail image …

How To Use The WordPress Media Library

Important

Uploaded media such as Videos, Audios, PDF documents, etc… allow you to edit features such as your File Title, Caption and Description …

How To Use The WordPress Media Library

Image files, on the other hand, offer far greater editing options than other media types …

How To Use The WordPress Media Library

To learn how to edit images in the WordPress Media Library, see the tutorial below:

Deleting Media Files From The WordPress Media Library

To permanently delete an item from the Media Library, hover your mouse over the item you want to delete and click on the ‘Delete Permanently’ link …

How To Use The WordPress Media Library Your media item will be permanently deleted …

How To Use The WordPress Media Library

See the Filtering Options section further below for instructions on how to delete multiple media files.

Viewing Items Uploaded To The WordPress Media Library

You can view items you have uploaded to the WordPress Media Library by hovering your mouse over the item and clicking on the ‘View’ link …

How To Use The WordPress Media Library The item will be displayed as a separate post …

How To Use The WordPress Media Library

Additional Information – Table Of Media

Media Library items are displayed in a table, with all of your media items listed by row, and the newest uploaded item listed first …

How To Use The WordPress Media Library The Table of Media contains the following columns:

[ ] – Check the box to select a media item. Selected items can be processed by a Bulk Action.

Thumbnail – A thumbnail image of the media item is displayed in this column.

File – This column displays the name of the media file (Note: this is not the same as the filename of the uploaded media) …

How To Use The WordPress Media Library

The file’s media type (e.g TXT, PNG, JPG, PDF) is displayed below the file’s name …

How To Use The WordPress Media Library

Author – This column lists the user who uploaded the media item, or the file’s assigned author. Note: Files can be assigned a different author than the user who uploaded the file. See this tutorial for details on how to change authors for media files.

Uploaded to – This column displays whether a media file is unattached, or the Post or Page the file is attached to and the date of that Post or Page. Click on the title of the Post or Page to view that Post or Page in an edit Screen. If a media file is unattached, an “Attach” link will appear allowing the media file to be attached to selected Posts or Pages.

Comment Bubble – This column displays the number of comments a media file has received …

Date – This column displays the time or date the media file was uploaded.

How To Use The WordPress Media Library

Sortable Columns

The column headings in the Table of Media can be clicked to sort media items in ascending or descending order.

Hover over the column title (e.g. File), and the up arrow or down arrow will display. Click the heading to change the sort order of your media files …

How To Use The WordPress Media Library

Media Library Page Navigation

The number of Media items uploaded to your Media Library is displayed in the Table of Media, as well as the number of pages (if there is more than one page of media uploaded).

You can use the navigation arrows to skip to the first or last page, or to move backward or forward one page at a time. Also, you can enter a page number in the box showing the current page number to go directly to that page …

How To Use The WordPress Media Library

You can also specify the number of media items to display per page (see next section below).

Media Library Screen Options

The Screen Options allow you to choose which columns are displayed, or not displayed, in the Table of Media.

Click the Screen Options tab in the top right-hand corner of your Media Library screen …

How To Use The WordPress Media Library

A list of columns is displayed with a check-box next to each column. Check the box for each column that you want to see displayed in the Table of Media, or untick the box to hide that column.

You can also specify the number of Media items to display per page in the Table of Media. Remember to click the ‘Apply’ button when finished to apply your new settings …

How To Use The WordPress Media Library

Click the ‘Screen Options’ tab to close the Screen Options box.

Search Media

Above the Table, to the right, is a search box where you can enter one or more search terms and click the ‘Search Media’ button to search and display all the media files that include your search terms …

How To Use The WordPress Media Library

Your search results are displayed in the Table of Media …

How To Use The WordPress Media Library Click All in the Media Library menu to reset your page and display all media files in the Table of Media …

How To Use The WordPress Media Library

Filtering Options

At the top of the Media Library screen are menu links such as All, Images, Audio, Video, Unattached, etc. that allow you to display only media files of that type in the Table of Media when the link is clicked …

How To Use The WordPress Media Library

Below these links are the Bulk Actions drop-down menu, Apply button, Show all dates drop-down menu and the Filter button …

How To Use The WordPress Media Library

Bulk Actions Drop-Down Menu – You can perform Bulk Actions on one or more media files selected in the Table of Media. Currently, the only Bulk Action allowed for media files is to permanently delete all selected files.

To use the Bulk Actions filter, (1) select the checkbox(es) for all media files you want to delete. Do this by ticking each box individually, or click on the column header checkbox to select all media files (unchecking the header or footer title bar checkbox will cause all entries in the table to be unchecked), then (2) select Delete Permanently from the Bulk Actions drop-down menu,and (3) click the Apply button …

How To Use The WordPress Media Library

Show all Dates – This drop-down allows you to select which media files are displayed in the Table of Media by date. By default, “Show all dates” is selected and all of your media files are displayed.

To filter media files by upload date, (1) select one of the available dates from the Show all dates drop-down menu, and (2) click on the Filter button to apply the filter selection …

How To Use The WordPress Media Library

WordPress Media Plugins

If you plan to use media frequently, there are a number of plugins you can add to your WordPress site to enhance your Media Library functionality and help you better manage and organize your uploaded media, like the one below.

Media Library Assistant

Media Library Assistant

(Media Library Assistant)

The Media Library Assistant plugin provides several enhancements for managing the WordPress Media Library, including shortcodes, templates, and integrations with other plugins and media formats.

To learn more about this plugin, visit this website:

MEDIA LIBRARY PLUS

Media Library Plus - WordPress Plugin

(Media Library Plus – WordPress Plugin)

Media Library Plus enhances the functionality of the WordPress Media Library by allowing you to add and build new folders and sub folders to label and organize your media folders and perform operations on these folders and their contents, and provides you with a better way to manage image and video folders when creating WordPress image galleries and albums.

More information:

For additional plugins that will extend the functionality of your WordPress site and add new media management features, see the training module below:

Congratulations! Now you know how to use the WordPress Media Library.

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com

How To Edit Images In The WordPress Media Library

Learn how to edit images in the WordPress Media Library.

WordPress Tutorial

*** Important ***

WordPress introduced a new content editor in version 5.0 called Gutenberg.

For tutorials on how to use the new Gutenberg content editor, go here:

***

When you upload media files to WordPress like images, videos, audios, documents, etc., these can be managed from your Media Library and inserted into your site’s content.

You can perform a number of basic image edits in WordPress, including rotating, cropping, and resizing of images.

In this tutorial, you are going to learn how to edit images in the WordPress Media Library.

How To Edit Images In Your WordPress Media Library: Tutorial

Once an image is uploaded to the WordPress Media Library, you can perform a number of basic editing functions, as you will see shortly.

To edit an image immediately after it has been uploaded to your Media Library, click on the Edit link next to the image …

How To Edit Images In The WordPress Media Library

You can also edit an image by hovering your mouse over an image in the Media Library table and clicking on the Edit link …

How To Edit Images In The WordPress Media Library

This opens up the Edit Media screen …

How To Edit Images In The WordPress Media Library

The Edit Media screen allows you to manage all of the information associated with your media.

Just to summarize, you can reach the Edit Media screen from:

Editing Image File Attributes

In the Edit Media screen, you can perform the following basic edits:

  1. Change the title of your image
  2. Edit the Permalink of your media file attachment page.
  3. View the Attachment Page associated with the file
  4. Edit your image further (see next section below)
  5. Add a caption to your image
  6. Add an alternative text (alt text) to the image
  7. Add an image description

How To Edit Images In The WordPress Media Library

How To Edit Images In The WordPress Media Library

To help you get an idea of what the above fields do, have a look at the example screenshot below:

When you edit an image in the Edit Media screen and add the information below …

How To Edit Images In The WordPress Media Library This is what the above will look like when you view the file’s attachment page …

How To Edit Images In The WordPress Media Library

Important

Note: Comments added to media files can be managed in the Comments section …

How To Edit Images In The WordPress Media Library

Also, see the More Edit Media Options section further below for additional options relating to using comments in your media files.

Another important section of the Edit Media screen is the Save meta box. The Save meta box displays information about your media, such as the file upload date, file URL, the actual file name (i.e. not the file title), file type, and image dimensions …

How To Edit Images In The WordPress Media Library

This section also allows you to Delete Permanently or Update any changes you have made to your image …

How To Edit Images In The WordPress Media Library

Editing Image Files

In addition to editing image file attributes such as the title, caption, description, etc., you can also make some basic edits to the image file itself. To edit an image file in the Edit Media screen, click on the Edit Image button below the image …

How To Edit Images In The WordPress Media Library

The Image Edit screen will appear …

How To Edit Images In The WordPress Media Library

Above the image, you will see a row of buttons giving you access to several useful image editing controls …

How To Edit Images In The WordPress Media Library

Note: The edits you make to your image in this section are non-destructive — you can restore the image to its original (uploaded) specifications at any time.

Image Editing Controls

Here are the various controls available to you in Edit Image mode:

  1. Crop Image Tool: Click directly on the image and drag while holding the left mouse button down to draw a selection box around the area you want to crop. You can use your mouse cursor to grab the selection box and fine-tune its shape, as well as use keyboard shortcuts to fine-tune your crop selection. When you are happy with your selected area, click on the Crop icon to crop your image.
  2. Rotate Image Counter-Clockwise: Click this icon to rotate your image counter-clockwise.
  3. Rotate Image Clockwise: Click this icon to rotate your image clockwise.
  4. Flip Image Vertically: Click this icon to flip your image vertically.
  5. Flip Image Horizontally: Click this icon to flip your image horizontally.
  6. Undo Edit: Click this icon to undo your last edit.
  7. Redo Edit: Click this icon to restore your last edit.

Note: Clicking the Undo / Redo buttons successively steps you through previous edits.

Scale Image

Click the Scale Image link …

How To Edit Images In The WordPress Media Library

You can proportionally scale the original image by changing one of the input fields (width or height), and then clicking on the Scale button …

How To Edit Images In The WordPress Media Library

Notes:

  1. For best results, the scaling should be done before performing any other operations on it like crop, rotate, etc.
  2. If you make the image larger than the original, your image may become fuzzy.
  3. The original dimensions (e.g. 1024×768) are displayed above the input fields for entering new dimensions.

After clicking Scale, your image will be saved and scaled to the new dimensions …

How To Edit Images In The WordPress Media Library After scaling an image, a Restore Original Image link appears under the Scale Image link. Click this link if you would like to restore your image to its original dimensions …

How To Edit Images In The WordPress Media Library

A button will then appear below the link. You can discard any changes you have made and restore the original image by clicking on the Restore image button. Note: any previously edited copies of the image will not be deleted …

How To Edit Images In The WordPress Media Library

Image Crop

You can use this feature in combination with the Crop Image Tool button by first drawing a desired crop selection box around the image, then using the Image Crop tool to make the following precise adjustments.

  1. Crop Aspect Ratio: Specify the crop selection aspect ratio then hold down the Shift key while dragging to lock it. You can use values like 1:1 (square), 4:3, 16:9, etc. If there is already a crop image selection over the image, then specifying the aspect ratio will automatically adjust the selection.
  2. Crop Selection: Once the selection process has started, the selection can be adjusted by entering new values (in pixels) into these fields. Note: these values are scaled to approximately match the original image dimensions. The minimum selection size equals the thumbnail size as set in your WordPress Media Settings.

How To Edit Images In The WordPress Media Library

If you need help with this section, click on the (help) link …

How To Edit Images In The WordPress Media Library

Additional information about the Image Crop section will be displayed. To close this information panel, just click on the (help) link again …

How To Edit Images In The WordPress Media Library

Thumbnail Settings

You can select whether your image edit applies to one of the following:

  • All image sizes
  • Thumbnail
  • All sizes except thumbnail

If you need help with this section, click on the (help) link …

How To Edit Images In The WordPress Media Library

Additional information about the Image Crop section will then be displayed. To close this information panel, just click on the (help) link again …

How To Edit Images In The WordPress Media Library

When you have finished editing your image, click on Save to save your changes and return to the Edit Media screen, or click Cancel if you don’t want to apply any of the changes you have made …

How To Edit Images In The WordPress Media Library

After making changes to your image file, you can view its attachment page by either:

Clicking on the View Attachment Page buttons in the Edit Media screen …

How To Edit Images In The WordPress Media Library

Or clicking on the View link associated with the image in your Media Library …

How To Edit Images In The WordPress Media Library

The attachment page will then load in your browser with your image displayed …

How To Edit Images In The WordPress Media Library

More Edit Media Options

Some additional options for editing media in the Edit Media screen are not visible by default.

To enable these, click on the Screen Options tab at the top right-hand of the Edit Media screen …

How To Edit Images In The WordPress Media Library

You will see a number of additional options:

  • Discussion: Controls the ability to leave comments and/or trackbacks and pingbacks on the media attachment page. Tick the checkbox to enable an option, uncheck to disable.
  • Comments: Displays current comments on the media attachment page. You can add a new comment or show existing comments.
  • Slug: Allows you to edit the slug for attached media items.
  • Author: Allows you to change the Author for attached media items by selecting a new author from the drop-down menu.

To automatically enable and make one or more of these options visible on the page, simply check the box next to the item in Screen Options > Show on screen (note: unchecking the box hides the item) …

How To Edit Images In The WordPress Media Library

When enabled, the selected options become visible below your main edit area …

How To Edit Images In The WordPress Media Library

Remember to click the Update button after making any changes that you would like saved.

How To Edit Images In The WordPress Media Library

Useful Tip

Useful Tips

Tip #1: Viewing Attachment Pages You can view attachment pages for your media files by clicking on View Attachment Page in the admin toolbar …

How To Edit Images In The WordPress Media Library

Tip #2: Keyboard Shortcuts When cropping your image, the keyboard combinations below can help you fine-tune the size of the crop frame.

Note: The arrow key can be any of four arrow keys: up arrow, down arrow, left arrow, or right arrow:

  • Arrow: move by 10px
  • Shift + arrow: move by 1px
  • Ctrl + arrow: resize by 10px
  • Ctrl + Shift + arrow: resize by 1px
  • Shift + drag: lock aspect ratio

Congratulations! Now you know how to edit images in the WordPress Media Library.

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

How To Add And Format Images In WordPress

Learn how to add and format images to WordPress posts and pages in this tutorial.

How To Add And Format Images In WordPressThis tutorial was created using an earlier version of WordPress and may contain outdated information. Please bookmark this page as we will be updating this tutorial soon!

To be notified of updates to our content, subscribe to our updates list (see sidebar), or Like our Facebook page.

***

Adding images to your content can help make your website or blog look more attractive, lively and professional. Images can also help to create a better impression with your readers and deliver a stronger presentation in your sales message.

To learn how to upload and use images in the WordPress Media Library, see the tutorial below:

To learn how to edit images in the WordPress Media Library, see the tutorial below:

Complete the step-by-step tutorial below to learn more about using images in your WordPress posts and pages.

How To Add And Format Images In WordPress

There are several ways to source images for inserting into your posts and pages. You can:

  • Add an image from your site’s Media Library.
  • Upload an image from a folder on your hard drive.
  • Add the URL of an image stored in an image folder either in your own server or on another server (e.g. a remote file storage location like Amazon S3).

Info

Make sure that you have permission to use image(s) on your site. Image licensing companies and owners of copyrighted images will take legal action against you if you use images on your site without permission or violate the terms and conditions of your licensing agreements.

If you need free images and royalty-free images for your content, see the tutorial below:

How To Add Images From Your WordPress Media Library

Make sure that you have already completed this tutorial.

To insert an image from your WordPress Media Library, go to your Posts or Pages section and open (edit) your post or page, then place your mouse cursor where you would like to insert your image into the content …

How To Add And Format Images In WordPress Posts And Pages

Click on the Add Media button above the content editor window …

How To Add And Format Images In WordPress Posts And Pages

A pop up window will display the Add Media options. Select the Media Library tab to view all media you have uploaded to your WordPress site …

How To Add And Format Images In WordPress Posts And Pages

Select All media items from the Media Library drop-down menu to view all media items uploaded to your site …

How To Add And Format Images In WordPress Posts And Pages

You can also view only the media items you have attached to your post or page by selecting Uploaded to this post from the Media Library drop-down menu …

How To Add And Format Images In WordPress Posts And Pages

Note: You can also use the Media Library drop-down menu to filter and display only images, audio, and video files.

Select the image you want to insert into your post or page and then click on the Insert into post button …

How To Add And Format Images In WordPress Posts And Pages

Your image will be inserted into your post or page …

How To Add And Format Images In WordPress Posts And Pages

Useful Information

Note #1: You can also insert an image gallery from your media Library into your posts and pages.

To learn how to add multiple images into content in your WordPress posts and pages, see the tutorial below:

Note #2: To exit the Insert Media screen without performing an image action, just click on the “X” at the top of the window …

How To Add And Format Images In WordPress Posts And Pages

How To Upload Images From A Computer Hard Drive

To add your own images to a post or page, first, make sure that you already have an image created and ready to be uploaded or placed into an “images” folder on your hard drive.

Next, go to your WordPress Visual Text Editor and click inside the post or page where you want the image to be added. The image will be placed wherever your cursor is flashing.

Click on the Add Media button above the content editor window …

How To Add And Format Images In WordPress Posts And Pages

A pop-up window will display the Insert Media options. Select the Upload Files tab to display the media uploader, then either drag-and-drop your image file into the box that appears on the screen with a dotted border or click on Select Files to locate and upload your image …

How To Add And Format Images In WordPress Posts And Pages

For a detailed tutorial on using the WordPress Media Uploader, see this tutorial

Locate the image you want to upload, then select it and click Open in the File Upload window …

How To Add And Format Images In WordPress Posts And Pages

Your image will begin uploading …

How To Add And Format Images In WordPress Posts And Pages

Once your image has been uploaded it will display as the selected item. Click the Insert into post button …

How To Add And Format Images In WordPress Posts And Pages Your image will be placed into your post or page …

How To Add And Format Images In WordPress Posts And Pages

How To Add An Image From A URL

Info

Do not link to images hosted on an external server without permission – this is called hotlinking and it’s frowned upon by most webmasters and website owners, as it uses up their bandwidth and costs them money. You can set up your own external data storage account for hosting images and files remotely using a service like Amazon S3.

To add an image from a URL into a post or page, click on the Add Media button …

How To Add And Format Images In WordPress Posts And Pages

The Insert Media screen will open on your browser window. Click the Insert from URL link in the Insert Media menu …

How To Add And Format Images In WordPress Posts And Pages

Enter your image URL in the Insert from URL field, your image title in the Title field and click Insert into post

How To Add And Format Images In WordPress Posts And Pages

Useful Tip

If you use a content editor enhancing plugin like the TinyMCE Advanced plugin, you can quickly and easily add images into posts and pages by simply clicking on a menu icon …

How To Add And Format Images In WordPress Posts And Pages

This will bring up an Insert/Edit Image box like the one shown in the screenshot below, allowing you to enter an image URL, image description, title, etc. before adding the image into your post or page …

How To Add And Format Images In WordPress Posts And Pages

How To Format Images In Your Posts Or Pages

Once you have uploaded and added an image into your post or page using one of the methods shown above, the next step is to format your image so it displays well on your site.

In the next section, you will learn a number of different ways to format images in WordPress.

How To Format Images In The Insert Media Screen

Before adding an image into a post or page, the Insert Media screen gives you a number of options for editing and formatting your image file …

How To Add And Format Images In WordPress Posts And Pages

To learn more about editing media in the Media Library, see this tutorial

The Attachment Display Settings allow you to specify formatting options for your image:

You can select an Alignment for your image …

How To Add And Format Images In WordPress Posts And Pages Left: Place the image on the left of your post or page content. Text is wrapped around the image …

How To Add And Format Images In WordPress Posts And Pages

Center: Center your image on the post or page. Text is not wrapped around the image …

How To Add And Format Images In WordPress Posts And Pages

Right: Place the image on the right of your post or page content. Text is wrapped around the image …

How To Add And Format Images In WordPress Posts And Pages

None: No image alignment. Text is not wrapped around the image …

How To Add And Format Images In WordPress Posts And Pages

You can also associate your image with a Link To destination …

How To Add And Format Images In WordPress Posts And Pages

Custom URL: Select this option to link your image to a URL of your choice (e.g. your home page or product page). Clicking on this image in a post or page will send the visitor to the URL location specified in the Custom URL field …

How To Add And Format Images In WordPress Posts And Pages

Media File: Select this option to link your image to the folder where your image file has been uploaded. Clicking on this image in a post or page opens up a full-size copy of your image on your visitor’s browser …

How To Add And Format Images In WordPress Posts And Pages

Attachment Page: Select this option to link your image to the media attachment page. Clicking on an image inserted into a post or page with this option will open up the file’s attachment page (See this tutorial for information about attachment pages) …

How To Add And Format Images In WordPress Posts And Pages

None: Select this option if you want to remove all links to the image. When an image with this setting is inserted into a post or page and clicked on, nothing will happen …

How To Add And Format Images In WordPress Posts And Pages

You can also choose a Size for your image …

How To Add And Format Images In WordPress Posts And Pages

Note: You can change the default size of your image thumbnails in the WordPress Media Settings page …

Adjusting Image Placement And Size

You can move an image around your text by selecting it with your mouse, then dragging and dropping it into a different area of your post or page editor window …

How To Add And Format Images In WordPress Posts And Pages

To edit an image once it has been inserted into your post or page, click on the image with your mouse and select the Image Edit icon …

How To Add And Format Images In WordPress Posts And Pages

The Edit Image screen will open up …

How To Add And Format Images In WordPress Posts And Pages

In the Edit Image screen, you can do the following:

Size: This allows you to scale your image from 100% down to 60% of its current size. This is useful if you want to adjust the size of your image to something other than the default full size, Large, Medium, and Thumbnail size options presented when you insert the image. Slide your mouse over the settings to enlarge or reduce the size of your image, then click to set the size option.

Alignment: This is where you control how your text aligns or wraps around your image. Select either left, center or right alignment and the image preview will change to show you how this will affect the image and text on your page.

You can also specify a Title for your image, Alternative Text (Alt text), Caption, and Link URL (See previous sections of this tutorial and this tutorial for more details about these options.)

When you’re done editing your image, click Update to save your new settings, or Cancel to exit the screen without saving your changes …

How To Add And Format Images In WordPress Posts And Pages

How To Resize Images – In-Content Image Resizing

You can resize your image directly in the Visual editor by clicking on the image, selecting any of the standard resizing handles and moving the mouse to make the image smaller or larger …

How To Add And Format Images In WordPress Posts And Pages

Note: Your image may become distorted or blocky depending on how you resize it.

How To Resize Images – Adding Thumbnail Images To Posts

To add a thumbnail image to your post, place your cursor where you want the thumbnail image to appear in your content and click on the Add Media button …

Using Featured Images In WordPress Posts

This will bring up the Insert Media screen …

How To Add And Format Images In WordPress Posts And Pages

Select the image you want to insert into your post as a thumbnail and then choose Attachment Display Settings > Size > Thumbnail from the drop-down menu in the Attachment Details column …

How To Add And Format Images In WordPress Posts And Pages

Click Insert into post

How To Add And Format Images In WordPress Posts And Pages

Your thumbnail image will be inserted into your post in the location where you placed your mouse cursor …

How To Add And Format Images In WordPress Posts And Pages

To learn how to change the default size of your thumbnail images, see this tutorial

Using The Advanced Settings Tab To Edit Your Image

To access the Advanced Settings tab, click on the image edit icon…

How To Add And Format Images In WordPress Posts And Pages

Click on the Advanced Settings tab…

How To Add And Format Images In WordPress Posts And Pages

In the Advanced Image Settings section you can:

  • View the Source URL of your image (if your image is stored in a different server, enter the full URL to the image here)
  • Enter a custom Size for your image or click on the Original Size button to restore the image to its original size
  • Enter a CSS Class – You can add or override CSS classes for your image here.
  • Add Styles – Apply individual CSS styles to the image.
  • Adjust Image properties like adding a border (enter “0” for no border, or specify a border width in pixels, e.g. “2”), vertical spacing and horizontal spacing (enter the number of pixels for these).

Below the Advanced Image Settings you will find the Advanced Link Settings section. This includes the following options:

  • Title: Enter text here to display the image title as a tooltip (the text will appear when visitors hover their mouse button over your image).
  • Link Rel: You can add link rel attributes to your images (e.g. “nofollow”).
  • CSS Class: Use this field to apply a CSS class to the link.
  • Style: Use this field to apply individual CSS styles to the link.
  • Target: Select whether you want the link to open in a new window or the same window.

Remember to click the Update button to save any changes made to these settings …

How To Add And Format Images In WordPress Posts And Pages

Practical Tip

Tip#1 – If you notice that an image appears to be distorted, or if you replace an image on your server with another image of a different size, then click on Image Edit > Advanced Settings > Original Size button to restore the image dimensions to its correct size …

How To Add And Format Images In WordPress Posts And Pages

Remember to click the Update button to save your settings …

How To Add And Format Images In WordPress Posts And Pages

How To Add Images To Your Sidebar

In version 4.8, WordPress introduced a WordPress Image Widget that lets you add an image to your sidebar from your media library or an external storage location …

Add an image to your sidebar with the WordPress image widget

(Add an image to your sidebar with the WordPress image widget)

To learn how to add and display images on your sidebar using the WordPress image widget, see this tutorial:

Congratulations! Now you know how to insert and format images in WordPress posts and pages.

How To Add And Format Images In WordPress

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

***