Chapter 5: Creating Visual and Audio Content

Just because the program is called WordPress does not mean pictures and sounds are not welcome. In fact, WordPress provides all the tools you need to use images, audio, and video files with your blog.

9781118583951-co0501.tif

Consider Media Issues

Understanding Display and Image Dimensions

Review Media Settings

Prepare Images for Uploading

Upload and Insert an Image While Posting

Edit an Image While Uploading

Format an Image from the Edit Image Window

Add Images to the Media Library

Insert Images from Web Sources

Using Images to Enhance Posts

Add a Caption to an Image

Wrap Text Around an Image

Determine the Image Target

Understanding Unattached Images

Attach Images to a Post

Insert an Image Gallery

Add a Slide Show to Your Posts

Link to YouTube and Other Videos

Upload Video Files to Your Host

Link to a Podcast or Sound File from Your Blog

Consider Media Issues

A blog rarely includes words and only words. You, too, can enrich your readers’ blog experience by including images, sounds, and even video — your own or those created by others, if you have the proper permission. For best results, it helps to understand a bit about how the Internet handles your media. You also are smart to remember that while media can enhance your site, poorly executed images, videos, and podcasts can detract or make your site look decidedly amateurish.

Images and Dimensions

Web browsers display images according to the number of pixels specified for them. If you upload an image 1600 pixels wide, but you have room only for a 500-pixel image, the browser reduces the 1600-pixel image to display it at 500 pixels. The large image causes the page to load more slowly than if you had uploaded a 500-pixel image.

9781118583951-cf0501.eps

Media Selection

Well-chosen media enhances a blog, but too much or poorly chosen media can be a distraction. Well-chosen media includes a map that shows a location you recommend, a photograph that illustrates a point you have made, or a video clip that demonstrates a process you describe. A poor choice might include a fuzzy photo that fails to make the desired point.

9781118583951-cf0502.eps

Media and Memory

One picture may be worth more than a thousand words in terms of computer storage. Sound and video files use even more storage space. In fact, WordPress.com requires you to pay for increased storage if you want to upload sound and video. If your blog is self-hosted, make sure you have enough space with your host to store sound and video files.

9781118583951-cf0503.eps

Off-Site Image and Video Storage

Instead of storing your image, sound, and video files with your web host, you can store them with a hosting service and then link to your files. Flickr, Photobucket, and Picasa are among the free image-storing services available. Video hosts include the well-known YouTube and Vimeo. You also can take advantage of the hosts’ audience to build traffic to your blog. If you embed the work of others, make sure you have their permission.

9781118583951-cf0504.eps

Off-Site Music and Podcast Storage

You can store and link to your audio files at SoundCloud and podcasts at Liberated Syndication, also known as Libsyn, among others. At WordPress.org sites, the Blubrry PowerPress plugin comes as a recommended and easy way to host your podcasts. You also can link to other people’s sound files, such as those at BandPage and Spotify. Yes, you also can embed slide shows and store and serve documents from your WordPress blog, both the self-hosted and the WordPress.com varieties.

9781118583951-cf0505.eps

Where to Begin

The media options can seem a bit overwhelming. As with so many aspects of your blog, you are wise to step back and do some thoughtful planning about how media can tie in to your blog’s purpose. Displaying every media type possible not only requires lots of work on your part but it also stands a good chance of making for a confusing site. Thus, the best place to begin is by choosing the medium that best advances your purpose, learn it well, and use it. Then add another medium only when you are sure it benefits your blog and when you have the time to learn and use it.

9781118583951-cf0506.eps

Understanding Display and Image Dimensions

If you want to consistently get the best media display for your needs, you first need to understand how computers display objects. In the physical world, we tend to think of a dimension as a dimension. That is, an inch or a centimeter looks the same regardless of where you measure or whether you use a metal ruler or a plastic one, variations of accuracy aside. A pixel does not work quite that way. A pixel is a pixel, but the way it looks depends on your screen resolution.

Screen Resolution

