All the really interesting websites in the world have pictures to illustrate their text and in this lesson you’ll discover how to make your website come alive by adding media. WordPress has some very powerful and flexible ways of handling media on a website and, in this lesson, we are going to look at several ways of doing so.
First, some background information. WordPress provides a folder within your website called the ‘Media Library’ which you can see under the heading ‘Media’ on the dashboard. This can contain images, documents, downloadable files etc. This is the depository of all of the images (and other media) that you have uploaded for use in your website.
Adding a picture into a post or page to illustrate your text is one way of making your web page look attractive and relevant. If you upload the picture when adding a post or page WordPress automatically loads it into the Media Library.
If you want to add an image for use later, you can upload it directly into the Media Library and then call it whenever you want it.
In this lesson I’ll demonstrate how to include a picture when you are writing or editing a page or post.
To add an image to a page or post, you need to have the image file stored on your computer as a JPEG, GIF or PNG file type, sized in pixels that will fit on your page and generally less than 2 megabytes in size.
One thing you need to be aware of is that images for display on browser screens do not need to be large or high resolution. If you upload an image larger than it needs to be then the danger is that it could slow down the loading of your page on the visitor’s screen.
If you want to display an image that will fill up the screen then around 1024 pixels x 768 pixels is about the maximum size that you actually need. Ideally, the images in your Media Library should be resized to be equal to or less than these dimensions before you upload them.
WordPress is quite flexible in handling images and will happily resize your picture to fit the available space in a post or page. But it’s worth just checking out the default settings for image sizes because your website will look more professional if you present your images in consistent shapes and sizes.
To do this, from the dashboard, go to ‘Settings’, ‘Media’ and you’ll see the default image sizes.
From here you can check out and change the pixel dimensions that WordPress will use when displaying your pictures. The standard ‘medium’ size is maximum 300 pixels height and maximum 300 pixels width. If your theme is wider than about 1000 pixels you may want to increase this to 400 or 500 pixels to display your images larger.
If you change the Media Settings be aware that the settings will apply only to images you insert after this: WordPress won’t retrospectively apply the settings to any images you have already inserted on posts or pages.
Add A Picture To A Post Or Page
To add an image to a post or page, first click on the point in your text where you want the image to appear. This can be anywhere within the text: right at the beginning, or in the middle of a text block or after the end. The image will be embedded exactly at the cursor point you select here.
Then click on the button labeled ‘Add Media’. A pop-up box appears, prompting you to locate the file you want to upload. You’ll see that there are two tabs at the top of the screen: ‘Upload Files’ and ‘Media Library’. Click on ‘Upload Files’ if this is not already displayed.
Then click on ‘Select Files’ and navigate to where you have stored the image on your computer. Click on the file you want to upload, and then click ‘Open’. The image file will be uploaded to your Media Library.
Click on the image you just uploaded.
Here you can see that the screen displays the image that you just uploaded to your Media Library and the ‘Attachment Details’ for the image on the right.
Now you can enter the title of the image, optionally a caption, alt text (alternative text to display on devices that don’t display images) and description. Entering descriptive details in these boxes will help the search engines index and classify your images and relate them to the text that you enter in your posts and pages.
Beneath this is the ‘Attachment Display Settings’. Here you can specify the alignment of the image – left, right, center or none. I encourage you to experiment with alignments because you can get some very striking effects with the right image in the right place.
You will also see that there is a ‘Link To’ box. This is where the visitor would be taken if they clicked on the image. You can change this link to anything you like: if this was a product you were selling you might replace this with a link to your order page.
If you leave the ‘Link URL’ unchanged and the visitor clicks on the image they will see a larger version of the image on their screen. If you don’t want the image to be a link then click on ‘None’.
Finally, you can choose the size of the image within the post or page. You will see that WordPress will resize your image proportionately as Medium or Full Size. Your options here are determined by the media settings you specified earlier in this lesson. Again, experiment with this to get the effects that you want for your website.
Then click on ‘Insert into post (or page).
You can see here how images can bring your site alive and make it unique to you.
Now let’s have a look at uploading images directly into the Media Library for use later.
Add A Media File To The Media Library
Sometimes you will want to add an image (or some other media) to be displayed somewhere on your website other than a post or a page. In that case, you need to upload it to the Media Library before you can use it.
For example, I have a graphic file on my computer that I want to place in my sidebar. I will cover how get the image into the sidebar in the next lesson but here I’ll briefly show you how to upload the image to the Media Library:
From the dashboard, click on ‘Media’ / ‘Add New’.
Click on ‘Select Files’ and upload the image as before. Then click on the image to display the ‘Attachment Details’ screen which enables you to enter any descriptive text. When you have entered any text just click on the screen again and it will automatically be saved.
That’s it. The file is now stored on your WordPress Media Library, ready for when you need it.
Add A Picture Gallery
If you are a photographer or an artist or anyone who wants to display a lot of pictures, you might want to add a gallery of pictures to a page or post. A ‘gallery’ is a way of displaying thumbnails of images on a page in a rectangular grid and when a visitor clicks on an image they can see it larger size.
In this case, it is preferable to prepare the images first on your own computer, so that they are all the same orientation and size (in pixel dimensions). That way the gallery display will look professional.
Before adding a gallery you should decide what size you want to display thumbnail images. By default, the thumbnails will be 150 pixels x 150 pixels. But you can change this by going from the dashboard to ‘Settings’, ‘Media’. This will display the Media Settings screen and you can change the dimensions of how WordPress will display future thumbnail images on your site.
Then, from the page or post where you want to display the gallery, click on the ‘Add Media’ button as before, but this time select multiple files to upload. You will see WordPress upload them one at a time to the Media Library.
Make sure that all the pictures you want are checked and then click ‘Create Gallery’ over on the top left of the screen. Then click ‘Create a new gallery’ in the bottom right of the box, then ‘Insert Gallery’. The big blue gallery icon will be displayed. You can add text before or after this icon.
Then Save or Publish your post or page and you can then view the page to see the gallery.
As you can imagine from what you’ve seen, there are actually a great many options for displaying images and other media in WordPress, some of which are rather specialized and would be of interest to people like photographers and graphic artists etc.
Also, there are a number of very fancy plugins you can use to display images in a slideshow or gallery that go way beyond the basic facilities shown here. We’ll have a look at some of these in Lesson 12. And some themes offer a ‘slider’ function that can include some very dramatic effects.
Add A Video
Videos are now a popular feature of many websites and WordPress makes it quite easy to include them in posts or pages.
For reasons which I explain in the FAQ below, I do not recommend that you upload videos to your Media Library. Instead, I suggest that you upload the video to YouTube (or one of the other white-listed video-sharing websites) and link to it from your website.
WordPress now provides a very easy way to display a video on your website from third-party video sites. Here’s how.
First of all, find the YouTube (or wherever) video that you want to use (either yours or someone else’s) and click on it.
In your browser’s menu bar you will see the URL of your chosen video. It will look something like this: https://www.youtube.com/watch?v=vll_2xH_SQY
Copy this URL to your clipboard.
Then go to the post or page where you want to display the video and, on a line of its own, paste the URL of the video just where you want the video to appear. Don’t make this into a hyperlink: just leave it as a line in the text.
WordPress knows that this is an approved video site and will translate the URL into an embedded video. Magic, or what?
The frame of the video is shown in the content of the post/page and when the visitor clicks on the ‘Play’ button the sound and picture plays from YouTube.
In this lesson I have shown the basic methods of adding images and media that you are most likely to use in a regular website. As ever, I encourage you to explore the options further for yourself if you want to be a bit more adventurous.
I added an image to my post but how can I move it to a different position?
In the ‘Edit Post’ page, click on the image that you want to move and drag it to where you want it. If that doesn’t work, click on the image and then click on the small ‘Edit Image’ icon that appears in the far top left of the picture. This displays a pop-up which allows you to edit the alignment, link, title, caption etc. Make what changes you want and then click the ‘Update’ button.
Or, if you want to start over, click on the image, hit the delete key on your keyboard, insert the cursor where you want the image to appear in your text and insert the image over again from your Media Library.
Then click ‘Update’ to update the post or page.
What’s a ‘Featured Image?’
You’ll see a box on the bottom right of a Post or Page a box that says ‘Featured Image’. This enables you to associate an image in your Media Library with a particular post or page so that that image can become a clickable reference point elsewhere on the site.
Different themes use featured images somewhat differently but this can create some dramatic effects. I cover how Twenty Fourteen uses featured images in Lesson 18 Featured Content.
How can I get one of those moving slideshows on my website?
There are a number of very good plugins that will display a slideshow of images and it is worth experimenting with several to find the one that suits you. Some slideshow plugins will display the gallery (see above) associated with a post or page while others will require you to upload your images separately.
Lesson 12 should give you a good start on this.
How can I add a video that I recorded myself?
It is possible to embed your own video files into a WordPress website but you do need to be aware that videos can be very large files and there is a file size limit that you can upload via WordPress into your Media Library. This restriction severely limits your options for displaying self-hosted videos.
And, because video files are usually very large and eat up bandwidth, if you have a basic hosting plan you may find that your hosting provider will want to charge you extra if you want to host your own videos on your own website.
The easiest way to show videos on your site is to upload the file to YouTube or Flickr (or any of the many other free video hosting sites) and use the code that they provide (as example shown above) to embed the file into your post or page as shown above.
Note: If you are reading this, you are probably building an online business. Do you know that using some powerful marketing software can help your business scale to the next level? As the marketing technology develops very fast in recent years, there is a lot of new software being launched every month. To help you decide what marketing software you should use, you can read the detailed reviews of the most innovative marketing software below: