Multimedia in WordPress: Slideshows

Dec 19, 2013
Ben Schmidt

8691569697_424d16bbb6_b

WordPress supports a variety of multimedia. In this tutorial I will go over embedding slideshows into your posts and pages.

****

Creating image slideshows is a great way to add some visual pizazz to your website. While some WordPress themes have built in slideshows, by far the most popular WordPress slideshow plugin is the NextGen Gallery. To find it, click on “Plugins” in your left side-bar WordPress Menu, click “Add New” near the top of the screen, and type NextGen into the search bar. The NextGen Gallery should be the first result on the search. Click “Install Now” and then click “Activate Plugin” once it is installed.

Once the plugin is installed and activated you will notice a new “Gallery” option in your left side-bar WordPress menu. Click on the “Add Galley/Images” sub-menu within “Gallery” to create a new slideshow and upload images to it. Once you’ve uploaded the images you want, click on the “Manage Galleries” sub-menu. You will notice that your new gallery has an ID number (1, 2, 3…etc). That image id number is what you will use to embed the gallery into your post or page using this shortcode:

Screen Shot 2013-12-18 at 10.07.15 AM

Just replace the “x” in the shortcode with the number of the gallery within your post or page (Note: I cannot emphasize this enough–only insert shortcodes into a post or page using the “Text” editor, NOT the Visual Editor).

The result should be something like the slideshow below–click on one of the images to begin (Note: you can make the slideshow automatic or just show thumbnails with a larger pop-out slideshow):

 

****

What about Embedding Prezi Slideshows?

You can easily embed a Prezi slideshow into a post or page using an embed code on a prezi page. You can access that code by clicking the share button on the Prezi and clicking the “Embed” button there (and for reference, this is what most share buttons look like).

Screen Shot 2013-12-18 at 11.42.09 AM

 ****

Notice that when you are generating the embed code you can adjust the height and width so it fits on your page the way you would like it to:

Screen Shot 2013-12-18 at 11.43.08 AM

<iframe src=”http://prezi.com/embed/boa21ytdaoxy/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0&amp;features=undefined&amp;disabled_features=undefined” height=”473″ width=”650″ frameborder=”0″></iframe>

****

The final result should be something like this: