In this tutorial, you will learn how to create a Vimeo/Youtube dynamic control within Episerver v6. On a recent project, our client wanted the ability to drop an image, a Vimeo video or YouTube video anywhere on their Episerver 6 R2 site. In order to achieve this, I created a simple Episerver dynamic control. The control needs to render a dropdown and an image picker in order for a content editor to configure it. I had experience adding simple text property onto a dynamic control, however, I struggled to find a good tutorial about creating adding more complex properties. This tutorial hopes to fix this knowledge gap 🔥🔥🔥
Image Picker Property: Out-of-the-box, Episerver gives you a load of properties for managing and rendering data in dynamic controls. To render an image, add a public property within a user control that is of type PropertyImageUrl. To get the URL to display in the web view, use the Value property :
Custom Dropdown Property: Creating a drop-down list within a dynamic control is a lot less obvious compared to rendering an image picker. The problem with displaying a drop-down is setting the initial values when the form loads. For my component, I want an editor to pick from two options. I didn't need to populate the data dynamically from an external data source. Episerver ships with a PropertyDropDownList property. This property is useful for dynamically populating a list. It is less useful for using hardcoded values.
In the end, I decided to create a custom property. Creating a property is done in two stages, first, you need to define the register the property with Episerver using PageDefinitionTypePlugIn. To make an Episerver property its easier to extend and inherit from an existing type. This is why the code below inherits from PropertyString
The next step is to create a custom control. I called mine AlignmentControl to deal with storing and retrieving the actual data.
In CreateEditControls() I create a new DropDownList and add the list items. If you want to make this more dynamic, you could pass in a page reference to a settings class or something similar in the control class and pass it down. The rest is just basic getter and setter stuff.  This is how you add dropdowns and images to dynamic controls. Happy Coding 🤘
Â
Download the source code here.
