Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Image selector for content items: Implement the server widget

The SimpleImageSelector class is inherited from the SimpleScriptView class (a widely used Sitefinity CMS class that provides the basis of all script widgets). In the SimpleImageSelector class, by overriding the LayoutTemplatePath property, you specify the template you are using. By overriding the OnInit method, you include a custom stylesheet. By overriding GetScriptReference and GetScriptResources, you provide a reference to the corresponding client-side component. Implement the following code:

public override string LayoutTemplatePath
{
    get
    {
        return"~/ThumbnailSelector/ThumbnailSelectorField.ImageSelector.SimpleImageSelector.ascx";
    }
    set
    {
        base.LayoutTemplatePath = value;
    }
}
  
protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    HtmlLink link = new HtmlLink();
    var cssUrl =this.Page.ClientScript.GetWebResourceUrl(this.GetType(),"ThumbnailSelectorField.ImageSelector.SimpleImageSelector.css");
    link.Attributes.Add("href", cssUrl);
    link.Attributes.Add("type", "text/css");
    link.Attributes.Add("rel", "stylesheet");
    this.Page.Header.Controls.Add(link);
}
  
public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    var descriptors = new List<ScriptDescriptor>();
    var descriptor = newScriptControlDescriptor(typeof(SimpleImageSelector).FullName,this.ClientID);
  
    descriptor.AddComponentProperty("binder",this.Binder.ClientID);
    descriptor.AddComponentProperty("albumBinder",this.AlbumBinder.ClientID);
  
    descriptors.Add(descriptor);
    return descriptors.ToArray();
}
  
public override IEnumerable<ScriptReference> GetScriptReferences()
{
    var assemblyFullName =typeof(SimpleImageSelector).Assembly.FullName;
    var scripts = new List<ScriptReference>();
  
    var selectorScript = newScriptReference(SimpleImageSelector.simpleImageSelectorScript, assemblyFullName);
    scripts.Add(selectorScript);
  
    return scripts;
}
  
private const string simpleImageSelectorScript ="ThumbnailSelectorField.ImageSelector.SimpleImageSelector.js";
You implement the rest of the logic on the client side.

Back To Top

Next: Image selector for content items: Implement the client widget