Podcasting

So far, you’ve seen how to let viewers play individual audio tracks or a playlist with
a bunch of music on it. Podcasting is a similar, but slightly different, way to present
audio. It gives readers the choice of listening to audio files the normal way (in their
browsers by clicking the Play button) or downloading the audio files so they can
put them on a mobile device.
The central idea with podcasting is that you prepare content that busy people will
listen to on the go. Usually, the content is long—30 minutes to an hour is common
for podcasts. If your audio file is only a couple of minutes long, it’s not worth a visitor’s
trouble to download it and transfer it to a mobile device.
Podcast creators also tend to organize podcasts in groups—for example, they make
each audio file an episode in a series, and release them at regular intervals (say,
weekly). Good examples of podcasts include a web talk show with commentary
and interviews, a motivational lecture, a spoken chapter from an audio book, or a
45-minute techno mix for a workout session.

NOTE The word podcasting is a mash-up of pod and broadcast—pod because this form of audio file distribution
first gained popularity with the iPod music player, and broadcasting because a podcast creator provides
easily accessible, regularly released audio “shows,” a concept that’s a bit like television broadcasting.

CREATING PODCAST-FRIENDLY AUDIO

You don’t need any special technique to upload a podcast audio file. You can simply
create a post and add an ordinary link to the file. If you want to get a bit fancier, you
can use the audio player feature described on page 360. That way, visitors can play
the audio in their browsers if they haven’t caught the podcast bug.

You should save podcast audio as MP3 files, because a range of mobile devices can
play back that format. You can also create podcast video files, but that process is a
bit more complicated. You first need to make sure the video is in MP4 format, then
you have to upload it to a host, and finally you need to link to it from your post.
NOTE If you want to use a video file for podcasting and embed it so guests can play it directly inside their
browsers, you need the help of a high-caliber podcasting plug-in, as explained in the box on page 368.

GETTING YOUR PODCAST FEED

Although podcast audio is the same as normal audio, there’s a slight difference
in the way you present podcasts. For readers to find your podcasts quickly and
download new episodes easily, you need a way to separate these audio files from
the rest of your site.
To do that, you create a dedicated category for posts that contain podcasts. You
can give this category a name like “Podcasts” or “Lectures” or “Audio Book.” Then,
when you create a new post that has an audio file in it and you want to include
that audio as part of your podcast, assign the post your podcast-specific category
(Figure 10-23). Depending on the structure of your site (and the way you let viewers
browse it), you may decide to set two categories—one to identify the type of post
(say, “Sports”), and one to flag the post as a podcast (“Podcasts”).

You group audio files into a single podcast category so you can generate a feed for
that category. As you’ll learn on page 433, a feed is a sort of index to your content.
In the case of podcasting, your feed tells other programs and websites where to
get the podcast files on your site. It also lets you notify visitors when you publish a
new file—say, if they subscribe to your podcast in iTunes.
NOTE iTunes is one of the favorite tools for podcast-lovers. If your site offers podcasts and you’d like to use
them to attract new visitors (and why wouldn’t you?), you need to submit some podcast information to iTunes.
You can get the feed for a category using a URL with this syntax:
http://[Site]/category/[CategoryName]/feed
So if you have a site named http://dimagiosworkouts.com, you can get a feed for
the Podcasts category like this:
http://dimagiosworkouts.com/category/podcasts/feed
This is a valuable link—it’s the piece of information you need to supply to iTunes to
register your podcast.

To register with iTunes, start by reviewing Apple’s instructions at http://tinyurl.com/
podcastspecs. First, read the “Testing Your Feed” section, which explains how to
make sure your feed includes the podcast files you expect, and that the feed works.
Then, follow up with the instructions in the “Submitting Your Podcast to the iTunes
Store” section to learn how to officially tell iTunes about your feed, and make it visible
to a podcast-hungry audience of millions.

PLUG-IN POWER

