Media Integration

Through the use of media repositories, including Vimeo, Soundcloud and Flickr, large media files and image feeds can be integrated into WordPress.

By: Randall Packer |

In this tutorial, we will go over the use and integration of Vimeo (video), Soundcloud (audio), and Flickr (image feed). It is advisable to use 3rd party media repositories rather than uploading large files to the server in order to minimize the bandwidth load, which would slow down a Website enormously. These media repositories not only provide faster access to large media files, but are optimized for easy integration into WordPress.

Vimeo

Vimeo is superior to YouTube because there are no ads and there is a thriving creative community that uses it. There is also additional control of the user interface and methods for organizing video content. A free account is sufficient, but the paid Vimeo Plus is sometimes a better option. See Vimeo for more information. The following are the necessary steps for using Vimeo as a media repository in conjunction with shooting video on a smart phone. The following instructions are specific to the iPhone but should be similar for Android phones. There are also instructions for uploading a video from the computer as well as integration into WordPress.

  • Setting up a Vimeo account: follow the instructions on the Vimeo site.
vimeo-signup_Screenshot 2014-05-13 11.29.08
  • Accessing Vimeo via mobile device: After creating a Vimeo account, open Safari on the iPhone, go to Vimeo.com and login to their mobile site, which is designed specifically for integrating Vimeo with a mobile smartphone.
vimeo_mobile-login2_2014-05-13 11.52.40

It is advised to only upload short videos if using a cellular connection. For longer videos (more than 1′), use a wireless connection.

  • Click on the “Upload Video” button, which accesses the screen where a video can be shot by selecting “Take Video.”
vimeo-mobile-takevideo_2014-05-13 11.53.26
  • Choosing “Take Video” provides access to the camera application on the phone, where the video can be shot. After completing the video, click on the “Use Video” button (see figure below). This will provide access to a new screen where the video can be uploaded, by choosing “Upload Selected Video.”
vimeo-mobile-usevideo_2014-05-13 11.54.58
  • While the video is uploading, give the video a title and description in the mobile interface (see figure below), or this can be done by going to the Vimeo site on a laptop or desktop computer. The remainder of the instructions apply to mobile or computer use of Vimeo.
vimeo-mobile-title_2014-05-13 11.56.09
  • It will then take a few minutes for the video to be converted on Vimeo. To track the progress, login into the Vimeo site and click on the newest video, where the following conversion screen can be viewed (see figure below). This conversion is required whether the video is uploaded from a phone or the computer.
vimeo-conversion_Screenshot 2014-05-13 11.57.37
  • Integration with WordPress: Now incorporate the vimeo into the WordPress site. First, create a new WordPress page, then access the video on the Vimeo site and copy the video URL by clicking on the “Share” button in the upper right corner. The icon looks like a paper airplane (see figure below).
vimeo-share_Screenshot 2014-05-13 12.18.31
  • Copying the LInk: Then enter the “Share this Video” menu where it is possible to either copy the link or the embed code. The latter is explained later in this tutorial. For now, copy the link so that it can be paste it into a WordPress post.
vimeo-share-screen_Screenshot 2014-05-13 12.23.20
  • Integration into WordPress: Paste the URL of the video into a WordPress post. For purposes of presentation, I have pasted the link below.

The video should now be displaying properly in WordPress. It is always possible to return to the video in Vimeo in order to adjust various display settings, as well as the title and description, etc.

Soundcloud

Soundcloud is a media repository specifically designed for playing audio files on a WordPress site. There is a Soundcloud app for smartphones which is used for recording and uploading files directly to a Soundcloud account. Like Vimeo, it is necessary to first setup an account where there is access to not only one’s own audio files, but to a community of artists and musicians. As a social media site, Soundcloud has many features designed specifically for sharing music. In the following tutorial, we will focus on using the Soundcloud mobile app in conjunction with integrating sounds into WordPress.

  • Create a Soundcloud account: Sign up for the free music service (see figure below). Like Vimeo, there is also paid account, providing additional space for sound files, but this will not be necessary in most cases.
