Another question that I get asked about using WordPress is, “How do I add photos and video to the website?” And the answer is, WordPress makes it easy for you to add images and media to your web pages and blog posts.
Uploading and Managing Images with the Add Media Button
While you’re editing or creating a page or post on your WordPress powered website, simply click the prominent “add media” button in the upper left above the content editor.
This button will open up a dialog window that asks you if you would like to use one of the images that have already been uploaded to your website, or if you would prefer to upload a new image.
From the new image upload dialog, the easiest way to upload an image is to seamlessly click a photo on your computer’s desktop or file system, and simply drag that photo into the photo upload dialogue in WordPress. WordPress will upload your photo to your website for you, and then present you with options for the metadata that will be saved along with a photo, which includes the photo’s title, its alt-text and linking and alignment options. (However, please note that you cannot drag an image directly into the “upload” interface from another software program. You have to save the image to your computer first. Always respecting copyright laws!)
By default, WordPress will always ask you to link the image to a Media Resource page. However for me personally I find that these media resource pages provide very little additional value; and therefore I almost always change the drop down menu to select “none” from the linking preferences.
As you add your image to your page or post within WordPress, you will be presented with the option of how to align the image and what size it should be. Generally you want the image to display at the highest possible resolution; and conveniently, WordPress now automatically shows a smaller version of the image to devices that support modern css3 functionality.
Click the “Insert into page” button and you will see your image within the content editor interface:
Adding .pdf files and other types of documents
This is also the upload dialog that you will use to add PDF files that you would link to from your document and serve from your own server. If you do not wish for the search engines to index your PDF files, be sure to go to the text editing tab for the text view and add a rel=”nofollow” attribute to your link HTML.
Adding .mp3 and other audio files
If you ever wish to add an mp3 file such as streaming audio to your webpage you can do so from the same “Add Media” dialog.
This is super-cool: select an .mp3 file from the media manager, and WordPress automatically generates a shortcode.
When the page is rendered, the shortcode is dynamically processed and converted into a media player within the visitor’s web browser, if supported. (If not they should still be able to download the file.)
Note that an mp3 file served in this manner will not play automatically on the visitor’s browser. The obtrusive, autoplaying Flash plugin animation is a thing of the past. Instead, the visitor must click the link to access the file before they will be able to stream it.
Your website is not a streaming media server
I use “stream” loosely here. Properly speaking, your website’s server is not a media streaming server. Actual streaming media servers are configured specifically to serve large media files to your website visitors and to handle very heavy data loads.
Adding video content to WordPress pages and posts
Your web server is not configured to stream large media files. That’s why, if you want to add video to your website, you’re not going to do it through the media manager interface that we just discussed. Instead, if you wish to add a video to your website, the best way to do it is to upload your video to a video streaming service such as YouTube or Hulu. Once you’ve done that, find the link below your video that says something like, “Share” or “Embed this content.”
Click the “embed” link and the website will present you with HTML source code for an iframe element. Copy this HTML using your browser; then return to your WordPress website and, from the “Text” view tab, paste the iframe HTML. (The shortcuts are Control/Command+C, Control/Command+V on a standard computer, or “long-press, copy, long-press, paste” on a mouseless device interface.)
Click “Update” or “Publish.” This will now display your video to visitors when they land on your website, and present them with the option to click the “play” button and watch your video right there on the website without actually having to go to YouTube or Hulu or wherever you have hosted your streaming media.
This way the streaming media content provider of your choice gets to deal with the hassle of figuring out how to make their server withstand the heavy load of serving large media files potentially to many people at the same time; and you can sit back and enjoy while website visitors view streaming video without leaving your website.
The “Media” screen
Now that you have added your images (or potentially your PDF files and Word documents) to your webpage or blog post, you can conveniently manage them from the “media” link, on the left hand side of the WordPress admin view screen.
This interface provides you with options to edit and delete images. You can delete them and remove them from the website entirely. However, note that if you have embedded one of the images in one of your posts, the image source code will remain in the post even after the image has been deleted from your media manager. WordPress does not delete that automatically. And therefore if you delete an image that you’ve previously embedded in your content, you need to make sure that you go to that page or post and remove or edit the image source code. You need to serve a different image, or to not serve an image at all; otherwise your visitors will see a broken image link or 404 “file not found” error.
Is this clunky?
One criticism that I’ve heard of WordPress in comparison with other (usually paid) content management systems is that WordPress’s media management interface gets a bit clunky and unwieldy; especially if you are managing a website with a very large number of photos or images, say in the thousands or tens of thousands. It can be quite difficult to find an image that you’re looking for to make an edit to it if you have to scroll through the media manager because the media manager will actually take time to load a version of every single image that you scroll through.
But the interface is no longer strictly visual, so it’s getting easier to search for images by for example their alt text or other HTML attributes. You just have to be sure you add these attributes when you save the images…
Also, there are probably media management plugins that can help you deal with this challenge if you do have a website of that size. (Know of one? Shout it out in the comments, or contact me through the form if you’re stopping by after the comments close.)
Not a problem
For most people, if your website has say 12 – 36 pages and you write a blog post every couple of weeks (which would be a very good rate of engagement for most local small business owners) then you probably really don’t need to worry about managing thousands upon thousands of photographic images. That’s really something that only affects large news sites or media outlets.
Featured Image
Finally I think it’s worth noting that depending on your theme you may have the option to add a “featured image” to your page or post. A featured image shows up usually at the top in a prominent position, and is formatted differently from standard images that have been added to a page or post. Often the featured image is the full width of the content area in your website content area, whereas a standard image that’s been added to a page your post will be formatted so that the text flows around it (especially if you have left or right aligned it).
The featured image interface
Find the featured image link on the right hand side of the content editor page, usually at the bottom below the other options. (In this screenshot, I’ve already set the featured image.)
Click the featured image link. It will open up the media management dialogue. You can upload a new image or you can select an image that you previously uploaded. And then once you’ve done all that, be sure to remember to hit save!
And that is how you add images and media content to your WordPress web site web page blog or post. If you have any questions please don’t hesitate to contact Mardesco, and I’ll be happy to help you get your website set up and running.