Sitefinity - Custom Image selector - Azure Player Dynamic Image selector.

Well,

I am writing this post after a really long gap of time, I was away from my blog due to some personal reason and aggressive deadlines for my project, so today I thought of writing a blog about my experience with sitefinity, (http://www.sitefinity.com/) which is Content Management System aka CMS from a very famous IT firm Telerik.

The CMS is purely on HTML and has its own pros and cons, it doesn't have any custom widgets available and you have to design most of them.

So while developing my client website for it I found issues about the CMS shortcoming and lack of documentation, basically lack of documentation is the major problem with this CMS.

So we had a requirement, we need to show the AES encrypted adaptive bit rate video to the user, we were using azure services for this, but the major requirement is that we were using a CMS and we need to make everything dynamic i.e. Business User editable and a drag and drop widget, which includes:

1. Video URL.
2. Video Title.
3. Video Description.
4. Video Poster Image.

The top three are easily doable and we did it in a record week time including testing, but the last point  almost took our life away from us.

So below is a what we did, have a look at it and it may help you to create a custom image selector as well.
Enjoy.

Public properties in our .cs file:

              public string Title { get; set; }

              public string VideoURL { get; set; }

              public string Description { get; set; }

              public string ImageSelector { get; set; }

CS code in our Designer File for implementation:

/// <summary>

        /// Gets a collection of script descriptors that represent ECMAScript (JavaScript) client components.

        /// </summary>

        public override System.Collections.Generic.IEnumerable<System.Web.UI.ScriptDescriptor> GetScriptDescriptors()

        {

            var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());

            var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();

            descriptor.AddElementProperty("title", Title.ClientID);

            descriptor.AddElementProperty("description", Description.ClientID);

            descriptor.AddElementProperty("videoURL", VideoURL.ClientID);

            descriptor.AddComponentProperty("ImageSelector", ImageSelector.ClientID);

            return scriptDescriptors;

        }

ASCX Code for our Designer (widget) image selector:

        <li class="sfFormCtrl">

            <asp:Label runat="server" AssociatedControlID="ImageSelector" CssClass="sfTxtLbl">Poster</asp:Label>

            <sitefinity:ImageField ID="ImageSelector" runat="server" DisplayMode="Write" UploadMode="Dialog" DataFieldName="Image" />

            <div class="sfExample">Poster Image URL of video</div>

        </li>

JS Code for our Designer file:

Add this line of code in initialization block created in widget:

       this._ImageSelector = null;

Add this line of code in refresh UI block:

this.get_ImageSelector()._imageElement.src = controlData.ImageSelector;

Add this line of code in apply changes block:

              controlData.ImageSelector = this.get_ImageSelector()._selectedImageItem ? this.get_ImageSelector()._selectedImageItem.Url : controlData.ImageSelector;

And the following changes at last part of JS below changes.

       /*ImageSelector Properties*/

       get_ImageSelector: function () { return this._ImageSelector; },

       set_ImageSelector: function (value) { this._ImageSelector = value; },

Enjoy the dynamic Image selector like below:

I will also write next about how to consume the URLS in it in front end using the JS and .Net capabilities.


Thanks
Harshit aka parshii