You can understand the concept better if you view a few things on your computer with the monitor set at different screen resolutions. First, open a web page or any window on your machine. Then, on a Windows 7 or Windows 8 computer, right-click in the desktop background and click Screen resolution in the pop-up menu. In the box that appears, click the Resolution drop-down arrow, and move the slider to a lower resolution. Click Apply, and then look at how the windows change appearance. The pixel settings of the content are the same, but they look different because the lower-resolution display makes things look larger but less clear. Mac users go to System Preferences and Display.

9781118583951-cf0507.eps

Image Resolution

The concept of image resolution, by comparison, is entirely a physical concern when you want to print digital images. With printed images, the more pixels you pack into an inch, the sharper and smaller the image is. But for online display, you can take an image of 400 by 600 pixels and save it as three separate files with three different image resolutions, such as 300 pixels per inch, or ppi, 200 ppi, and 72 ppi. All three images appear exactly the same when you upload them to the Internet.

9781118583951-cf0508.eps

Take-Away Message

If you remain confused, just remember one thing: The image you upload displays online according to the image’s dimensions stated in pixels. Therefore, uploading an image that is 3200 pixels wide makes no sense if you never intend to display it any wider than 800 pixels. Uploading a large image will, however, take longer, use more storage space, and make it possible for others to make a good print of your image, which you may not want them to do.

Review Media Settings

The Media settings let you set standard image sizes for a consistent look. These settings can save you time and trouble in the long run. Until you settle on a permanent theme, however, you may want to stick to the default settings, as the maximum width may vary from theme to theme. If you are not sure how wide your blog is, you may be able to find out from the theme developer, from the WordPress.com theme showcase, or by using one of the developer toolbars discussed in Chapter 13.

Review Media Settings

At WordPress.org

001 Click Media under the Settings menu in the left menu bar.

The Media Settings panel opens.

002 Review the thumbnail, medium, and large dimensions to make sure they are appropriate for your blog and theme.

Note: You can use the Information button in the Web Developer Toolbar introduced in Chapter 13 to determine your blog theme’s dimensions.

003 Click Crop thumbnail (9781118583951-ma002.tif changes to 9781118583951-ma003.tif) unless you want thumbnails to display to an exact size that you specify. (This option is unavailable at WordPress.com.)

004 Click Save Changes.

9781118583951-fg0501.eps

At WordPress.com

001 Review settings as for WordPress.org above.

002 Deselect the Enable carousel check box (9781118583951-ma003.tif changes to 9781118583951-ma002.tif).

003 Ignore the Video Player setting for now.

Note: This setting applies only if you purchase the VideoPress add-on discussed later in this chapter.

004 Click Save Changes.

9781118583951-fg0502.eps

Prepare Images for Uploading

When you take the time to edit and resize images before you post them on your blog, you assure that your images look their best and do not slow down your site. Although WordPress provides some online editing tools, you may do better with an image editor to prepare your photos and other images. It can be a simple and free program, such as GIMP or Picasa or Preview for Mac, or the do-it-all Adobe Photoshop. If you have a digital camera, it may provide a basic editing program, too. Online image editors, such as Pixlr and PicMonkey, are other options.

Crop to Focus Interest

Crop is the term that editors use for trimming images. Use your editor’s cropping tool to eliminate distracting activity, objects, or blank areas or to zero in on the item of particular interest. Save an unedited version of the photo, although your editor may do so automatically, in case you change your mind.

9781118583951-cf0509.eps

Adjust the Image

Take advantage of the editor’s tools to eliminate red eye in flash photos, to straighten out sloping horizons, and to correct poorly rendered color, contrast, and other image flaws. You want people to see the image, not be put off by its shortcomings.

9781118583951-fg0503.tif

Annotate the Image

Add arrows, labels, and other notations to your image if they would help readers. For example, a simple Start here and an arrow can make a map much more meaningful to your readers than a large amount of text. Similarly, clear labels on graphs aid in understanding.

9781118583951-cf0510.eps

Save the Image

After you finish editing, you need to save your image in a file format that web browsers can display properly. The acceptable formats are JPEG, which stands for Joint Photographic Experts Group; GIF, or Graphics Interchange Format; and PNG, for Portable Network Graphics.

9781118583951-cf0511.eps

Choose a File Format