soundcloud-signup_Screenshot 2014-05-13 13.14.15
  • Download the Soundcloud app: The Soundcloud app is available for both iPhone and Android. Download and sign-in to the app (see figure below). We will again focus on the iPhone version of the Soundcloud app.
soundcloud-app-signin2_2014-05-13 13.18.40
  • Recording: Once logged into a Souncloud account through a mobile app, click on the “…” icon on the right hand side where there is a “Record” button (see figure below). Then click on “Record” to access the Soundcloud record functionality. It will not yet be recording when you do this.
soundcloud-mobile-record-button_2014-05-13 13.20.05
  • The Waveform: Once the “Record” screen is accessed, a waveform will be visible from the sound picked up by the microphone on the phone (see figure below). Soundcloud is not yet recording though. When ready to record, click on the “Record” button and the waveform will turn orange.
soundcloud-mobile-record_2014-05-13 13.20.13
  • Pausing: When finished recording, or if there is a need to pause, click on the pause button “||” (see figure below).
soundcloud-mobile-pause_2014-05-13 13.20.39
  • Resume recording: to leave the pause mode click on “Resume Rec” (see figure below). Once completed, one can either delete or save the sound file.
soundcloud-mobile-save_2014-05-13 13.20.49
  • Title and Description: Once the recording is saved, give it a title and location by GPS (see figure below). This is useful in order to label the recording with the location where it was recorded. Note from the iPhone screenshot below that the sound is “Public,” and there are other options for sharing on social media.
soundcloud-title_2014-05-13 13.39.10
  • Adding an Image: The sound’s avatar or visual representation can be replace with an image that corresponds to the recording. Do this by clicking on the picture to the left of the title, and then choosing an image from the phone’s Photo Library or with the camera taken when the recording was made (see figure below). After taking or selecting a picture to incorporate into the Soundcloud file, click on the “Post” button.
soundcloud-mobiel-photo_2014-05-13 13.39.21
  • The Sound Object: The Soundcloud file is now complete with a title, location, and photograph (see figure below). This process converts a sound recording into a sound object that provides a full set of information for the listener.
soundcloud-mobile-complete_2014-05-13 13.49.54
  • Embedding a Soundcloud file in WordPress: In order to incorporate the Soundcloud recording into a WordPress page, go to the Soundcloud account on the computer, where the sound just recorded can be found. Be sure select  “Profile” in the dropdown menu under the avatar, in order to view your own sounds, rather than the larger community of Soundcloud users.
soundcloud-profile_Screenshot 2014-05-13 13.55.58
  • Copying the Link: Click on the title of the sound file (in the example, Broadcasting at Washington, DC) and this access the sound’s page (see figure below), where the link can be copied. Once this is done, paste the link into a WordPress page and the sound will appear in the Soundcloud player.
soundcloud-link_Screenshot 2014-05-13 13.58.31

For the purpose of demonstration, I have copied the link below, where the Soundcloud player appears with the title, photo, and waveform.

Flickr

In order to participate in the Open Source Studio Flickr feed, it is necessary to have a Flickr account, as well as a member of a Flickr group page that is used for a class. The following instructions explain how to use using Flickr as a media repository for collective image projects and group feeds.

  • Create a Flickr account: fill out the signup form to create a new Flickr account and Yahoo account (see figure below).
flickr-signup_Screenshot 2014-05-13 14.15.55

Flickr is a powerful database tool for storing, organizing, and displaying your images. This tutorial does not cover most of the functionality, but a starting point for exploring Flickr and the many ways it can be integrated with WordPress.

  • Flickr Photostream: Flickr has a fairly complex interface, so it is important to first identity the “Photostream,” which is where images enter Flickr before they have been organized and distributed into sets and groups. To get to the Photostream, click on “You” on the main menu and then select “Photostream” in the dropdown menu (see figure below). From here there is access to the most recent uploads.
