Learn WordPress.com

Menu

Get Flashy

Enhance your site with multimedia

GetFlashy

By the end of this section, you’ll know how to:

It’s time to get flashy — time to learn how to make your site pop with multimedia: gorgeous galleries and slideshows for your images and video, and audio embeds to breath new life into your posts. Once you’ve got the hang of it, we’ll introduce you to the magical world of shortcodes — tiny snippets of code with big media payoff.

Ready? Let’s dive in.

Subdiv1

Spice up your site with galleries

Now that you’re a whiz at uploading images from the editors in your Reader and dashboard, let’s experiment with placing multiple images into galleries. Sure, you can just plunk your images down on a page . . . or, you can use elegant galleries, and fool your friends into thinking you’re a graphic design pro. (We’re just joshin’ — we know there are times when you want to use single images, displayed simply. No judgments here!)

You can display collections of photos in a gallery grid of thumbnails, or a swanky mosaic-style tiled gallery of rectangular tiles, square tiles, or circles. Here’s a sample rectangular gallery. (Photos below courtesy of Michelle Weber.)


Here’s a sample circular gallery:


Create a gallery

To create a gallery to insert into a post, click on Add Media to access your Media Manager. Like we showed you in Get Published, just drag and drop the images you want to include to the middle area, or click Upload Files near the top to select files from your computer. You can also make a gallery of things you’ve already uploaded — if the images are already in your Media Library, just click Create Gallery on the left, and then click on the images you want to use. A checkmark will appear at the top right corner of the image when you choose it. Pick as many as you want — don’t be shy.

thumbnailsinlibrary

When you’re finished selecting photos, click the Create a new gallery button on the bottom:

Create a new gallery

Voilà! You’ve made a gallery, and you didn’t even have to break a sweat opening Photoshop.

Edit your gallery

Now that you’ve assembled the contents of your gallery, you have options — reorder the images by dragging and dropping them, reverse the order of images, or have your blog display them randomly (check the box next to — wait for it — Random Order under Gallery Settings). You can also edit the description of each image under Attachment Details, including its title, caption, alternate text, and description. (Only the caption will be displayed for the slideshow gallery type, except for round galleries, which don’t display captions at all. Sometimes you have to suffer for art.)

Almost there!

Under Gallery Settings, pick the style of gallery you want to use:

gallerytype

Here are your options (you can always edit this later to try a new layout):

  • Default: a thumbnail grid layout.
  • Tiles: a mosaic-like layout of different-sized rectangular tiles.
  • Square tiles: an elegant, clean layout of square tiles.
  • Circles: a unique layout of circular thumbnails.
  • Slideshow: a moving slider of images (which we’ll cover below!).

We’re partial to the circles, but your mileage may vary. (Although come on, how great are those circles?) You can see these bad boys in action in this collection of blogs that have enhanced their posts with tiled galleries, and check out even more examples in this post.

Next, in the Link to option, specify where you’d like to direct your viewer when they click on an image:

Link to

  • Media file: a direct link to the full-size uploaded image.
  • Attachment page: a page on your blog showing the image in your current theme.

When you’re happy with all your settings, click Insert gallery. You’ll be taken back to your visual editor, where your elegant new gallery will look like . . . a big, empty white box with a camera icon in the middle. You can check out your gallery by clicking Preview to see how it will look when published. If you want to keep editing, click on the empty box and then on the picture icon on the top left — just like you would to edit a regular photo.

If you’ve already made a few galleries on your blog with the thumbnail grid layout but want to update them all to display in a cool mosaic, go to Settings >> Media in your dashboard, scroll down to “Image Gallery Carousel,” and select the box next to Display all your gallery pictures in a cool mosaic. Handy!

Enable the photo carousel

Unless your post calls for something different, there’s really no reason not to display your images in a gallery — it showcases your images professionally, and still allows readers to access individual photos: when you click on an image in a gallery, you can view its larger size in a full-size carousel. In the carousel, your readers can comment on individual photos, and you can opt to display the metadata for your images (like the shutter speed or f-stop you used when taking the photo), which is valuable info for photographers, camera hobbyists, and anyone interested in learning more about your images.

