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.

Advertisements
Creating a Slideshow

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s