GIF is best for images with few colors because it retains quality and creates a small file. GIF often is good for logos. JPEG supports millions of colors and thus is good for photographs, but it creates bigger files unless you increase compression, which reduces JPEG image quality. PNG is the newest format and shares many GIF advantages, but a few old browsers may not support it.

9781118583951-cf0512.eps

Resize the Image

Chances are reasonably good that your image is bigger than you want on your blog, especially if you downloaded it full size from a digital camera. View the image at 100 percent size in your image editor to see how big the image really is. Use your editor’s resizing tools to reduce it to the largest size you would want it to appear on your site.

9781118583951-cf0513.eps

Upload and Insert an Image While Posting

By using the tools that WordPress provides, you can upload your images from your computer in a batch or one at a time. Then you can insert them into your blog posts to add some visual pizzazz to your site. As you insert them, you need to add some information to help readers and search engines understand your image. You can upload and insert images as part of your post-writing process or as a separate operation, and WordPress offers multiple upload methods. One is sure to follow your preferred way of working.

Upload and Insert an Image While Posting

001 From the Add New Post or Edit Post page, click in your post at the location where you want to insert your image.

002 Click the Add Media button (9781118583951-ma063.tif).

9781118583951-fg0504.eps

The Insert Media window opens.

003 Click Upload Files.

9781118583951-fg0505.eps

The Upload Files panel appears.

004 Drag an image from a folder on your computer to the upload window, and release the mouse button when the border of the drop-files area changes color.

9781118583951-fg0506.eps

A Bars appear, showing the upload progress.

9781118583951-fg0507.eps

Adding information to the image as you insert it into your post lets you give readers information about the image. It also can help you keep track of images in the Media Library you add to every time you upload an image. If you want to reuse an image, it is easier to find one named green_apples.jpg than to figure out that the one named DSC123_456 is the image that you want. The information in the Title field is what appears in the Media Library image list.

The upload finishes.

B A thumbnail of the image with a checkmark confirms that the image is selected for insertion.

C The Attachment Details pane shows the filename, upload date, and size.

005 In the Title box, type a name for the image’s listing in the Media Library.

Note: The default is the image’s filename.

006 Type alternate text to describe the image.

9781118583951-fg0509.eps

007 Scroll down to the Attachment Display Settings.

008 Choose a size from the Size drop-down list.

009 Click Insert into post.

9781118583951-fg0510.eps

The Add Media window disappears, and the Edit Post window displays the image at the cursor location.

010 Click Save Draft/Update Post, depending on whether the post is a new draft or an existing post, to save the change.

011 Click Preview.

9781118583951-fg0511.eps

A preview of the post’s individual page appears with the image inserted.

9781118583951-fg0512.eps

Edit an Image While Uploading

You can edit an image as you upload it, a handy feature should you belatedly realize you overlooked some needed changes. Perhaps you should have cropped out a portion of the picture or realize that you need to rotate the image. Easy-to-use tools allow you to correct those problems as part of the posting process. Start by clicking Add Media on the post-writing panel as described in the preceding task and uploading an image. The editing task occurs within the Insert Media window. WordPress retains your original image.

Edit an Image While Uploading

001 Click Edit Image.

9781118583951-fg0513.eps

The Edit Media panel appears.

002 Click Scale Image.

The scaling area expands.

003 Type the desired maximum display width.

A WordPress automatically adjusts image height proportionally.

004 Click Scale.

9781118583951-fg0514.eps

WordPress saves the change.

005 Click and drag your mouse pointer within the image to define an area to crop.

006 Click the Crop button (9781118583951-ma081.tif).

WordPress crops the image.

B You can use these buttons to rotate the image to the left or right and flip it vertically or horizontally.

007 Click Save.

008 Click Update.

009 Click X to close the Edit Media tab.

9781118583951-fg0515.eps

010 Click Refresh.

The dimensions and cropping update on-screen, and Refresh changes to Edit.

011 Add information if desired.

012 Click Insert into post.

The edited image is inserted into your post.

9781118583951-fg0516.eps

Format an Image from the Edit Image Window

