Embedding Soundslides in WordPress and Hosting on Dropbox

Dropbox provides a public folder that makes it useful for hosting Soundslides projects. If you have the Dropbox syncing software installed on your personal computer, then placing the Soundslides project is as easy as simply drag and drop. Kelly Fincham has put together a nice tutorial that will walk you through the steps. However, if you don’t have access to the Dropbox software, you can still accomplish this using Dropbox’s web interface. If you’re like me, you often find yourself working on public computers that don’t allow you to install the software. Follow the steps below to upload your Soundslides content and embed it on WordPress.

publcifolder

Figure 1

Creating the Folders

1. You will need to go to www.dropbox.com and log in to your Dropbox account. Once you are there, click on the Public Folder (See Figure 1).

2.  Once in the folder, you are going to create several folders inside. For the first step, create a folder with your last name by clicking on the icon shown in Figure 2. You’ll see that I’ve created a folder called “Horning.” Inside this folder is where I will upload my Soundslides files. If you were putting several Soundslides projects in your drop box account, it would be a good idea to store them inside separate folders with different names.

folder

Figure 2

3. Once you’ve created the folder with your last name. Click on that folder so you are inside it. In here, you are going to create a second folder (Figures 3). It is VERY important that all of these folders are named EXACTLY as listed. That means they should be written using lowercase and use underscores. For this folder, name it “publish_to_web” (without the quotes).

publish

Figure 3

4. Now that you’ve created the folder named “publish_to_web,” click on that folder, and inside create three more folders. The folders will be named: 400_300, 600_650, and fullscreen (See Figure 4). These folders represent the folder structure that Soundslides creates when you export your files. For this next step we will go to the files that you exported in Soundslides.

publishinside

Figure 4

Uploading Content to Dropbox

5. In Soundslides, when you export your Soundslides project, it generates a folder called “publish_to_web.” You’ll want to locate this folder, and upload each of the files you see in Figure 5 to the right location in Dropbox. Note that inside each of the folders- “400_300,” “600_450,” and “fullscreen,” there are several files. You’ll need to upload all of these files to the right folder in Dropbox.

export

Figure 5

6. In Figure 6, you’ll see that I’ve uploaded all of the files that I generated from the Soundslides export to Dropbox.

dropboxupload

Figure 6

Embedding Soundslides Files in WordPress

7. Now right click on the index.html file (Figure 7) that you’ve uploaded and copy the public the link that appears.

link

Figure 7

8. Then copy that link into the Soundslides embed utility found here. This will give you an embed code. Make modifications to height here if needed. Then copy that embed code to the “Text/HTML” tab of your WordPress Site. The Soundslides file should now appear on your page.

embed

Figure 8

JQuery Basics

Project 1: Building the  Before After Slider

Resources You’ll Need for This Project

Links to JQuery and JQuery UI hosted at Google

Link to the JQuery Library

JQuery Rain has lots of JQuery Projects

Downloads

Links to zip file containing project files/images.

Original before after Images for practice

Link to original tutorial.



Add this code inside your main div

Add this code in your head tag under the other scripts discussed in the video tutorial

Before/After Examples

WP Syria

Typhoon Haiyan

Hurricane Sandy


Project 2: Building the Flexslider Photo Slideshow

Resources You’ll Need for This Project

See the original Al Jazeera Project titled From Forest to Food Bandk here.

Go to the orginial source here at WooThemes.

Step 1-Link your files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

Step 4 – Customization

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values.


Thing Link

Examples:

East Los Angeles College Campus News mobile

Good example of an about page

Infographic on AN-94 Assault Rifle

Creating an interactive map

Embedding SoundSlides in WordPress

1. Install and Activate the SoundSlides Plugin found here

ss

 

 

 

 

 

 

 

 

 

 

 

2. Export your SoundSlides show as a Zip file.  Go to File-Export and Zip

3. Create a New Post. Add Appropriate title, tags, category, and other content.

addnewpost

 

 

 

 

 

 

 

 

4. Upload your zip file by clicking on the Add Media Link and then selecting Upload Files. Then drag the zip file onto the page to upload it.

addupload

 

 

 

 

 

 

 

 

 

5. After the file has uploaded, select the Insert Into Post option.

 

captured

 

 

 

 

 

 

 

 

 

 

 

6. You should have a piece of code inserted in your post that looks like the one below. Note that you might be in the "Text" tab view. You may need to switch to HTML view to add more content.

 

final

 

 

 

 

 

7. Once you've had success publish the content to your blog.