nuPickers VimeoPro Pickers is an extension for nuPickers, enabling the following pickers to be able to select videos from Vimeo:

• DotNet CheckBox Picker
• DotNet PrefetchList Picker
• DotNet RadioButton Picker
• DotNet TypeaheadList Picker

(The DotNet DropDown Picker will work when it has support for Custom Labels - it currently only supports plain text)

Package Contents

Both the NuGet and Umbraco packages contain the following files:

• \bin\nuPickers.VimeoPro.dll
• \Views\MacroParitals\nuPickersVimeoPickers.cshtml

Custom Label support

The Umbraco package will also create a macro so you can test custom labels using nuPickersVimeoPickers.cshtml. This macro is supplied as an example to show how custom markup for each item can be implemented - it's not a requirement - without a macro, the pickers will just render the name, video id, and clickable thumbnail. In this example each item requires an additional HTTP Api request to Vimeo to get Video details.

Whilst the installation of the Umbraco package adds this macro, NuGet installs would have to create this manually:

Remember to include the macro parameters. At runtime nuPicker will automatically set the values so these parameters can be used in your custom labels.

Creating a Vimeo Picker

Create a new DataType using any of the supported nuPickers DotNet Pickers and then select the nuPickers.VimeoPro.dll for the Assembly. Once the Assembly has been set, the Class configuration can be set. Currently there is only one option:

To use the Vimeo API, you will need to Register for a Key

Make sure you pick the JSON option as the Save Format for your datatype!

Search

In addition to the mandatory Vimeo Auth Token values, the VimeoVideoDataSource class also includes a User Id (this can be found in the url when viewing a user's profile on Vimeo). The User Id field lets you limit the results to a single user account. You can also supply the search text used for non-typeahead pickers.

Example

DotNet CheckBox Picker with a VimeoVideoDataSource:

Assuming a custom label was not used the default behavior is to display the title, video id, and a clickable thumbnail that will open the video in a new tab.

Using a custom label with the provided sample macro:

Using a Vimeo Picker

Once Vimeo videos have been picked, strongly typed representations of the Videos can be obtained via extension methods on the default Picker obj. For example:

@using nuPickers;               
@using nuPickers.VimeoPicker;
@using nuPickers.VimeoPicker.Model; 

// get the default Picker obj for the nuPicker
Picker picker = Model.Content.GetPropertyValue<Picker>("vimeoPickerAlias");

foreach (string pickedKey in picker.PickedKeys)
{
    // Option 1 - use the extension method to get the video
    VimeoVideo video = picker.GetVimeoVideo(pickedKey);
    @Html.Raw(video.Embed.Html)

    // Option 2- use the extension methods to get an embed object including iFrame html
    // This method has overloads to allow you to specify height, width, autoPlayback, etc..
    VideoOEmbed oEmbed = picker.GetVideoOEmbed(pickedKey);
    @Html.Raw(oEmbed.Html)
}