Once an image is inserted into a post, you can move it around, adjust its size, alter or add borders, and more. It all starts by clicking the image in the Edit Post window. When you do, size handles appear around the image, which you can drag to change size. You also can click in the middle of the picture and drag it to the location you prefer. Or you can click a button to edit image properties such as the wrap settings, size, and link.

A Image Handles

Click and drag corner handles to resize an image proportionally. Click and drag a side handle to stretch or squeeze an image. You can click anywhere within the image and drag it to a new location in the post.

B Edit Image

Click to open the Edit Image window to edit size, link, caption, and alignment settings and Advanced Settings, as explained on the next page.

C Delete Image

Click to delete an image from its location in a post, but not from the Media Library.

9781118583951-fg0517.eps

A Size Scale

Click to resize an image display to a percentage of the inserted size.

B Alignment

Click to specify whether image is in line with text via the None setting or whether the image aligns to the left, right, or center relative to the text.

C Edit Options

Click to enter or change the information you provided when you uploaded your image.

D Update/Cancel

Click to save or cancel changes you made in the Edit Image window and then return to the Edit Post window.

E Advanced Settings Tab

Click to open the Advanced Settings window.

9781118583951-fg0518.eps

A Original Size

Click to reset the image to the uploaded size.

B Image Properties

Click to add or alter borders and spacing around the image.

C Advanced Link Settings

Click to edit characteristics of links associated with the image. These are useful if you are familiar with HTML and CSS.

D Update/Cancel

Click to save or cancel changes you made in the Advanced Image Settings window and return to the Edit Post window.

9781118583951-fg0519.eps

Add Images to the Media Library

Depending on how you work, you may find it more convenient to upload your images without worrying about where they go in your blog posts. You can do that by adding them to the Media Library with the multi-file uploader. The Media Library also provides a searchable repository for your images and other media. When you add images to the library this way, they are not associated with any posts until you add them to a post.

Add Images to the Media Library

001 Click Media in the left menu bar.

The Media menu expands, and the Media Library window opens.

002 Click Add New.

9781118583951-fg0520.eps

The Upload New Media panel opens.

003 Click Select Files.

Note: You also can drag and drop images, as described in “Upload and Insert an Image While Posting,” earlier in this chapter.

9781118583951-fg0521.eps

A file selection window opens.

004 Select the file or files you want to upload.

Note: Press ctrl.eps (cmd.eps on a Mac) to select multiple files.

005 Click Open.

9781118583951-fg0522.eps

WordPress uploads the files to your server and stores them in your Media Library.

006 If desired, click Edit to edit image properties, as described in “Edit an Image While Uploading,” earlier in this chapter.

007 Click Media to return to the Media Library.

9781118583951-fg0523.eps

Insert Images from Web Sources

You can save storage space on your web host when you insert images based on other websites. You do not have to download or upload the image files; you embed, or link, them with a URL. Sometimes, though, this can slow your page loading time because your page must retrieve the image from the other site or set the stage for a future broken link should that site’s owner change or delete the URL. Get permission from the image owner to use the image, unless the image is in the public domain or the website gives copyright permission.

Insert Images from Web Sources

001 Right-click the image to which you want to link (or cmd.eps+click on a Mac).

002 Click Copy Image Location.

The link is saved to your computer’s clipboard.

003 Go to your blog, and click Add Media at the top of the post- or page-writing panel where you want the image to appear.

9781118583951-fg0525.eps

The Insert Media window opens.

004 Click Insert from URL.

9781118583951-fg0526.eps

The Insert from URL view appears.

005 Paste a copied image URL in the URL box.

A The image to insert appears.

006 Type alternate text describing the image.

007 Click Insert into post.

9781118583951-fg0527.eps

B The Insert Media window disappears, and the writing panel displays the image where your cursor was.

008 Click Save Draft.

009 Click Publish to publish the post on your website.

Note: Media embedded into your blog through the URLs of other websites are not saved to your Media Library.

9781118583951-fg0528.eps

Using Images to Enhance Posts

You can get the best results from your well-chosen images when you use them not just for color but also to enhance the content of your posts. After all, if one picture is worth a thousand words, one picture plus a thousand words must be worth five thousand words, as long as the words and pictures complement each other. Earlier sections provided various ways to insert images. Now consider the best ways to use those images. Remember also that using a reasonably consistent pattern improves your blog’s visual identity.