Better Podcasting with a Plug-In

Podcasting with WordPress is easy. All you need is the right
type of audio file (MP3) and a post category just for podcasts.
However, if you’re a power podcaster—meaning you plan to
invest serious effort in making podcasting a part of your web
presence—it’s worth considering a plug-in that can make
your life easier. The most popular podcasting plug-in for selfhosted
WordPress sites is Blubrry PowerPress (http://tinyurl.
com/wp-podcast).
Among PowerPress’s most useful features is its tight integration
with iTunes. PowerPress can optimize your feeds for iTunes,
submit your feed to iTunes, and even help you manage your
iTunes cover art. PowerPress is also invaluable if you want to
forge into the world of video podcasting, because it lets you
embed your video content in your page, using a JavaScriptbased
video player. (That way, visitors have the choice of
downloading your podcast for a mobile device, as usual, or
playing it right in their browser, as they would with a YouTube
video.) PowerPress also offers statistics that help you gauge
the popularity of your podcasts and an optional paid hosting
plan for audio and video files.

Using a Music-Sharing Service

If you’re serious about sharing a set of audio tracks—for example, you’re a band
trying to popularize your work—your best bet is to sign up with a serious musicsharing
service.
The first advantage is that a good music service increases the exposure of your audio
tracks. Casual music browsers may stumble across your work, similar artists may
link to it, and just about anyone can add a comment or click Like, which boosts your
buzz. The second advantage is that you get a number of extras, like the ability to
provide music in different formats for different browsers (without resorting to Flash),
and a sleek jukebox-style player that seamlessly plays a whole set of your songs.

WordPress has built-in support for the following music-sharing services through its
auto-embed feature:
• SoundCloud
• Spotify
• Rdio
If you have a WordPress.com site or a self-hosted site with the Jetpack plug-in, you
get two extra services courtesy of shortcodes:
• [bandcamp: shortcode must include 'track', 'album', or 'video' param] for audio on Bandcamp
• for audio on 8tracks
Once again, the shortcode syntax varies subtly for each service, so you need to get
the exact details at http://support.wordpress.com/shortcodes.

To embed your SoundCloud content in a WordPress post, browse to the song or
playlist you want to use, and then copy the URL out of the address bar. Here’s the
URL that creates the music player in Figure 10-22:
https://soundcloud.com/andrewgorny/sets/ag-com-splash
If you want to adjust the size of the SoundCloud player, use the shortcode
with the height and width attributes.

Playing Audio Files

Sometimes, you’ll want to let readers play an audio clip (or several) without using a
full-blown video window. An obvious example is if you’re a music artist promoting
your work. However, audio files are equally well suited to the spoken word, whether
that’s an interview, talk show, sermon, audio book, or motivational lecture. Audio
files are particularly useful if you want to join the Web’s thriving community of
podcasters—sites that provide downloadable, long audio files that users can listen
to on the go (for example, on their iPods or smartphones).
You might expect that adding audio to your WordPress site is easier than adding
video. After all, audio files are smaller and simpler than video files. But you’ll face
many of the same issues. In the following sections, you’ll consider three strategies
for getting audio into a web page.

Adding a Basic Audio Player

The simplest approach to hosting audio is to upload the file to your website. You
can then provide a link that readers can use to download the file or (even better)
a tiny audio player that lets them listen without leaving your site (Figure 10-20).
Before you get started, you need to upload your audio file. Ideally, you’ll upload
an MP3 file to ensure that it plays on most browsers. Technically, Internet Explorer,
Safari, and Google Chrome play MP3 files, but Firefox and Opera don’t. However,
most websites get by using the Flash player to fill the gap. Essentially, the process
works like this:
• If the browser you use recognizes both MP3 files and HTML5 markup, WordPress
creates an HTML5 <audio> element that points to your MP3 file. The browser
then creates a miniature audio player, like the ones shown in Figure 10-20.
• If a browser doesn’t play these two standard file types, WordPress uses a small
Flash program that creates a tiny audio player. The end result is the same—your
guests see a simple music player.
• In the unlikely event that a browser can’t meet either of these requirements,
WordPress swaps in an ordinary HTML link. Guests click the link to download
the audio file, where they can play it using a desktop music player.
The Flash fallback solution is a good one, but it’s a bit too messy to implement
on your own. Fortunately, WordPress does all the work for you with the
shortcode, which is every bit as straightforward as it should be. You simply add an
attribute named src that points to your audio file. Here’s an example that launches
an MP3 file on another web server:

You can also use the shortcode to play music files stored on your own website.
But before you go any further, there’s a significant catch that applies if WordPress.com
hosts your site. Unless you buy a space upgrade or have a Premium account (page
359), WordPress.com won’t let you upload any audio files, even if you have plenty of
space left in your initial 3 GB storage allotment. Instead, you can play only audio files
stored on other sites.

Depending on what you’re trying to accomplish, this limit might be a minor inconvenience
or completely unworkable. If it’s the latter, you have two options. You can buy
a space upgrade for as little as $20 a year (click the Store menu in the dashboard to
sign up), or you can use a music hosting service.

To play an audio file directly from your site, you need to upload it to the media library
and then embed it with the shortcode.

Adding a Playlist

You can use the shortcode to add as many audio playback bars as you want.
Figure 10-20, for instance, has three. But if you want to give your visitor the chance
to peruse a group of related tracks—like a concert of songs performed by your trombone
quartet—there’s a better way. You can group your tracks together in a playlist.
A playlist is a list of audio or video files with a single playback bar or video window
(see Figure 10-21). Your visitor can click a specific track to play it, or let the playlist
move automatically from one file to the next.
Here’s how to add an audio playlist (see the Note below for video playlists):
1. Click Add Media.
2. Drag your audio files onto the Insert Media window,
3. Once you’ve uploaded all your files, click Create Audio Playlist on the left.
4. Click each track you want to use in your playlist, and fill in its details on
the right.
5. Click the “Create a new playlist” button.
6. Configure your playlist.
7. Click “Insert audio playlist.”
8. Publish your post.

NOTE You can create a vdeo playlist in much the same way as an audio playlist. The difference is that you
upload video files instead of audio files, and you click a link named Create Video Playlist instead of Create Audio
Playlist. The finished result is a bit different, too—it looks like a standard video window with a playlist attached
underneath.

Showing a Video from Your Media Library

Although a free video-hosting service meets most people’s needs most of the time,
self-hosted WordPress sites can host their own videos. The basic approach is pure
simplicity:
1. Click Add Media above the post editor.
This opens the familiar Insert Media window, which you used to add pictures
and picture galleries earlier.
2. Drag your video file onto the Insert Media page.
Not any format will work. And, confusingly enough, there are more video formats
than Ben & Jerry’s ice cream flavors. For best results, you should use a
video file encoded with the high-quality, wildly popular H.264 video codec, and
stored in the MP4 container format. If your file has the extension .mp4, you’re
off to a good start.
TIP If you don’t have an MP4 video file on hand, think carefully before you continue. If you upload a different
video format, your video player may not work on certain browsers, on mobile devices, or on anything, actually. To
straighten out the format of your video files, consider a good video converter like the free Miro Video Converter
(downloadable from http://www.mirovideoconverter.com), which can convert almost anything to MP4 format.
Depending on the size of your video, you may have a bit of a wait. Grab a cup
of coffee.
3. In the “Embed or Link” setting (on the right), pick Embed Media Player.
Your other option is to add an ordinary link that points to the media file.
4. Click “Insert into post.”
WordPress slots your video in using the shortcode.
At the end of this process, expect to see something like this:

Here, the shortcode specifies the size of the video window (based on the
dimensions of your video file) and identifies the video file stored on your site. When
you publish your post, the shortcode creates a video window similar to the one you
got with YouTube.
Although the process seems easy, plenty of caveats apply. First, it’s up to you to
make sure that you have the not-inconsiderable space to store the video file, and
the monthly bandwidth to show it to all of your viewers.
It’s also up to you to make sure you use a video file format that most browsers can
play back. The previous example uses the most popular standard: an .mp4 video
Chapter 10: Adding Picture Galleries, Video, and Music 357
EMBEDDING A
VIDEO
file. Most browsers can play it, but there are plenty of exceptions, including the
Opera browser and old versions of Internet Explorer. Fortunately, WordPress relies
on the nearly miraculous powers of a JavaScript tool called MediaElement.js (http://

mediaelementjs.com). It rounds out most browser issues by intelligently switching to
other players, like Flash or Silverlight, when a browser can’t play the file you supply.
Thanks to MediaElement.js, the shortcode shown above works reliably on
almost as many computers as the YouTube shortcode (although it won’t work so
nicely on mobile devices, because there’s no slimmed-down, low-bandwidth mobile
version, like the sort that YouTube creates).
You have another option, but it’s impractical unless you’re ready to sacrifice your
social life and spend hours of extra video-encoding time. Obsessive web developers
can resolve format issues by providing fallback video files—multiple copies of the
same movie in different formats. You can then specify a range of formats that the
shortcode can use. Here’s an example that supplies a standard MP4 video
but adds fallback videos for the free WebM codec and for the Flash (.flv) player:

If you find yourself in the difficult position of running into the limitations of YouTube,
but not wanting to face the headaches of do-it-yourself video hosting with the
shortcode, there’s one more option. You can sign up with another video hosting
service—one that may not be free, but will provide more features and control than
YouTube does. The next section has the details.

Showing Videos from Other Video Services

Although YouTube is the most popular video service, it’s not the only game in town.
Happily, WordPress’s auto-embed feature lets you play video from a range of other
media sites, including:

• Hulu
• Dailymotion
• Vimeo
• Viddler
• blip.tv
• Funny or Die
• Qik
• Flickr (for videos as well as pictures)
• Revision3
• WordPress.tv
As with YouTube, you simply supply a web address that points to a video on one of
these sites, and WordPress does the rest.
Additionally, if you use WordPress.com or you installed Jetpack, you can use the
following shortcodes to embed even more types of video:
• [cnnmoney-video] for videos from CNNMoney
• for videos from Kickstarter
• for TED Talks videos
• for videos from Twitch.tv
• for videos from Ustream.TV
• for a Vine video
• [videolog] for videos from Videolog.tv
• for a video from The Internet Archive
The list of eligible sites is ever-growing, so don’t be surprised to find additional
services listed when you check WordPress’s official list of auto-embeds (http://

codex.wordpress.org/Embeds) and shortcodes (http://support.wordpress.com/
shortcodes).
When you embed video, WordPress configures the size of the playback window to
suit the content and to fit in your post area. However, in some situations, you might
want to tweak the size to get it just right. If you use one of the video types from the
first list, you can control the size of the video player by wrapping your URL in the
shortcode and then adding the height and width attributes. If you use one of
the more specialized shortcodes in the second list, you probably need to add similar
height and width attributes to that shortcode. Here’s where things get a bit tricky,
because many shortcodes have similar but maddeningly different syntax. To see
exactly how to format a specific shortcode, check out the WordPress documentation
at http://support.wordpress.com/shortcodes, and click the Full Instructions link next
to the shortcode you plan to use.

Configuring the YouTube Video Window

If the embedded window looks the way you want it to, there’s no need to do anything
else. But if you want to tweak its size, you can.
The easiest way to do that is by using the height and width attributes of the
This straightforward approach doesn’t always work. Certain themes and plug-ins
accidentally disrupt the sizing process, leaving you with full-sized YouTube videos.
To narrow down the cause of the problem, try disabling all your plug-ins one by
one, and then re-enabling them individually until you find the misbehaving plug-in.
If that doesn’t help, you can also try previewing your post with a different theme.
NOTE The shape of the video window depends on the video itself. YouTube won’t stretch a video out of its
normal proportions. For that reason, you should probably specify just the width or height of your video, but not
both. If you do use both, your video window will get the dimensions you specify, but YouTube will pad the video
with blank space to avoid stretching it.
Once you switch to the
You can also set where playback should start and where it should end by adding
&start and &end to the URL, along with a number of seconds. For example, this video
player hides related videos, starts playback at the 1-minute mark (when the viewer
presses the Play button), and pauses it at the 2-minute mark:

Finally, it’s worth noting that you can do the same thing using a slightly different
syntax with the shortcode:

Embedding a Video

Now that you’ve jazzed up your site with pictures, it’s time for something even more
ambitious: video.
There are two reasons you might put a video playback window in a post (or page).
First, you may want to use someone else’s video to add a little something extra to
your content (which is the ordinary text in your post). For example, if you comment
on a local protest concert, your post will be more interesting if you include a clip of
the event. Similarly, if you review a new movie, you might include its trailer. If you
talk about a trip to Egypt, you might want to take visitors inside the pyramids. In all
these examples, the video adds a bit of context to your post.
The other possibility is that the video may actually be your content. For example, you
might use video to show your band’s latest live performance, a bike-repair tutorial
you filmed in your garage, or a blistering web rant about the ever-dwindling size of
a Pringles can. In all these cases, you create the video and then use your WordPress
site to share it with a larger audience.

TIP Depending on the type of site you create, your written content doesn’t need to be about the video—instead,
the video could add supplementary information or a bit of visual distraction. For example, you may talk
about your favorite coffee blend and add a video that shows the grueling coffee harvest in Indonesia. Used carefully
and sparingly, video accompaniment can enhance your posts in the same way a whimsical picture cribbed
from a free photo service can.
To present someone else’s video on your site, find the movie on a video-sharing site
and copy the address. Most of the time, that video-sharing site will be YouTube, the
wildly popular hub that rarely drops out of the top three world’s most visited websites.
And if you want to show your own videos, you’ll probably still turn to a video-hosting
service like YouTube because the alternative—uploading your video files straight to
your web server—has some significant drawbacks. Here are some of the reasons
you should strongly consider a video-hosting service:

• Bandwidth. Video files are large—vastly bigger than any other sort of content
you can put on a site, even truckloads of pictures. And although you probably
have room for your video files on your web server, you might not have the bandwidth
allotment you need to play back the videos for all your visitors, especially
if your website picks up some buzz and has a hot month. The result could be
extra charges or even a crashed website that refuses to respond to anyone.

NOTE Bandwidth allotment refers to how much web traffic your site host allows. Hosts may limit bandwidth
so that an extremely busy site—one with lots of visitors stopping by or downloading files—doesn’t affect the
performance of other sites the service hosts.

• Encoding. Usually, the kind of file you create when you record a video differs
from the kind you need when you want to share it online. When recording, you
need a high-quality format that stands up well to editing. But when viewing a
video over the Web, you need a heavily compressed, streamlined format that
ensures smooth, stutter-free playback. Sadly, the process of converting your
video files to a web-friendly format is time-consuming, and it often requires
some technical knowledge.

• Compatibility. In today’s world, there’s no single web-friendly video format that
accommodates the variety of web browsers, devices (computers, tablets, and
mobile phones), and web connections (fast and slow) out there. Video services
like YouTube solve this problem by encoding the same video file multiple times,
so that there’s a version that works well for everyone. You can do the same on
your own, but without a pricey professional tool, you’re in for hours of tedium.
For all these reasons, it rarely makes sense to go it alone with video files, even if
you produce them yourself. Instead, pick a good video service and park your files
there. In the following section, you’ll start with YouTube.

The Dangers of Using Other People’s Video

The risk of embedding other people’s videos is that the video
hosting service may take the videos down, often because of
copyright issues, and they’ll disappear from your site, too. This
is a particularly acute danger for videos that include content
owned by someone other than the uploader. Examples include
scenes from television shows and fan-made music videos.
Usually, WordPress authors don’t worry about this problem—if
a video goes dead, they edit their posts after the fact. To avoid
potential problems from the get-go, stay away from clips that
are obviously cribbed from someone else’s content, especially
if they’re recent. For example, a video that shows a segment
from last night’s Saturday Night Live broadcast is clearly at
risk of being taken down. A decades-old bootleg recording of
a Grateful Dead concert is probably safe.

Showing a YouTube Video

Hosting a YouTube video in WordPress is ridiculously easy. All you need is the video’s
web address.
To get it, start by visiting the video page on YouTube. (If you’re one of the six people
who haven’t yet visited YouTube, start at http://www.youtube.com.) If you haven’t already
found the video you want, you can spend some time searching around.
When you find the right video, click the Share link under the video window. A panel
of information pops open, including a text box with the URL you need (Figure 10-17).
The URL will look something like this:
http://youtu.be/OxKKr0Qrcjg

The first part, youtu.be, is a more compact form of the video’s full web address
(which starts with http://www.youtube.com/watch?v=). The string of letters and numbers
after it uniquely identifies the video you want.

The next step is even easier. Paste the video URL into your WordPress post, on a
separate line, in the location where you want the video to appear,

Now publish your post. You’ll be rewarded with another transformation, courtesy of
WordPress’s auto-embed feature. This time the URL turns into an embedded video
window.

Uploading Your Videos to YouTube
The process of playing your own videos through YouTube
is essentially the same as the one for showcasing someone
else’s. The only difference is that you begin by signing up
with YouTube (if you don’t already have an account) and then
uploading your video. The steps are fairly straightforward—
click the Upload link at the top of the home page, next to the
YouTube search box, and then follow the instructions YouTube
gives you. Make sure you designate your video as public, which
means that it appears in YouTube’s search results. If you don’t
use this setting, you won’t be able to embed your video in a
WordPress post. Other settings (for example, whether you
allow comments and ratings) have no effect on whether you
can embed the video.
For best results, YouTube recommends that you upload the
highest quality video file you have, even if that file is ridiculously
big. YouTube will encode it in a more compressed,
web-friendly format, while preserving as much of the quality
as possible. And if the quality of your video is good enough,
YouTube will offer high-speed viewers the option to watch it
in high-definition format, using the H.264 standard.
Uploading videos takes a while, because the files are huge
and transferring all that data takes time, even on the fastest
network connection. YouTube also needs to process your video,
although its industrial-strength servers can do most of that as
you upload it. When you get the video live on YouTube, click
Share to get the URL you need for your WordPress post, which
you can paste alongside your content, exactly as you did before.

Creating a Slideshow

A slideshow is similar to a gallery in that it gives you an elegant way to deal with a
group of related pictures. But where a gallery shows a group of photos all at once,
a slideshow displays your pictures one at a time, typically framed by a small box
(Figure 10-10).

If you use WordPress.com, it’s easy to add a basic slideshow. In fact, you follow the
same process you followed to create a gallery, with one exception: In the secondto-
last step (that’s step 8, on page 336), you change the Type from Thumbnail Grid
to Slideshow. You can transform an existing gallery into a slideshow the same way.
Once upon a time, WordPress.com used a separate shortcode for
slideshows. Although this shortcode still works, WordPress doesn’t use it anymore.
Instead, it tweaks the gallery shortcode by adding a type attribute. If you switch to
the HTML view of your post after you add a slideshow, you see something like this:

Freshly installed self-hosted WordPress sites don’t offer slideshows. You can add
the type attribute to the shortcode, but it won’t have any effect. However,
slideshow support is just a plug-in away if you add Jetpack

To create an even better slideshow, you need to go beyond WordPress and its plugins.
Flickr offers the gold standard for slideshows, and if you have a Flickr account,
you can drop a Flickr slideshow into any WordPress post or page. All you need is
the right web address.
The easiest way to create a Flickr slideshow is to get a link for your entire photo
stream (all the pictures you uploaded to Flickr, in other words). To do that, click your
photo stream, click the tiny sharing button near the top-right corner of the page
(Figure 10-11), and then choose “Grab the link.” You’ll see a link like this:
http://www.flickr.com/photos/82337026@N02/
To convert this to a slideshow link, add the text /show to the end of your web address,
like this:
http://www.flickr.com/photos/82337026@N02/show/
Using this web address, you see a slideshow that steps through all your Flickr pictures.

Next, you need to copy this address into a post or page, on its own line. Lastly, publish
your page. Through the magic of auto-embedding, WordPress recognizes your slideshow
URL and embeds a small version of the slideshow in your post (Figure 10-12).

TIP If you’re a Flickr expert, you know that you can make a photo set that includes just some of your pictures.
Conceptually, a photo set is like an album of shots you select and arrange in any order, which makes it more suitable
for a slideshow. Once you create a photo set (which takes just a few drags and drops using Flickr’s Organizr
tool), you can click the familiar Slideshow button to get a URL for it.

Using a Slideshow from Another Site

Some websites have perfectly good slideshow features, but they don’t offer the super-cool convenience of WordPress auto-embedding. Examples include Picasa, Photobucket, and SmugMug. In the future, WordPress may offer better integration with these services, but for now self-hosters have two good options.
The first is to use a plug-in that supports your favorite photo site. One good example is Photonic (http://tinyurl.com/wpphotonic), which lets you display galleries and slideshows from Flickr, SmugMug, Picasa, and 500px. The second option is to add your slideshow the old-fashioned way, using HTML. The basic idea is this: You ask your picturesharing service to give you the HTML markup you need for an embedded slideshow. Usually, this is a block of cryptic code that starts with an

 object or iframe 

element. The details don’t matter, because you don’t need to actually understand this markup. You simply need to copy and paste it. The exact steps depend on the photo site you use. Usually, the first step is to click a button named Share or Embed. You may need to specify a few details, like the size of your slideshow window, before the site generates the HTML you need. Once you finish, select and then copy the HTML, switch your post to HTML view, and then paste in the markup. But be warned—if you switch back to the visual editor, it may disrupt your new code.

Changing the Thumbnails That Appear in a Gallery

Is there any way to change the way WordPress displays my
thumbnails?
You’re bound to encounter this at some point: Your thumbnails
are too small. Or too big. Or you don’t want them squareshaped.
What to do?
Ordinarily, WordPress creates square thumbnails, measuring
150 pixels wide by 150 pixels tall. If your picture isn’t a perfect
square, WordPress crops off the edges to make it a square.
There are two ways to change the size and shape of your
thumbnails. The first is to edit the shortcode in HTML
view (using the Text tab), and add the size attribute, which can
take one of several values. The default is thumbnail, but your
other choices are medium or large, which tell WordPress to get
medium-sized (300 × 300 pixels) or large-sized (1024 × 1024
pixels) versions of your picture and display them instead. In
both cases, WordPress sizes the picture proportionally, rather
than cropping it into a square.
This raises an excellent question: How does WordPress decide
how big to make your thumbnails in the first place, not to mention
the medium- and large-sized versions of your pictures?
The answer leads to the second way to change your gallery
thumbnails—by changing the settings in the Settings→Media
section of the dashboard. There you see settings that let you
tweak the standard thumbnail size (150 × 150), as well as the
maximum dimensions for medium-size pictures and large
ones. On a self-hosted site, you’ll also find a setting named
“Crop thumbnail to exact dimensions.” Turn off the checkbox
and WordPress proportionally sizes your thumbnails to match
the dimensions of the actual picture, rather than cropping it
into a square (see Figure 10-9).
One caveat applies when you change these settings: WordPress
creates the thumbnails when you upload your pictures, so
the galleries you created so far will continue using the old
thumbnails (unless you re-upload the pictures and re-create
the gallery). If you run a self-hosted WordPress site, you can fix
this problem using the Regenerate Thumbnails plug-in (http://

tinyurl.com/rthumb). Once you install and activate it, you can
create new thumbnails by visiting the media library (choose
Media→Library). Turn on the checkbox next to all the pictures
you want to change, and then choose Regenerate Thumbnails
in the Bulk Action list. Finally, click Apply to re-create the
thumbnails for those pictures.

Creating a Gallery

A gallery displays a set of thumbnail images on a page so it’s easy for visitors to
scan them (Figure 10-3). To take a closer look at a pic, all you need to do is click a
thumbnail.
When you click a picture in a gallery, you probably expect to see a larger version of
the image. But WordPress does something a little different, and its exact behavior
depends on how you host your site.

If you run a self-hosted site, WordPress launches what it calls an attachment page,
which displays the larger-size picture along with its description (if you included it)
and a place for comments

WordPress.com is a bit fancier—it includes the picture in a photo carousel, and
viewers can step from one picture to the next (or former) by clicking the arrows on
either side of the image (Figure 10-5).

TIP A photo carousel dramatically showcases your pictures without taking the reader away from your post.
Self-hosted sites can get this feature by installing the Jetpack plug-in (page 297). However, some WordPressers
have found that the photo carousel doesn’t work with certain theme/browser/plug-in combinations. So if you
install Jetpack but you still see ordinary attachment pages instead of the photo carousel, you probably ran into
one of these conflicts.

Create a Gallery, Follow these steps:
1. Create a new post or edit an existing one.
2. Click the Add Media button just above the edit box.
3. Upload the pictures you want in your gallery.
4. Once you upload the files, click the Create Gallery link on the left.
5. Enter a description for each picture.
6. Once you add descriptive information for all your pictures, click “Create a
new gallery” at the bottom right.
7. Drag your pictures into the order you want.
8. Tweak your gallery settings (in the Gallery Settings section on the right).

WordPress gives you several options for fine-tuning your gallery. They include:
• Link To.
NOTE If you use the photo carousel feature (page 333), WordPress ignores the Link To setting. Instead, it
shows a photo carousel when a visitor clicks a picture.
• Columns.
• Random Order.
• Type. This setting lets you change an ordinary gallery into a slideshow (pick
Slideshow instead of Thumbnail Grid). However, this setting appears only
on WordPress.com sites or self-hosted sites that use the Jetpack plug-in.
On WordPress.com sites (or Jetpack sites that have the Tiled Galleries feature
activated), the Type list includes three more exotic choices. Tiled Mosaic
packs the pictures tightly together in a jigsaw of squares and rectangles
(rather than spacing them out in the standard, neatly separated squares).
Square Tiles crops each thumbnail down to a perfect square, trimming off
the edges if needed. Circles crops each thumbnail into a circle. The best
way to get a sense for these fancy gallery types is to try them out.

9. Click “Insert gallery” at the bottom right.

If you click the Text tab to switch to HTML view, you see that your post now contains
a shortcode that looks something like this:

There’s an ID number for each picture in your gallery. In the example above, the first
picture in the gallery has the ID number 341, the second one has the ID 185, and so
on. You can find the matching pictures in the media library.
The HTML view of your gallery-enriched post is more notable for what it doesn’t
contain. There are no image tags, links, or other HTML wizardry. Instead, WordPress
examines the shortcode and then creates the gallery on the fly every time
someone requests the page.