WordPress for Birding Blogs, Part 4: Adding Galleries, Video, and Audio

This is the part of a multi-part series about using WordPress for birding blogs. Click here to start at the beginning.

Let’s Add All the Pictures!

Now, a site about birds without any photos, videos, or song files is boring. So boring in fact that articles with images get 94% more views than articles without (source). That crazy talk.

Adding Fancy Galleries

Every blogging platform out there let’s you post images, so I’m not going to go into that here. Check out this article about how to post pictures in WordPress. But I am going to go over the cool ways that WordPress let’s you create fancy galleries. If you don’t use .COM, download Jetpack and activate Tiles Galleries.

Tiles Galleries allows you to add multiple images to a gallery and then change how those images are displayed. You have several options. I’m going to take the same three images and show you below how they display.

In the gallery settings, you can select which type of gallery display you want. Let’s go over how they look now.

Thumbnail Grid

Tiled Mosaic

This is my personal favorite. If you don’t like how the images are sorted, just rearrange them and they will tile differently. When cropping images for this type of gallery, I find it’s helpful to keep them at simple ratios. In Photoshop, I used the Fixed Ratio setting in the marquee tool and only use whole numbers when cropping. That allows the images to fit together really well. It’s not 100% necessary, but I find it makes the galleries look better.

Square Tiles

Circles

EDIT: I’ve had some people say that they can’t see the circles and they just appear as squares. This is probably because you are using an older/phone browser that doesn’t support CSS3. This effect is created by using border-radius and when it appears in a browser that doesn’t support the code, it will appear as squares. It’s just an extra fancy effect that people who keep their browsers updated get to experience.

Slideshow

Studies have shown that people don’t really watch slideshows or carousels on the internet. I don’t recommend that you use them either. Use one of the other options instead.

This slideshow requires JavaScript.

Photon

Oh, and if you have Jetpack, make sure to turn on Photon. I won’t explain how it works, but it makes your images download significantly faster for your visitors. If you have .COM, don’t worry about it, it’s already integrated into your site.

 Video

Adding video is even easier than adding images. There are two main ways to add video to your site and I have definite opinions on this:

1. Upload the video directly to WordPress using the “Add Media” button.
2. Use a video service like Vimeo or YouTube to host the video and then put the link on your site via a shortcode.

I’ll be blunt: Number 1 is a terrible idea and Number 2 is definitely the way to go. There are lots of technical reasons, but the simple explanation is that with the all the different web browsers (Chrome, Firefox, etc), all the devices (tablets, phones, laptops), and all the different companies (Apple, Microsoft, etc) it makes it almost impossible to figure out what is the best way to display the video so everyone can see it. Since it’s so difficult to keep on top of the changing landscape of video, it just easier to let a company that deals with it all day host your videos for you. Hosting companies don’t have time to keep on top of it and the volunteers building WordPress don’t have it either. Plus, you have the added benefit of someone finding your site through a video you post on YouTube or Vimeo.

Bottom line: If someone wants to host your horribly large files, optimize your video for the web, and pay expensive programmers to constantly keep your video up to ever-changing web coding standards… LET THEM!

Shortcodes!

WordPress.COM and Jetpack (as of 4.0) supports shortcodes for the following video providers:

• YouTube
• Vimeo
• Hulu
• Flickr (video)
• Animoto
• DailyMotion
• Viddler
• Blip.tv
• TED Talks
• Educreations
• Instagram
• AolOn
• Vine
• Videolog

Let’s see an example of how to use shortcodes to embed video, using my favorite video host, Vimeo. Here is the link to my vimeo video: http://vimeo.com/106415606

Now, if you don’t care what size the video is, all you have to do is take that URL and paste it into your post. It should fill up the entire width of your post. Like so:

Now, if you want to have control over the size, you have to make it into a shortcode. Just add the number at the end of the URL into this code: [vimeo 106415606 w=500&h=280]

Just replace 500 with whatever width you want and the 280 with the height. Shows up like this:

Audio

The audio works the same as the video. You could post it directly into WordPress but then you would need to worry with this chart. That’s lots of effort. OR you can post it in a third party application and then paste the shortcode into your posts. WordPress currently supports:

• SoundCloud
• Rdio
• Spotify
• Bandcamp
• 8tracks

It works the same as the video shortcodes, so I won’t go into each tutorial. If you want a step-by-step instructions, click out this link.

Other Third Party Shortcodes

Just FYI, here are the other third party applications that have shortcodes in WordPress:

• Instagram
• Scribd
• Slideshare.net
• Google Docs
• Microsoft Office Live
• Google Maps
• Twitter
• Wufoo
• iCalendars

That’s a quick overview of how easy it is to add images, video, and audio clips to your blog! If you have any questions, please post them in the comments below. Stay tuned for the next part in the series.