Art for Interest

As with headings, you can use images to break up a large block of uninterrupted text. If you do not have a suitable image, you can consider microstock images in addition to the public domain images mentioned in the preceding section. Two popular microstock sites are iStockPhoto.com and Shutterstock.com.

9781118583951-fg0529.tif

Take Advantage of Images’ Words

Besides providing information for visitors using screen readers or other assistive devices, the alternate text for your images also leads search engines to your photos. The image title, which defaults to the filename, appears in some browsers when the mouse pointer rests over the image. The filename also can lead searchers your way. So, name it autumnleaves.jpg rather than img0235.jpg.

9781118583951-fg0530.tif

Captions Not Required

Just because your WordPress image-inserting window allows you to type a caption does not mean you must use that option (A). The caption feature generally puts a border around the image with the caption included. You may not like that look. The next section provides some options. And some images require no captions at all.

9781118583951-fg0531.eps

Consider Wrapping Text

You may want a powerful image to stand alone on a line using the None or Center format. An image that mainly illustrates your words, however, might work better with text wrapping around it, using the left or right alignment. Learn how in “Wrap Text Around an Image,” later in this chapter. Make sure the photo is small enough to allow at least three or so words to fit on every line beside it.

9781118583951-fg0532.tif

Offer Two Display Options

You can upload a large photo, say one that is 800 × 1200 pixels, but insert it in your post using the Thumbnail option or a percentage display. That represents the size that the image appears in the post, but readers can click the small image and see its larger version in another window. It does not hurt to tell them so (A).

9781118583951-fg0533.eps

Give Credit

Crediting the source of your images (A) is useful to readers — as well as to artists and photographers, perhaps including you. You can do it in alternate text, but doing it on-screen is nicer. Some people recommend doing it in both places. Also, if you do not want others to use your photos, declare your copyrights with each image.

9781118583951-fg0534.eps

Add a Caption to an Image

Captions provide added information to your readers about images that you post on your site. You can add a caption when you upload an image, or you can add it after the fact as part of your post. When you use the Caption field in the Media panels, WordPress includes the caption in the image’s display and uses the style specified in your theme’s style sheet. That is the easiest way to add a caption. If you want a caption but not the styling, you can add caption information in other ways.

Add a Caption to an Image

001 Click the posted image in the post-writing panel.

002 Click the Edit Image button (9781118583951-ma064.tif) that appears.

9781118583951-fg0535.eps

The Edit Image window appears.

003 Type a caption.

004 Click Update.

9781118583951-fg0536.eps

The posting panel returns and shows the caption.

005 Click Update.

006 Click View Post.

9781118583951-fg0537.eps

WordPress opens the post, where you can view the caption as the world sees it.

9781118583951-fg0538.eps

Wrap Text Around an Image

Wrapping text around an image lets the image be integrated into the text. You can set up the text wrap as part of your image-inserting process while writing a page or post. Place your cursor in the text where you want the image to appear, and click Add Media. After you choose the image you want to upload, you click the appropriate alignment setting. When you insert the image, the text wraps around it.

Wrap Text Around an Image

001 With an image selected in the Insert Media panel, click the Alignment box down arrow (9781118583951-ma040.tif).

002 Click Right.

003 Click Insert into post.

9781118583951-fg0539.eps

A The image appears, aligned right, in the post panel.

004 Click Save Draft.

005 Click Preview.

9781118583951-fg0540.eps

A preview of the post with the inserted image appears in a new tab.

006 Click X to close the tab.

9781118583951-fg0541.eps

The Edit Post page returns. You can click Publish (B) if you are satisfied, or click the image and then the Edit Image button (9781118583951-ma064.tif) to make additional changes.

9781118583951-fg0542.eps

Determine the Image Target

You can determine what happens when someone clicks an image on your site. The options include displaying the image by itself on an otherwise blank web page, opening a totally different web page, and displaying the image as an attachment page. An attachment page displays the image in the same format as a blog post. You also can set it so that a click on the image does nothing. At this writing, the WordPress interface makes the attachment page option a bit confusing, but you can work it out. Start by clicking the Insert Media button in the posting panel.