To activate the carousel on your blog, head over to Settings >> Media and check the box next to Display images in full-size carousel slideshow. Underneath, you can choose whether the carousel background will be black or white (free advice: images often look really sharp and pop a bit more on black). The option to display your photo metadata is here, too.

Action Time! You guessed it: time to create a gallery.

If you already have an idea for a gallery, go for it. If you don’t, pick one of these concepts:

  • My life in photographs.
  • Highlights from my last vacation.
  • The past, present, and future in images.
  • Focus on a single color (or two contrasting colors).
  • Focus on a theme: change, happiness, dreams.

When you’ve uploaded all your images, re-order them so they tell a story. Try at least two different gallery styles to see which you prefer. Then write a short introduction to the post, but let the photos do most of the speaking for themselves.

Top
Subdiv1

Display images in slideshows

Sometimes you’ll want to display your photographs in a slideshow instead of a gallery. A slideshow offers a different visual effect: a moving slider of images that readers can click through. You create a slideshow the same way you create a gallery.

Let’s practice, shall we? Go ahead and create a new post in the Post Screen and click Add Media to access your Media Manager. We probably didn’t even have to tell you that part — it’s old hat by now. We knew you looked like a quick study.

As you did above, upload images from your computer or go to Create Gallery to select images from your library. Use the steps you’ve learned to create a gallery, and order the images by dragging and dropping.

To enable the slideshow, click on the dropdown menu next to “Type” and select the slideshow option:

typeslideshow

Yep, just like that.  You can also edit the image descriptions under Attachment Details, but in slideshows, only captions will be displayed. When you’re finished, don’t forget to click Insert gallery at the bottom: you’ve got a slideshow! It’s like 1979, but better.

You can also create galleries with shortcodes. A shortcode is an, um, short piece of code — a helpful shortcut you can insert to quickly tell your blog to do something, like embed a video or PDF. You drop them into your post in the text editor, and when you return to the visual editor or preview your post, boom: something cool has happened, like the creation of a tiled gallery. If you want to set tiled gallery styles for individual posts, add the following shortcodes when in text editor mode:

[gallery type="rectangular"]

[gallery type="square"]

[gallery type="circle"]

To insert a slideshow, use this one:

[gallery type="slideshow"]

You can also adjust other settings using shortcodes — once you’ve gotten the hang of the ones above, take a look at this chart of gallery shortcodes.

Top
Subdiv1

Turn up the volume with audio and video

Embed audio in different ways

Want all your new readers to be able to hear the latest tracks from your new R&B/Smooth Jazz Opera? You can share audio on your blog in a few different ways, including:

  • Embedding an audio player from SoundCloud or Spotify.
  • Uploading an audio file on the web and linking to it using a simple audio shortcode.
  • Uploading files directly to your site (which requires a space upgrade so you can store ‘em all).

Let’s walk through these options, and your blog will be in tune in no time! (Rim shot.)

Embed a popular audio player

You can embed an audio player into a post or page to easily share music from other websites like SoundCloud and Spotify. Embed a single track, your favorite playlist, or the mix you made for the cute girl at the coffee shop.

To embed tracks from SoundCloud, click the Share button underneath the track when you’re in SoundCloud. (If a track doesn’t have this button, you’re not able to play it outside of SoundCloud.) A box with sharing options will pop up — copy the “WordPress Code” and paste this code into your post where you want to display the player. You can also manually customize the player.

soundcloud1

It’s easy to embed a player from Spotify, just copy an embed link from Spotify by right-clicking on any song, album, or artist and selecting “Copy HTTP Link” or “Copy Spotify URL.” Once you have the link, paste it on a line by itself in your post (right into the visual editor, not the text editor):

embed_spotify

We’ll turn it into an audio player that looks like this:

spotifyembed

If you’re interested in other music services or ideas for audio, read up on 8tracks, Bandcamp, podcasting, and Rdio.

Upload an audio file on the web

Your opera might not be up on Spotify yet, so you can also upload an .mp3, .m4a, .ogg, or .wav file somewhere else on the internet and link to it using our audio shortcode. In other words, if you’ve found an audio file elsewhere or have your own music somewhere else, you can grab its URL and use that with a shortcode to embed the track. What’s the shortcode? It’s the word “audio” in brackets which is as short as we could make it.

