+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Custom Image Selector for SitefinityImage Module

Custom Image Selector for SitefinityImage Module

8 posts, 0 answered
  1. John
    John avatar
    22 posts
    Registered:
    21 Jun 2010
    26 Jul 2010
    Link to this post
    Hello.  We are on Sitefinity 3.7 SP3.  We are wanting to use the SitefinityImage module but we need the granular security capability of determining what Image libraries the user is able to view and upload to.  We did something similar with a custom ImageGallery, but the ParentIDs property doesn't exist for SitefinityImage.  Do we have to implement a custom ImageSelector, or a separate custom SitefinityImage module?  Appreciate any help in advance.

    ~John
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 Jul 2010
    Link to this post
    Hello John,

    SitefinityImage is a control. The built in selector of SitefinityImage does not provide capabilities for granular permissions. You have to implement a custom WebUITypeEditor.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. John
    John avatar
    22 posts
    Registered:
    21 Jun 2010
    29 Jul 2010
    Link to this post

    Gotcha.  I rather figured we'd have to do custom coding to implement this.  Based on something similar we did for a custom Image Gallery, I have put some code together that's getting there but not working.  I was wondering if you don't mind spending another minute or two letting me know if I'm going down the right track or not.  Here's the control I made:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ABW_ImageCustomControl.ascx.cs" Inherits="UserControls_ABW_ImageCustomControl" %>
    <%@ Register Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Cms.Engine" Namespace="Telerik.Cms.Engine.WebControls" TagPrefix="sf" %>
      
    <asp:Label ID="lbl_libraryname" CssClass="rmText" runat="server"></asp:Label>
    <sf:SitefinityImage ID="singleImage" runat="server" />

    Codebehind:
    public partial class UserControls_ABW_ImageCustomControl : System.Web.UI.UserControl
    {
        //This is a custom webeditor for getting the libraries based on user's group role
        private string _librarynames;
      
        [Telerik.Cms.Web.UI.WebEditor("ABW_ImageWebEditor,App_Code")]
        public string Librarynames
        {
            get { return _librarynames; }
            set { _librarynames = value; }
        }
      
        protected void Page_Load(object sender, EventArgs e)
        {
            //Display the name of the Library
            string libname = Librarynames.ToString();
            libname = libname.Replace("'", " ");
            lbl_libraryname.Text = libname.ToString();
        }
    }

    And here's the web editor:
    public class ABW_ImageWebEditor : Telerik.Cms.Web.UI.WebUITypeEditor<string>
    {
        private string selectedlibrary;
        // DropDownList librarylist;
        private CheckBoxList wslrlibrarylist = null;
      
        public override string Value
        {
            get
            {
                String librarynames = "";
      
                foreach (ListItem li in wslrlibrarylist.Items)
                {
                    if (li.Selected)
                    {
                        librarynames = librarynames + "'" + li.Text + "'" + ",";
                    }
                }
      
                if (librarynames.Length > 0)
                {
                    librarynames = librarynames.Substring(0, librarynames.Length - 1);
                }
                return librarynames;
            }
            set
            {
                String setlibrary = value;
                setlibrary.Replace("'", "");
                foreach (ListItem li in wslrlibrarylist.Items)
                {
                    if (setlibrary.Contains(li.Text.ToString()))
                    {
                        li.Selected = true;
                    }
                }
            }
        }
      
        public string Template
        {
            get
            {
                object o = this.ViewState["Template"];
                if (o == null)
                    return ("~/UserControls/ABW_ImageCustomControl.ascx");
                return (string)o;
            }
            set
            {
                this.ViewState["Template"] = value;
            }
        }
      
        protected override void CreateChildControls()
        {
            this.Controls.Clear();
      
            Label lblheading = new Label();
            lblheading.Text = "Select the Library   ";
            this.Controls.Add(lblheading);
      
            //Create a list of all libraries for the user's group
            string str_username = UserManager.GetCurrentUserName();
            DataSet all_library = // custom db call to get libraries per user group   wslrlibrarylist = new CheckBoxList();
      
            int count = all_library.Tables[0].Rows.Count;
            if (count != 0)
            {
                for (int i = 0; i < count; i++)
                {
                    wslrlibrarylist.Items.Add(all_library.Tables[0].Rows[i]["name"].ToString());
                }
                this.Controls.Add(wslrlibrarylist);
            }
        }
      
        public ABW_ImageWebEditor()
        {
            this.EnsureChildControls();
        }
    }

    The control's not working yet - at a minimum, I'd imaging we still ahve to bind the libraries to the SitefinityImage control somehow.  Are we heading down the right path here?

    Appreciate any help.
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    30 Jul 2010
    Link to this post
    Hi John,

    If you would like to restrict users to use only certain libraries for the image control you would have to override the SitefinityImage class by creating your own and substituting the built in web editor with yours:
    public class CustomImage : SitefinityImage
    {
        [Telerik.Cms.Web.UI.WebEditor("ABW_ImageWebEditor,App_Code")]
        public override string ImageUrl
        {
            get
            {
                return base.ImageUrl;
            }
            set
            {
                base.ImageUrl = value;
            }
        }
    }

    Greetings,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. John
    John avatar
    22 posts
    Registered:
    21 Jun 2010
    02 Aug 2010
    Link to this post

    Ivan, I created a class in App_Code using your sample code for inheriting from SitefinityImage class.  I've added a ascx with a reference to this new control.  Code:

    In App_code (reference to my web editor temporarily commented out for testing)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Cms.Engine.WebControls;
      
    namespace CustomControls
    {
        public class SingleImage : SitefinityImage
        {
            // [Telerik.Cms.Web.UI.WebEditor("ABW_ImageWebEditor,App_Code")] 
            public override string ImageUrl
            {
                get
                {
                    return base.ImageUrl;
                }
                set
                {
                    base.ImageUrl = value;
                }
            }
        }
    }

    The ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SingleImage.ascx.cs" Inherits="UserControls_SingleImage" %>
    <%@ Register Assembly="App_Code" Namespace="CustomControls" TagPrefix="cc1" %>
      
    <cc1:SingleImage ID="ccSingleImage" runat="server" />

    When I add this ascx through the Upload Control utility, the control doesn't behave like the SitefinityImage.  What am I doing wrong?

    Thanks,
    John
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    04 Aug 2010
    Link to this post
    Hi John,

    Thank you for getting back to me.

    I am sorry if I have not been clear enough in my last post. You should create a custom control which derives from the SitefinityImage. You do not need to use an .ascx file you should directly add the control to the toolbox with through the web.config:
    <toolboxControls>
     <clear />
     ...
        <add name="Custom Image" section="Custom Controls" type="CustomImage, App_Code"></add>
    </toolboxControls>



    All the best,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. John
    John avatar
    22 posts
    Registered:
    21 Jun 2010
    05 Aug 2010
    Link to this post
    Thank you for your help Ivan, we have successfully implemented a custom solution for user-level granular security for an image control.  I will post our code in case it's useful to anyone else.

    web.config:
    <add name="Single Image" section="User Controls" type="CustomControls.SingleImage, App_Code"
      description="Displays an image on a Web page." />

    App_Code:
    namespace CustomControls
    {
        public class SingleImage : SitefinityImage
        {
            [Telerik.Cms.Web.UI.WebEditor("ABW_ImageWebEditor,App_Code")]
            public override string ImageUrl
            {
                get
                {
                    return base.ImageUrl;
                }
                set
                {
                    base.ImageUrl = value;
                }
            }
        }
    }

    Custom web editor, also in App_Code
    public class ABW_ImageWebEditor : Telerik.Cms.Web.UI.WebUITypeEditor<string>
    {
        private RadioButtonList rbtnImages = new RadioButtonList();
      
        public override string Value
        {
            get
            {
                return rbtnImages.SelectedValue;
            }
            set
            {
                rbtnImages.SelectedValue = value;
            }
        }
      
        public string Template
        {
            get
            {
                object o = this.ViewState["Template"];
                if (o == null)
                    return ("~/UserControls/ABW_ImageGalleryCustomControl.ascx");
                return (string)o;
            }
            set
            {
                this.ViewState["Template"] = value;
            }
        }
      
        protected override void CreateChildControls()
        {
            this.Controls.Clear();
      
            Label lblheading = new Label();
            lblheading.Text = "Select the Image   ";
            this.Controls.Add(lblheading);
      
            rbtnImages = new RadioButtonList();
      
            // Get the Image list for the user
            string userName = UserManager.GetCurrentUserName();
            DataSet ds = // Custom SQL call to get only images user can access
      
            if (ds.Tables[0].Rows.Count > 0)
            {
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    rbtnImages.Items.Add(new ListItem(ds.Tables[0].Rows[i]["ImageName"].ToString(), "[Libraries]" + ds.Tables[0].Rows[i]["ImageID"].ToString()));
                }
                this.Controls.Add(rbtnImages);
            }
        }
      
        public ABW_ImageWebEditor()
        {
            this.EnsureChildControls();
        }
    }

    I'm sure there's cooler things that could be thrown in, such as rendering the binary blob from the db into a viewable image when selecting and that sort of thing, but it works.
  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    05 Aug 2010
    Link to this post
    Hello John,

    Thank you for submitting your code.

    I am sure it will be helpful for the community. I have updated your Telerik points.

    All the best,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
8 posts, 0 answered