Determine the Image Target

When Inserting the Image

001 In the Insert Media window, click the Link To down arrow (9781118583951-ma040.tif).

002 Click Custom URL.

A Click here to open a blank web page displaying only the full-size image.

B Click here to open the image in an attachment page.

C Click here to cause no action when the image is clicked.

9781118583951-fg0543.eps

003 Type a target URL.

004 Click Insert into post.

WordPress inserts the image and associated URL. You then need to save or update the post. When you publish or preview the post, you can click the image, and it causes your browser to open the specified web page.

9781118583951-fg0544.eps

When Editing the Image

001 Click the image.

002 Click the Edit Image button (9781118583951-ma064.tif).

9781118583951-fg0545.eps

The Edit Image window appears.

D The current link target appears.

Note: In this case, the target is the image upload location, the equivalent of the Media File target option in the Insert Image window.

003 Click None.

The link target disappears, which means that clicking on the image creates no action.

E This is the equivalent of the Media File option in the Insert Media window, which causes the image to open in a blank web page.

004 Type a target URL in the Link URL box, the equivalent of the Custom URL in the Insert Image window.

005 Click Update.

WordPress updates image and associated URL. You then need to save or update the post. When you publish or preview the post, you can click the image, and it causes your browser to open the specified web page.

9781118583951-fg0546.eps

Understanding Unattached Images

WordPress developers continue to work with how the software manages the images you upload and store on your site. Understanding a little of the background may help to avoid potential problems such as accidentally deleting images in use on your site or filling your server storage with numerous unused photos if you run a self-hosted site. The WordPress ways of media handling have simplified some matters but confusion still occurs. The question of unattached images may never arise for you, but if it does, a little knowledge will prepare you.

What an Attached Image Is

When you upload and insert an image while posting, that image is forever associated, or attached, to that post. You can delete the image from the post or include it in another post, but as far as WordPress is concerned, it remains attached to the original post unless that post is deleted.

9781118583951-cf0514.eps

What an Unattached Image Is

An unattached image, unsurprisingly, is one that is not attached to a post. An image could be unattached for several reasons. A formerly attached image could become unattached if you delete the post to which it was originally added. An image could be unattached if you upload it directly to the Media Library without ever attaching it to a post. Similarly, images you upload via FTP to your site remain unattached until they are inserted into a post.

9781118583951-cf0515.eps

Images and Galleries

You may not think attachment matters, but it does. If you want to add a slide show to your post, for example, the images in the show generally need to be attached to the post. If your post reuses an image attached to another post, that image will not show up in your slide show. The same thing is true for galleries, or collections of images, as described in “Insert an Image Gallery,” later in this chapter.

9781118583951-cf0516.eps

Unattached Does Not Mean Unused

It is important to remember that unattached does not mean unused. As you maintain your blog, you may decide to reduce the load on your server or simply to eliminate clutter in your Media Library by deleting unused photos. Do not make the mistake of identifying and deleting all unattached photos. Here is what can happen. You have a post with an attached photo or two. Meanwhile, you create a new post and insert the same images, using the Media Library. Then you decide to delete the first post. The post goes away, but the images stay in the library as unattached. If you delete them from the Media Library based on their being unattached, you in effect delete them from the second post. Also, an image you use for your site’s background or header may be unattached even though in use.

Attached Does Not Mean Used

WordPress may create multiple versions of an image when you upload it. These versions fit the thumbnail, medium, and other size options. You do not see each version listed in the Media Library, but they are there, and most probably are attached to a post but not used. At this writing, however, there is no convenient way and no established plugin to identify and delete these extras.

9781118583951-cf0517.eps

Getting Attached

WordPress provides an easy way to identify unattached images and attach them to posts. The next section in this chapter explains how. You also can use the filter for unattached images to try to identify unused images if you want to delete them. Not all unused images appear in the Media Library, however. You may need to view the contents of the wp-content/uploads folder on your server to see all images stored there.

9781118583951-cf0518.eps

Attach Images to a Post

