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

Forums / Developing with Sitefinity / WebEditor for Image in ImageLibrary?

WebEditor for Image in ImageLibrary?

17 posts, 0 answered
  1. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    07 Apr 2010
    Link to this post
    Hi, I have been following along with various examples of creating Control Designers to build a friendly UI for my users to input values that will display in a custom user control.  I've followed this example with success:

    http://www.sitefinitywatch.com/blog/09-02-17/Accessing_Underlying_Properties_with_Control_Designers.aspx

    Great!  One of the properties is the path of an image.  I could just tell my users "FTP to a certain folder, then paste in the path into this text box."  However, I would like to utilize an ImageLibrary ... allowing users to upload via Sitefinity, then allow them in my Control Designer to select the image they want to use.

    I read this:

    http://www.sitefinitywatch.com/blog/09-01-28/Making_Control_Properties_a_bit_more_User_Friendly_with_Web_Editors.aspx

    In this situation, do I need a web editor?  I looked through this namespace: 

    Telerik.Cms.Web.UI

    But didn't see an ImageLibrary web editor, nor did I see one for GenericContent.  Could some kind soul point me in the right direction?  Thank you!
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Apr 2010
    Link to this post
    Hi BobTabor,

    You could implement the following web editor - Working with selectors Part One: Content selector, Image selector, Document selector. or implement ProeprtyEditorDialog in the ControlDesigner

    Regards,
    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. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    07 Apr 2010
    Link to this post
    Thanks for the fast reply.  I do believe the PropertyEditorDialog is what I needed.  Thanks ... a follow-up ...

    In your reply:

    http://www.sitefinity.com/support/forums/sitefinity-3-x/developing-with-sitefinity/cmsurlwebeditor-in-a-custom-control-property-designer.aspx

    What is the 'editorDialog' object defined as?  I don't see it's definition in the code snippet you used.

    Thank you again,
    Bob
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Apr 2010
    Link to this post
    Hi BobTabor,

    You could use PropertyEditorDialog editorDialog;

    Best wishes,
    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.
  5. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    07 Apr 2010
    Link to this post
    Awesome ... ok, almost there ... the Telerik.Cms.Web.UI.UrlEditorWrapper works great for Urls.  What could I substitute for Images in a given ImageLibrary?  I didn't see an ImageEditorWrapper in your docs, unfortunately.  Thank you!
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Apr 2010
    Link to this post
    Hi BobTabor,

    Could you elaborate some more about "What could I substitute for Images in a given ImageLibrary?"

    Regards,
    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.
  7. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    07 Apr 2010
    Link to this post
    Thanks!

    This code you referred me to earlier the thread:

    private PropertyEditorDialog Dialog;
     
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Dialog = new PropertyEditorDialog();
        this.Dialog.TypeContainer = this;
        this.Dialog.PropertyChanged += new PropertyValueChangedEventHandler(editorDialog_PropertyChanged);
        this.Controls.Add(this.Dialog);
     
        this.urlPicker.CommandName = "Telerik.Cms.Web.UI.UrlEditorWrapper, Telerik.Cms";
        this.urlPicker.CommandArgument = "Node";
        this.urlPicker.Command += new CommandEventHandler(urlPicker_Command);
    }
     
    void editorDialog_PropertyChanged(object source, PropertyValueChangedEventArgs e)
    {
        ThumbnailTextBox.Text = e.PropertyValue.ToString();
    }
     
    void urlPicker_Command(object sender, CommandEventArgs e)
    {
        string name = (string)e.CommandArgument;
        this.Dialog.Show(name, e.CommandName);
    }


    ... produces the the image entitled "urlselector.png" (see attachments).

    HOWEVER, what I'm aiming for here is to display the Image Selector ... see image entitled "imageselector.jpg" (see attachments).

    I'm hoping you'll say all I need to do is modify that code snippet to use a different type in the Telerik.Cms.Web.Ui namespace to change this line of code:

    this.urlPicker.CommandName = "Telerik.Cms.Web.UI.UrlEditorWrapper, Telerik.Cms";


    What I fear you'll say is that you guys don't have an easy way to do this.

    Thank you, Ivan.
    Bob Tabor
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Apr 2010
    Link to this post
    Hello BobTabor,

    Try using Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries for CommandName of the picker.

    Regards,
    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.
  9. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    07 Apr 2010
    Link to this post
    Thank you Ivan!  You are a scholar and a gentleman.

    One last question (for today :)  ) ...

    Selecting an image from the ImageLibrary returns something that looks like this:

    [Libraries]2daffd56-8f50-4a6c-8565-b3570d660801

    Based on this code:

    void editorDialog_PropertyChanged(object source, PropertyValueChangedEventArgs e)
    {
        ThumbnailTextBox.Text = e.PropertyValue.ToString();
    }

    On the USER CONTROL, I was simply using an ASP.NET Hyperlink control and setting it's ImageUrl property to whatever was stored in the Control Designer (i.e., the ThumbnailTextBox.Text property).  Clearly, that is not correct because it renders something like this to the end user:

    <img src='[Libraries]2daffd56-8f50-4a6c-8565-b3570d660801' width='116' height='68' />

    Which doesn't actually do anything.  So, is there some sort of conversion I need to do on that value?  OR am I not accessing it correctly on the editorDialog_PropertyChanged event?

    Thanks again Ivan!!!

  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Apr 2010
    Link to this post
    Hello BobTabor,

    This post will help you Resolving the url of dynamic links

    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.
  11. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    07 Apr 2010
    Link to this post
    [Doh, posted this one second after you posted the previous entry .. sorry about that]

    Wait ... I found this post ...

    http://www.sitefinity.com/support/forums/sitefinity-3-x/developing-with-sitefinity/getting-an-image-url-from-the-imageselector-webeditor.aspx

    I'll try this first.
  12. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    07 Apr 2010
    Link to this post
    Thank you Ivan!  You rock dude.

    For the sake of completeness in case anyone is following this thread, here's the entire body of my VideoActionTemplate.ascx.cs


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Cms.Web.UI;
    using Telerik.Cms.Engine;
     
    public partial class UserControls_LVS_VideoActionTemplate : System.Web.UI.UserControl
    {
        private PropertyEditorDialog Dialog;
     
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Dialog = new PropertyEditorDialog();
            this.Dialog.TypeContainer = this;
            this.Dialog.PropertyChanged += new PropertyValueChangedEventHandler(editorDialog_PropertyChanged);
            this.Controls.Add(this.Dialog);
     
            this.urlPicker.CommandName = "Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries";
            this.urlPicker.CommandArgument = "Node";
            this.urlPicker.Command += new CommandEventHandler(urlPicker_Command);
        }
     
        void editorDialog_PropertyChanged(object source, PropertyValueChangedEventArgs e)
        {
            ThumbnailTextBox.Text = GetItemUrl(e.PropertyValue.ToString());
        }
     
        void urlPicker_Command(object sender, CommandEventArgs e)
        {
            string name = (string)e.CommandArgument;
            this.Dialog.Show(name, e.CommandName);
        }
     
        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();
        }
     
     
    }

    Here's a snippet of the markup for that file (VideoActionTemplate.ascx) that pertains to this discussion:

    <table width="725" class="padded-table">
        <tr>
            <td width="150" valign="top">Video Thumbnail:</td>
            <td width="225" valign="top"><asp:TextBox ID="ThumbnailTextBox" runat="server" Columns="20"></asp:TextBox><asp:LinkButton ID="urlPicker" runat="server">Select...</asp:LinkButton></td>
            <td width="350" valign="top">Required - 116 x 68 thumbnail image of the video stored in the Image Library.</td>               
        </tr>

    Thanks again Ivan ... couldn't have gotten this far without all your work on the forums!
    Bob

  13. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    08 Apr 2010
    Link to this post
    On a separate (but related) issue, suppose that -- instead of the ImageSelector -- I wanted to display the RadEditor (or any selector that may wrap it) for a property such as a long description field.  In this scenario, can I still can I still use a Propery Editor Dialog?  Or do I need a whole other approach?  If I DO use the Property Editor Dialog, what would I need to replace this line of code with?

    this.urlPicker.CommandName = "Telerik.Cms.Web.UI.UrlEditorWrapper, Telerik.Cms";

    If I need to take another approach, can you point me at a good starting point (forum, blog, etc.?)  Keep in mind that I'm working in the context of a custom Control Designer, so unfortunately the technique in this post wouldn't apply (right?):

    http://www.sitefinity.com/support/forums/sitefinity-3-x/suggestions/need-textarea-control-on-edit-panel-of-a-usercontrol.aspx

    Thanks Ivan (et. al.)!
    Bob

  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    08 Apr 2010
    Link to this post
    Hi BobTabor,

    You could create the web editor as described in the forum post.The command name of urlPicker should be Telerik.Samples.MyWebEditor, App_Code

    Kind regards,
    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.
  15. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    08 Apr 2010
    Link to this post
    Ok, cool ... so I went down this road ... two small items of confusion on my part.  I was using the example (earlier in this thread) as my template, replacing those parts specific to the new RadEditor-based Web Editor.  Here's where I'm at ...

    In my Control Designer's Template ascx.cs ... I've got this:

    // LVS is my project's main namespace.
    private LVS.MyWebEditor MyRadEditor;
     
     
    protected void Page_Load(object sender, EventArgs e)
    {
      MyRadEditor = new LVS.MyWebEditor();
      MyRadEditor.TypeContainer = this;
      // Doesn't like the PropertyChanged event definition ... I haven't created it!
      MyRadEditor.PropertyChanged += new PropertyValueChangedEventHandler(MyRadEditor_PropertyChanged);
     
      descriptionEditor.CommandName = "LVS.MyWebEditor, App_Code";
      // Not sure if I would need a Command Argument ... commented the next line out.
      //descriptionEditor.CommandArgument = "";
      descriptionEditor.Command += new CommandEventHandler(descriptionEditor_Command);
     
    }
     
    void MyRadEditor_PropertyChanged(object source, PropertyValueChangedEventArgs e)
    {
     SeriesDescriptionTextBox.Text = e.PropertyValue.ToString();
    }
     
    void descriptionEditor_Command(object sender, CommandEventArgs e)
    {
     string name = (string)e.CommandArgument;
     // Again, no "Show" method ... I haven't created it yet!
     MyRadEditor.Show(name, e.CommandName);
    }

    So, the two challenges I have are:

    1) In the PageLoad, in this line:

    MyRadEditor.PropertyChanged += new PropertyValueChangedEventHandler(MyRadEditor_PropertyChanged);

    I know I need to define a PropertyChanged event ... should I just expose the underlying RadEditor control through a public property?

    2)  In the descriptionEditor_Command() event handler, I'm not sure at all what exactly to "show".   I realize I'm probably thinking about this all wrong, but not sure exactly what is expected here.
  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    09 Apr 2010
    Link to this post
    Hello BobTabor,

    Here is how the PropertyEditor should look

    protected void Page_Load(object sender, EventArgs e)
       {
     
           this.editorDialog = new PropertyEditorDialog();
           this.editorDialog.TypeContainer = this;
           this.editorDialog.PropertyChanged += new PropertyValueChangedEventHandler(editorDialog_PropertyChanged);
           this.Controls.Add(this.editorDialog);
     
           this.urlPicker.CommandName = "RadEditorSelector, App_Code";
           this.urlPicker.CommandArgument = "RadEditorDialog";
           this.urlPicker.Command += new CommandEventHandler(urlPicker_Command);
       }
     
       void editorDialog_PropertyChanged(object source, PropertyValueChangedEventArgs e)
       {
           Box1.Text = (string)e.PropertyValue;
       }
     
       void urlPicker_Command(object sender, CommandEventArgs e)
       {
           string name = (string)e.CommandArgument;
           this.editorDialog.Show(name, e.CommandName);
       }
     
      private PropertyEditorDialog editorDialog;

    and the RadEditor selector.

    public class RadEditorSelector : WebUITypeEditor<String>
    {
        public RadEditorSelector()
        {
        }
     
        public override string Value
        {
            get
            {
               if(!String.IsNullOrEmpty(editor.Content.ToString()))
                return (string)editor.Content;
               return _value;
            }
            set
            {
                this._value = value;
            }
        }
     
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
            editor = new RadEditor();
            //editor.ContentAreaCssFile = "~/Files/newstyle.css";
            editor.Skin = "Black";
            editor.ToolsFile = "~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml";
            Controls.Add(editor);
            string editorContent = this.editor.Content;
             
            if (String.IsNullOrEmpty(Value))
                this.Value = editor.Content.ToString();
                 
            editor.Content = this.Value;
        }
     
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
        }
     
        private RadEditor editor;
     
        private string _value;
     
    }

    You also have to create control reference to the Textbox where PropertyValue editor is set in the ControlDesigner class

    public TextBox TextBoxFromTemplate
    {
        get
        {
            return base.Container.GetControl<TextBox>("Box1", true);
        }
    }

    and get/set the text when you open/close the Control Dialog

    protected override void CreateChildControls()
       {
           base.CreateChildControls();
     
               TextBoxFromTemplate.Text = ((ControlWithCustomDesigner)DesignedControl).RadEditiorDialogValue;
           }
       }
     
     
       public override void OnSaving()
       {
     
           base.OnSaving();
           ((ControlWithCustomDesigner)DesignedControl).RadEditiorDialogValue = TextBoxFromTemplate.Text;
        }

    RadEditiorDialogValue  is a property in the Custom control that has designer.

    [System.ComponentModel.Category("TEST")]
       public string RadEditiorDialogValue
       {
           get
           {
               object obj = this.ViewState["RadEditiorDialogValue"];
               if (obj != null)
                   return (string)obj;
               return "aaa";
     
           }
           set
           {
               this.ViewState["RadEditiorDialogValue"] = value;
           }
       }

    Note this way you will be able to set and persist the value in the designer and control property , but this will not allow you to return the text as a content of the RadEditor when you open the PropertyEditorDialog.

    If you want to retrieve the content in the RadEditor from the TextBox you have to use RadWindow instead of PropertyEditor dialog

       <a id="openDialogWindow" href="#">OpenRadEditorDialog</a>
        
        
    <telerik:RadWindow ID="RadWindow1" runat="server" OpenerElementID="openDialogWindow"
        NavigateUrl="RadEditorTemplate.aspx"  OnClientShow="SetDialogContent" OnClientPageLoad="SetDialogContent" Width="600" Height="400" ReloadOnShow="true" Title="RadEditorTemplate"
     Skin="WebBlue"
        Behaviors="Close, Pin, Move, Reload" Modal="True"
        ShowContentDuringLoad="False" />
        

    You have to get the Textbox text and set it as RadEditor content

    sample

         
    <telerik:RadScriptBlock runat="server" ID="Block">
     <script type="text/javascript">
     
     
         function SetDialogContent(oWnd) {
             var contentWindow = oWnd.get_contentFrame().contentWindow;
           // here use setContent method.
             }
         }
        </script>
         
        </telerik:RadScriptBlock>


    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.
  17. BobTabor
    BobTabor avatar
    17 posts
    Registered:
    12 Dec 2007
    09 Apr 2010
    Link to this post
    Hi Ivan, first I want to express how grateful I am for all your help.  I truly appreciate it.

    I got the first half of the solution (everything BEFORE the RadWindow part) working.  But as you pointed out I will indeed need to load that content into the window to re-edit it.

    So, I spent a half-hour going down the RadWindow path ... and I'm going to admit defeat.  I'm simply behind schedule and there's just too much to learn about all the Rad controls to realistically pull this off in my tight time-frame.  In case someone else wants to tackle this, here's a helpful URL regarding this technique:

    http://demos.telerik.com/aspnet-ajax/editor/examples/editorinradwindow/defaultcs.aspx

    Disappointingly, however, it presupposed too much required Telerik-specific domain knowledge regarding folders and files and properties and the like that I lost my will to even try.  :)

    Again, thank you for all your help Ivan!
    Bob
Register for webinar
17 posts, 0 answered