flickr-interface_Screenshot 2014-05-13 14.21.32

Creating a Flickr Group

The use of the Flickr group enables the collective organization of images. The Flickr group can be displayed in WordPress as a live feed that aggregates the images of multiple of users. For a class site, this provides an opportunity for students to share their work in a dynamic and aesthetically provocative way. This tutorial describes the creation of a Flickr group and its use.

  • Creating a Group: In the “Groups” menu, select “Create a Group.”
flickr-group-menu_Screenshot 2014-05-13 15.39.38
  • Public or Private: I would suggest using “Public, invitation only” (see figure below), so while only members can join the group, the Flickr group page can be viewed publically. Click on the “Create” button to form a new Flickr group.
private-group_Screenshot 2014-05-14 12.58.26
  • Naming the Group: fill out the form for the Flickr group, indicating the title and description (see figure below). After choosing “Next,” use all the default settings for the group.
group-form1_Screenshot 2014-05-14 13.05.13
  • Inviting Members: Once completed, click on “Invite Friends” on the right hand side of the main menu in order to add members to the group (see figure below). Members will be able to add images to the Flickr group, which will subsequently be displayed on the Flickr feed in WordPress.
studio-feed_Screenshot 2014-05-14 13.08.38
  • Student Members: students will often already be Flickr members, so they can be added as “A Flickr member.” However for those who haven’t yet joined Flickr, use “A friend who isn’t a member yet” (see figure below). Unfortunately, for inviting Flickr members, only send one invitation can be sent at a time. Be sure to use the email address that the student used to initially join Flickr.
flickr-invitation-member_Screenshot 2014-05-14 13.20.01

Using the Flickr Group

For purposes of demonstration, the use of the Flickr Group will be for the OSS NTU Flickr Group, created for my classes at NTU.

  • Note to Students: Before uploaded images can be included in a group, all students need to join the group. It is easiest if students have already setup a Flickr account before the instructor, who administrates the group, adds students to the group. Once a Flickr account is setup, let the instructor know.
  • Uploading Images to Flickr: In the top menu on the right hand side is the “Upload” button for uploading images to Flickr. The upload interface is simple to use: either drag and drop images or click on “Choose Upload Videos or Images” (see figure below). Multiple images can be uploaded as a batch.
flickr-upload_Screenshot 2014-05-13 15.23.53

I don’t recommend uploading videos to Flickr. It is primarily used for images and it is best to use Vimeo for video files.

  • Assigning Images to a Group: Be sure uploaded images are selected before assigning them to the class Flickr group (see figure below).
flickr-selected_Screenshot 2014-05-13 15.28.20
  • To add to the OSS NTU group, click on “Add to Groups” in the menu on the left side, and a popup window will give you a selection of any groups that one is a member of (see figure below). By selecting the OSS NTU group, all of the selected images will be added to the group once “Upload a Photo” is clicked on (see figure above). All images will now appear on the OSS Flickr Feed.
flickr-add-group_crop_Screenshot 2014-05-13 15.31.04
  • Appearing on the Flickr Feed: Once the images are selected and uploaded, they will appear on the Flickr Feed, located on the home page of the class site (see figure below).
oss-flickr-feed_Screenshot 2014-05-14 13.32.44
  • Accessing the Flickr Group Page: Group images can also be accessed on the Flickr group page. By clicking on “Groups” in the Flickr main menu, icons for groups will appear on the “Your Groups” page (see figure below).
flickr-groups_Screenshot 2014-05-14 13.35.19
  • The Flickr Group Page: By clicking on the latter group, the complete feed is found (see figure below). This page provides a visual record of all activity during the course of a semester.
flickr-complete-group1_Screenshot 2014-05-14 13.41.54

The Flickr group page is more than an archive, it is also a space for designing collective image projects. It is up to students and instructors to invent ways of using the repository as a creative medium for collaboration.