When you attach images to a post, you make them readily available for use in galleries and slide shows. WordPress has a convenient way for you to identify unattached photos. You can select the ones that you want to attach, identify the post to which you want to attach them, and soon the images are attached. This technique can be especially useful for you if you prefer to upload images in batches directly to the Media Library or to your host using FTP. WordPress lets you attach media individually or in batches.

Attach Images to a Post

Attach a Single Image

001 Click Media.

The Media Library panel opens.

002 Click Unattached.

The library filters for unattached images.

003 Position your mouse pointer over an image you want to attach and click the Attach link that appears.

9781118583951-fg0547.eps

The Find Posts or Pages dialog box appears.

004 Type a search term.

005 Click Search.

A list of posts containing the term appears.

006 Click the radio button next to the post to which you want the image attached (9781118583951-ma023.tif changes to 9781118583951-ma024.tif).

007 Click Select.

9781118583951-fg0548.eps

WordPress confirms the attachment, removes the item from the Unattached list, and reduces the number of unattached media.

9781118583951-fg0549.eps

Attach Multiple Images

001 Click Media.

The Media Library panel opens.

002 Click Unattached.

The library filters for unattached images.

003 Click the check box next to the images you want to attach to a post (9781118583951-ma002.tif changes to 9781118583951-ma003.tif).

004 Click the Bulk Actions drop-down menu, and click Attach to a post.

005 Click Apply.

The Find Posts or Pages dialog box appears.

9781118583951-fg0550.eps

006 Type a search term.

007 Click Search.

A list of posts containing the term appears.

008 Click the radio button next to the post to which you want the image attached (9781118583951-ma023.tif changes to 9781118583951-ma024.tif).

009 Click Select.

WordPress confirms the attachment, removes the item from the Unattached list, and reduces the number of unattached media.

9781118583951-fg0551.eps

Insert an Image Gallery

A WordPress image gallery gives you a quick and easy way to display a set of photos or other images on your website. The gallery displays thumbnails of the images, and then you can click individual images to view larger versions. You can create a gallery as you upload images to a post, or you can create it from previously uploaded posts. The Create Gallery option in the Insert Media window lets you choose images to display that are attached or not attached to your post. The WordPress.com version lets you choose among multiple possible gallery views.

Insert an Image Gallery

001 In a new or existing post, click Add Media and upload one or more images, as described in “Upload and Insert an Image While Posting,” earlier in this chapter.

9781118583951-fg0553.eps

002 After the images are uploaded, click Create Gallery.

A Newly uploaded images have check marks and will be added to gallery.

B Clicking on an image with a check mark changes the mark to a minus sign. Click it if you do not want that image in the gallery.

003 Confirm images for the gallery, and then click Create a new gallery.

9781118583951-fg0554.eps

004 Click and drag images to change their order.

005 Click here and type a caption if desired.

006 Click Insert gallery.

9781118583951-fg0555.eps

WordPress inserts a gallery placeholder.

C The gallery placeholder indicates gallery location in your post.

D The Edit gallery button, visible when you click the gallery placeholder, opens the Edit Gallery window.

007 Click Save Draft.

008 Click Preview to view the gallery.

009 Click Publish when satisfied.

The post with the gallery appears live on your site.

9781118583951-fg0556.eps

Add a Slide Show to Your Posts

Why limit yourself to an image or two, or even a gallery, if you can have a slide show simply and easily? WordPress recently integrated a slide show option in with its gallery interface, so the setup could not be easier. Self-hosted site owners also have numerous plugins to choose from to create and manage slide shows. The plugins typically provide more options than the built-in slide show, although the built-in version is likely to satisfy the average user. To create a slide show, you start out as you would to create a gallery, and then you choose the Slideshow display option.

Add a Slide Show to Your Posts

001 In a new or existing post, click Add Media.

9781118583951-fg0557.eps

002 Click all images you want to add to the slide show.

A A check mark appears in selected images.

003 Click Create a new gallery.

9781118583951-fg0558.eps

The Edit Gallery window appears.

004 Add captions if desired.

005 Click Slideshow in the Type drop-down list.

006 Click Insert Gallery.

9781118583951-fg0559.eps

