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

Forums / Developing with Sitefinity / Getting an image URL from the ImageSelector WebEditor?

Getting an image URL from the ImageSelector WebEditor?

14 posts, 0 answered
  1. Jay
    Jay avatar
    51 posts
    Registered:
    16 Jul 2008
    27 Apr 2009
    Link to this post
    I'm trying to create a very simple custom control that will allow a user to select some images and links.  I'm using the ImageSelector WebEditor to display the nice Sitefinity interface for choosing an image from a library.  However, the control returns the GUID of the image instead of  the actual image URL.  How can I go about getting the actual image url?

    My code is below.  Any help is appreciated.

    1 <%@ Import Namespace="System.ComponentModel" %> 
    2  
    3 <script runat="server"
    4     [Category("Promo 1")] 
    5     [Telerik.Cms.Web.UI.WebEditor("Telerik.Cms.Web.UI.CmsUrlWebEditor, Telerik.Cms")] 
    6     public String LinkURL1 
    7     { 
    8         get 
    9         { 
    10             return hyperLink1.NavigateUrl; 
    11         } 
    12         set 
    13         { 
    14             hyperLink1.NavigateUrl = value
    15         } 
    16     } 
    17  
    18     [Category("Promo 1")] 
    19     [Telerik.Cms.Web.UI.WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")] 
    20     public String ImageURL1 
    21     { 
    22         get 
    23         { 
    24             return hyperLink1.ImageUrl; 
    25         } 
    26         set 
    27         { 
    28             hyperLink1.ImageUrl = value
    29         } 
    30     } 
    31 </script> 
    32  
    33  
    34 <asp:HyperLink ID="hyperLink1" runat="server"></asp:HyperLink> 

  2. Gabe Sumner
    Gabe Sumner avatar
    440 posts
    Registered:
    09 Sep 2007
    27 Apr 2009
    Link to this post
    Hi Jay,

    Check out the following thread for ImageSelector usage:


    Does this help?  Also, some WebEditors are picky about the name of the underlying property.  For example, where you are using ImageUrl1, you might need to use SelectImage.

    If this doesn't help, let me know.

  3. Jay
    Jay avatar
    51 posts
    Registered:
    16 Jul 2008
    27 Apr 2009
    Link to this post
    Thanks Gabe... the post you mentioned (and your site) were some of the resources I used to get as far as I am.  Unfortunately it's still not working.  I tried changing the name to SelectImage as you mentioned but it still does the same thing.  No matter what I do it always returns the GUID of the image when what I really want is the image path.
  4. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    28 Apr 2009
    Link to this post
    Hi Jay,

    Here is an example on how to achieve the required functionality:

        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")] 
        public string Value 
        { 
            get 
            { 
                return this.value; 
            } 
            set 
            { 
                this.value = value; 
            } 
        } 
     
        [WebEditor("Telerik.Cms.Web.UI.CmsUrlWebEditor, Telerik.Cms")]  
        public string LinkURL
        {    
            get  
            {  
                return hyperLink1.NavigateUrl;  
            }  
            set  
            {  
                hyperLink1.NavigateUrl = value;  
            }  
        }  
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!string.IsNullOrEmpty(this.Value)) 
            { 
                hyperLink1.ImageUrl = this.GetItemUrl(this.Value); 
            } 
        } 
     
        private string GetItemUrl(string val) 
        { 
            if (val.StartsWith("~/")) 
                return this.ResolveUrl(val); 
     
            if (val.StartsWith("[")) 
            { 
                int idx = val.IndexOf("]"); 
                string provider = val.Substring(1, idx - 1); 
                string strId = val.Substring(idx + 1); 
                Guid id = new Guid(strId); 
     
                if (ContentManager.Providers.ContainsKey(provider)) 
                { 
                    IContent cnt = ContentManager.Providers[provider].GetContent(id); 
                    if (cnt != null
                        return VirtualPathUtility.ToAbsolute(cnt.UrlWithExtension, this.Context.Request.ApplicationPath); 
                } 
            } 
            return val.ToString(); 
        } 
     
        private string value; 

    You need to get the image url using the returned provider name and ID (as it is done in GetItemUrl method).

    Do let us know if this helps.

    All the best,
    Pepi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Jay
    Jay avatar
    51 posts
    Registered:
    16 Jul 2008
    28 Apr 2009
    Link to this post
    As always, your support is amazing.  This is perfect... thank you so much.

    Just a quick note for anyone else reading this... You'll need to import the "Telerik.Cms.Engine" namespace for this to work.

    Thanks again!!
  6. Jean
    Jean avatar
    90 posts
    Registered:
    06 Nov 2008
    16 Sep 2009
    Link to this post

    Actually... you need to use the following namespaces...

    using

     

    Telerik.Cms.Web.UI;

     

    using

     

    System.ComponentModel;

     

  7. Frederico Fernandes
    Frederico Fernandes avatar
    29 posts
    Registered:
    27 Oct 2009
    04 Jan 2010
    Link to this post
    Hi ,

    I want to do something similar but i want to save in a DB when i click in "i'm Done", how can i do it?
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    04 Jan 2010
    Link to this post
    Hi Frederico Fernandes,

    You need to create a custom ControlDesigner and override OnSaving() method. There you should add your logic to persists the data you want.

    sample


    public class TestDesigner: Telerik.Framework.Web.Design.ControlDesigner
    {

    public
    override void OnSaving()
      {
          base.OnSaving();
     
          DataContext dataContext = new DataContext();
             ....
                     ....
          dataContext.SubmitChanges();
      }
    }


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  9. Frederico Fernandes
    Frederico Fernandes avatar
    29 posts
    Registered:
    27 Oct 2009
    04 Jan 2010
    Link to this post
    hi Ivan, i make my custom control designer but i can do
    [Telerik.Cms.Web.UI.WebEditor("Telerik.Cms.Web.UI.CmsUrlWebEditor, Telerik.Cms")] 
        public string LinkUrl 
        { 
            get { return _linkUrl; } 
            set { _linkUrl = value; } 
        } 

    the content does not apear.
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    04 Jan 2010
    Link to this post
    Hello Frederico Fernandes,

    As far as I see you have created WebEditor, not ControlDesigner. I suggest that you should go through the following posts Making Control Editing User-Friendly with Sitefinity Control Designers

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Frederico Fernandes
    Frederico Fernandes avatar
    29 posts
    Registered:
    27 Oct 2009
    04 Jan 2010
    Link to this post
    Hi Ivan,

    I check the link you send but i want to know how i catch the button "i'm done" in advanced tab?
  12. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    04 Jan 2010
    Link to this post
    Hello Frederico Fernandes,

    Please take a look at the previous post again where I suggested that you had to override OnSaving method. The "I'm done button" is one and it does not matter whether you are in advanced or basic tab.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Frederico Fernandes
    Frederico Fernandes avatar
    29 posts
    Registered:
    27 Oct 2009
    04 Jan 2010
    Link to this post
    Hi Ivan,

    its strange but it hapens in basic tab the event onSave work but when i'm in advanced tab the event don't work.

    thanks for your help anyway. i'll try other way.

    Frederico Fernandes
  14. jtroconis
    jtroconis avatar
    1 posts
    Registered:
    24 Nov 2006
    23 Jun 2011
    Link to this post
    Hi, you could use something like this which will fill the image url right after clicking on "I'm done". I've used this to render a div with a background image out of a web user control.

     

    public partial class Controls_ImageBanner : System.Web.UI.UserControl
    {
      
        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]
        [Bindable(true)]
        [DefaultValue("")]
        [UrlProperty]
        [TypeConverter(typeof(ContentItemUrlConverter))]
        public string BackgroundImageUrl
        {
            get;
            set;
        }
      
      
        private class ContentItemUrlConverter : TypeConverter
        {
            public override bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
            
                return ((sourceType == typeof(string)) || base.CanConvertFrom(context, sourceType));
            }
      
            public override bool CanConvertTo(ITypeDescriptorContext context, Type destinationType)
            {
                return ((destinationType == typeof(InstanceDescriptor)) || base.CanConvertTo(context, destinationType));
            }
      
            public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
            {
                string o = value as string;
                return o ?? base.ConvertFrom(context, culture, value);
            }
      
            public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
            {
                string o = value as string;
                if (o != null && ((destinationType == typeof(string))))
                {
                    Match match = Regex.Match(o, @"\[(\w+)\](\w{8}-\w{4}-\w{4}-\w{4}-\w{12})");
                    if (match.Success)
                    {
                        string provider = match.Groups[1].Value;
                        string id = match.Groups[2].Value;
                        if (ContentManager.Providers.ContainsKey(provider))
                        {
                            IContent cnt = ContentManager.Providers[provider].GetContent(new Guid(id));
                            if (cnt != null)
                            {
                                return cnt.UrlWithExtension;
                            }
                        }
                    }
                    else if (Regex.IsMatch(o, "^[a-zA-Z]:/"))
                    {
                        var appPath = HttpContext.Current.Server.MapPath("~");
                        return "~/" + o.Replace(appPath.Replace("\\", "/"), string.Empty);
                    }
                    return o;
                }
                return base.ConvertTo(context, culture, value, destinationType);
            }
        }
         
    }

    Hope it helps,
    Javier Troconis
Register for webinar
14 posts, 0 answered