Adding Images and Other Media to a Post or Page
Prerequisite Topics
There are three ways to add media to a post or page:
- With the Media Library
- With a URL or embed code
- With Page Builder
Adding Media with the Media Library
Opening the Media Library
To add images and other media to a post or page, you must first navigate to the post or page you want to add media to. Edit the post or page.
Once in the Edit screen, place your cursor in the text editor where you want to add media. Then, in the upper left corner of the text editor, click the Add Media button.
Your Media Library, along with all your existing media, will pop up in a modal.
Selecting Media
In the Media Library modal, you can select from existing media, upload new media from your computer, or you can insert media with a URL.
Uploading New Files
To insert new media from your computer, click on the Upload Files tab. You can drag and drop files from your computer onto the Media Library window, or you can press the Select Files button to browse and select files from your computer. Once you add a new file, it will be added to your Media Library. You will be directed back to the Media Library tab, with the new file already selected.
When you select a file in your library, you will be able to see a section called Attachment Details on the right. Here you can see information about the file, add metadata, sort the file into categories, and configure display settings.
Insert Media from URL
To insert media with a URL, click on the link on the left side of the modal that says Insert from URL. Here you can add a direct URL of the media you want to add. Depending on the file type, you will be prompted to fill out metadata.
Adding Metadata
Metadata is data about the attachment. In the Media Library, that is the URL, the title, the caption, alt text, and the description. The URL and title will automatically be generated. The only other section that is required to fill out is the alt text, because of its importance to web accessibility.
Alt text is important for people who cannot see images. Alt text is what is read to people who use screen readers. It will also appear if a user hovers over the image. Alt text should describe the contents of the image. This way, people with vision impairments or people whose browsers do not display images can still enjoy the content of your website.
If you add new media through the file upload or with a direct URL, remember to fill out the metadata. If you select media that already exists in your Media Library, check to see if the metadata has been filled out.
Attachment Display Settings
After you finish adding metadata, scroll down to Attachment Display Settings. The available options are:
Alignment: Align your media to the left, center, or right side of your page.
Link To: Link directly to the media file, to an attachment page, or to any URL, or remove the link entirely by selecting None. In most cases, it is recommended you select None.
Size: When you upload an image to the Media Library, it automatically generates a few different-sized versions of that image. Select the size you wish to use.
Insert Selected Media
After you have selected the media you wish to add, filled out its metadata and configured its display settings, you can click the Insert into post or Insert into page button. This will insert the media where your cursor was resting in the text editor.
Editing Media
If you need to make changes to the images or other media you have already inserted, you can click on them in the text editor. Once selected, a toolbar will pop up above or below the image.
You can change the alignment in this toolbar, or you can click the pencil icon to edit. For images, a modal called Image Details will pop up. Here you can edit the caption and alternate text, change display settings, and configure advanced options. Click the Update button to save any changes.
Saving Changes
After you have inserted media into your post or page, remember to save your progress. For new posts and pages, click Save Draft or Publish in the Publish box. For existing posts and pages, click Update in the Publish box. This will save your changes. Your media is now visible on your page.
Adding Media with a URL
You can add media from third party websites simply by copying the direct URL of the image, video or other media, and then pasting it into the text editor. After a moment, your media will show up in the text editor just as it will on the post or page.
Sites also commonly provide embed codes for their media. If the direct URL does not work, more than likely you'll need the embed code. If you copy the embed code, you must paste it in the text view of the WordPress Text Editor, not the visual view. After pasting the embed code in the text view, if you switch back to the visual view your media will be visible.
It is good to be cautious about using third party hosting, because it can sometimes be unreliable. If the site takes down the image or video that you link to, or the site itself goes down, your media will no longer show up on your page. It's good to use established, reliable sources that are unlikely to fail.
On the other hand, third party hosting can be advantageous, because your site will run much faster. A page with a video from YouTube will load much quicker than a page with the same video hosted through your Media Library.
As with media inserted through the Media Library, you can click media inserted with a URL or embed code to edit it. Remember to add metadata, and to save your changes.
Adding Media with Page Builder
If Page Builder is active on the page or post you wish to edit, adding media requires a different process. This article assumes that you already have some basic knowledge of how Page Builder works. To learn more about Page Builder, see our Page Builder category in the knowledge base, or read our article about Page Builder Basics.
First, launch Page Builder on the post or page you want to add media to. In the sidebar, there are multiple modules you can choose from.
If you add the Text Editor module to your page, you can add media the usual way, with the Add Media button above the text editor.
Alternatively, you can use the Photo module to add an image. You can add a video with the Video module. And you can add an audio file with the Audio module.
All of these modules will direct you to the Media Library. As with the text editor, you can select from existing files, upload new files, or add files with a direct URL. Remember to add metadata.
Display options will be different, however. These modules come with their own unique display settings. Additionally, rather than choosing alignment or placing the media where your cursor was resting in the text editor, you can arrange your media on the page by grabbing the module, then dragging and dropping it where you want it.
When you have added and arranged your media, you can save your changes by pressing Done in the Page Builder header. Select Publish Changes to immediately apply changes to the page and make them visible to the public. Select Save Changes and Exit if you want to save your changes, but not make them visible to the public yet. Discard Changes and Exit if you do not wish to save your changes.