In your visual editor, just insert the shortcode — audio in brackets — followed by the URL of the audio file. Make sure the whole URL is inside the brackets as well.

For example:

[audio http://wpcom.files.wordpress.com/2007/01/mattmullenweg-interview.mp3 ]

and

[audio http://en.support.files.wordpress.com/2012/05/mattmullenweg-interview.m4a ]

will display this:

For more details on embedding audio files from the web, head over to this page.

Purchase the Space Upgrade

Another great option is buying the Space Upgrade, which lets you upload .mp3, .m4a, .ogg, or .wav files directly to your blog using the Add Media button, just like uploading a photo. When you insert the file into your post, be sure to click the None button for the link URL, and then click the Insert into Post button. If your file is an .mp3, .m4a, .ogg, or .wav file, this will automatically insert the audio player shortcode into your post or page.

Action Time! Embed an audio player and create a post listing your five favorite tracks of the moment. Here’s how you’ll do it:

  • Pick a site to surf: Soundcloud or Spotify.
  • Search for your songs on the site.
  • Grab the embed links we learned in this section.
  • Paste these links as you find them into your visual editor —  put them in a list from #1 to #5, #1 being your favorite.
  • Write a description explaining why you’ve chosen each track.
  • Preview the post to ensure that you’re happy with how the audio players and your text display.
  • Publish!

Looks like there’s a new DJ in town.

Top

Subdiv1

Embed video to your site

Are moving pictures more your thing? You can also share video on your blog — embed the hilarious clip you found on YouTube, or the equally hilarious clip of your Uncle Carl falling off the picnic table that you shot with your camera phone.

Embed a URL from YouTube or Vimeo

To quickly embed a YouTube video, copy the video’s URL from your web browser’s address bar while viewing the video:

youtubinbb

Then, paste the video’s URL on its own line in the visual editor, and make sure it’s not hyperlinked:

newpostYouTube

Done and done. If you’d like to control the width and height of your video to make it fit into your post better, read about video customization options.

You can embed a Vimeo video the same way: just copy the video’s URL from your browser’s address bar and paste it on a line by itself in the visual editor. Browse the “Related” links on the video support page for steps to embed videos from other sites, like Hulu, Daily Motion, and more.

Upload and display your own videos

If you’re really into video, you can consider the VideoPress upgrade so you can upload videos from your computer for hosting and playback directly on your blog. The upgrade costs $60 per year, per blog — if you’re interested, read more about VideoPress in the Store.

Once you’ve supercharged your site with VideoPress, you can upload a video by going to  Media >> Add New from your dashboard. Just drag and drop your files into the box that appears, or click Select Files to choose a video from your computer to upload.

After dragging and dropping the file, your upload will begin. A progress bar shows the status of your upload — depending on your network, it may take time to upload a large file; this might be a good time to get that second cup of coffee and take a bathroom break. Avoid closing your screen while your file is uploading! When the video has been successfully transferred, you’ll see an Edit link:

editvideo

Go ahead and click on the Edit link, which will take you to the Edit Media page. You’ll see details of your video, including a preview area and the video’s shortcode for embedding:

videoshortcode

Copy this shortcode and paste it into your post. Hooray! The video should be live on your blog when you publish your post.

(Alternatively, you can add a video to your post or page by clicking the Add Media button in the same way you add images. Just drag and drop the file into the uploader and insert it by clicking the Insert into post button. Oh, Add Media button, is there nothing you can’t do?)

Top

Subdiv1

Insert shortcodes to easily enhance content

You’ve probably figured out by now that you can use shortcodes on WordPress.com to do all kinds of cool things like embed files or create objects that would normally require knowing how to code. You can dive into this list of shortcodes to play around with multimedia on your site. Here’s a sampling of some handy shortcodes you may want to try out:

Upcoming events

Flickr video

Google docs

Instagram image

Check the list of current shortcodes for embedding video, audio, images, documents, and other items.

Subdiv1

Okay, let’s get our bearings: you’ve customized your site, filled it with killer content, and tricked it out with multimedia. Next step: viral internet fame. Let’s head to Get Connected to learn how to get eyeballs on your site.

Header image based on “Film Chamber” by _sarchi, CC-BY-2.0

An Automattic Contraption