The post window returns with a placeholder (B) for the slide show.

007 Click Save Draft.

008 Click Preview.

The post preview appears with the active slide show in new tab.

009 Click X to close the tab.

010 Publish or edit the post for future publication.

9781118583951-fg0560.eps

Link to YouTube and Other Videos

Videos are a little more trouble to deal with than images, but they can add a lot of visual energy to your blog posts. Using embedded videos through links may be the easiest way to get them up and running, and you do not have to use your own host space to store the videos.

You can link to most videos hosted at YouTube.com and at Vimeo.com, and you can upload your own videos there, too.

Link to YouTube and Other Videos

001 After you find the video you want to post on your blog at YouTube.com, click Share.

9781118583951-fg0561.eps

The linking box appears.

002 Click Embed.

A The embed code appears.

9781118583951-fg0562.eps

003 Scroll down to see embed options, and make any selections you want.

004 Scroll back up and copy the code.

9781118583951-fg0563.eps

005 Back at your WordPress Dashboard, start a new post, and click the HTML tab.

006 Click in the post where you want the video to appear, and paste the code you copied from YouTube.com.

007 Click Save Draft for a new post or Update for an existing post.

WordPress saves the post and inserts a placeholder for the video in the visual editor.

008 Click Preview to see how the video appears on your site.

A preview of your post appears in a new window, where you can click a Play button to view the video.

009 Click Publish to publish the post on your site.

Note: You can use the same process to embed a video on a page or an existing post.

9781118583951-fg0564.eps

Upload Video Files to Your Host

You have more control over the look and performance of your videos when you host them yourself. Doing so takes a few more steps than when you link to videos posted elsewhere. But, unlike most videos at YouTube, for example, you can show your videos without advertisements appearing along with them.

If your blog is hosted on WordPress.com, your first step is to buy the VideoPress upgrade. That upgrade allows you to upload and store your videos at WordPress.com.

Upload Video Files to Your Host

Basic Installation on a Self-Hosted Blog

001 On the New Post or Edit Post page, click Add Media.

9781118583951-fg0566.eps

The Insert Media window opens.

002 Click Upload Files.

003 Click Select Files.

Note: You can drag a file to the upload window if you prefer.

Your browser opens a file selection window, from which you select the video you want to upload and then click Open.

9781118583951-fg0567.eps

The Insert Media window returns and shows the progress of the upload.

A When the upload is complete, details about the video appear.

004 Type a title, which is the text that appears for a link to the video.

005 Click Insert into Post.

A link to the video file — but no image — appears in your post box.

9781118583951-fg0568.eps

Full-Featured Installation on WordPress.com

001 After clicking Store in the left menu panel and then buying the VideoPress upgrade, go to a New Post or Edit Post page, and upload as described in Steps 1 to 5 above for installing video on a self-hosted blog.

A message appears, informing you that your video is being processed and will be ready in a few minutes.

Note: If you use many videos you may also need to purchase a space upgrade.

002 While you wait for the video to be processed, go to http://en.support.wordpress.com/videopress to read detailed instructions on setting up your video.

9781118583951-fg0569.eps

Link to a Podcast or Sound File from Your Blog

With audio files, you can give your readers the sound of your voice, of bird calls, of music. Linking to such files is much like linking to videos, and you also can host them on your site if you do not want to embed or link to audio files. First, you need to find the audio file to which you want to link. Then you upload it, and a very basic audio player appears. Your readers can click it to hear what you have to say.

Link to a Podcast or Sound File from Your Blog

001 From the New Post or Edit Post window, click Add Media.

9781118583951-fg0570.eps

002 The Insert Media window opens, where you click Insert from URL.

The window changes to Insert from URL.

003 Type or paste the URL of your chosen audio file into the URL box.

004 Click here and type a title for the audio file. The title provides the link text.

005 Click Insert into post.

9781118583951-fg0571.eps

The Insert Media window closes, and a link to the audio file appears in the post box.

006 Click Save Draft.

007 Click Preview.

9781118583951-fg0572.eps

WordPress displays the post in your browser, where you can click the link to hear the sound file.

The sound file opens at its URL and begins playing.

9781118583951-fg0573.eps