Image Editor Dialog

In version 3.7, you could add a ButtonSelector to a custom control and with a little bit of javascript render up the ImageEdirorDialog.aspx page which would allow you to upload a image into the main sitefinity image library or the selection of a image that has already been uploaded.  With sitefinity 4.1 this option no longer exists from what i can tell.  To be able to provide the same look and feel of the regular image upload dialog that exists within the rest of Sitefinity, I would like to be able to use the "out of the box" option for uploading an image within a module through ascx template.  Is there a way to do this or do I have to build all the pieces myself as the walkthrough here implies (http://www.sitefinity.com/40/help/developers-guide/how-to-how-to-create-a-simple-image-selector.html)? Thanks in advance.

Marc

I have worked on getting the simple image selector and everything on the example works until I try to use the SimpleImageField within my sitefinity project. I recieve the following error:

A required control was not found in the template for "~/SFRes/Telerik.Sitefinity.Resources.Templates.Fields.TextField.ascx". The control must be assignable from type "Telerik.Sitefinity.Web.UI.SitefinityLabel" and must have ID "titleLabelRead".

Hi Marc,

Please use MediaContentSelecorView. Take a look at this thread

Greetings,
Ivan Dimitrov
the Telerik team

Thanks for the reply.  I will dig deeper on that thread and report back. 

Cool. That looks to be what I was needing for selecting from existing images.  So using that same logic, would I use the MediaContentUploaderView to allow the uploading of a new image and include it either in the ImageControlDesignerTemplate.ascx or in its own ascx depending on how I would like to utilize the control/view?  Thanks again.

Hello Marc,

Yes you can use it, but you should set some of the control properties when your control is initialized.

sample

I have a custom control that I have added to the Page editor Toolboxes... In the custom control, I have a text field for the ImageURL, but I would like to make this an image selector --  Is there a way to do so? I tried using the WebEditor attribute. 

Here is my GrayBoxControl.ascx code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GrayBoxControl.ascx.cs" Inherits="SitefinityWebApp.Controls.GrayBoxControl" %>
<asp:Panel ID="phContent" runat="server" CssClass="inner" >
<h1><asp:Label ID="siHeaderTextLabel" runat="server"></asp:Label></h1>

<div class='img-container'>
    <asp:Image ID="siImage" runat="server" />
    <asp:PlaceHolder ID="phLink" runat="server"><p class='action-link'><asp:HyperLink ID="siHyperLink" runat="server" Target="_blank" /></p></asp:PlaceHolder>
</div>

<h2><asp:Label ID="siFooterHeaderLabel" runat="server"></asp:Label></h2>
<p><asp:Label ID="siFooterTextLabel" runat="server"></asp:Label></p>


<asp:TextBox ID="siHeaderText" runat="server" Visible="false"></asp:TextBox>
<asp:TextBox ID="siFooterHeaderText" runat="server" Visible="false"></asp:TextBox>
<asp:TextBox ID="siFooterText" runat="server" Visible="false"></asp:TextBox>
</asp:Panel>


The GrayBoxControl.ascx.cs file:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Xml.Linq;
using Telerik.Web.UI;
using Telerik.Sitefinity.Web.UI;
using Telerik.Sitefinity.Modules.GenericContent;
using Telerik.Sitefinity.Model;

namespace SitefinityWebApp.Controls

    public partial class GrayBoxControl : System.Web.UI.UserControl
   
        protected void Page_Load(object sender, EventArgs e)
       
            bool hasInfo = false;

            if (!LinkUrl.IsNullOrEmpty())
           
                siHyperLink.NavigateUrl = LinkUrl;
                hasInfo = true;
           
            if (!LinkText.IsNullOrEmpty())
           
                siHyperLink.Text = LinkText;
                hasInfo = true;
           
            if (!ImageText.IsNullOrEmpty())
           
                siImage.ImageUrl = ImageText;
                hasInfo = true;
           
            if (!HeaderText.IsNullOrEmpty())
           
                siHeaderText.Text = HeaderText;
                siHeaderTextLabel.Text = siHeaderText.Text;
                hasInfo = true;
           
            if (!FooterHeaderText.IsNullOrEmpty())
           
                siFooterHeaderText.Text = FooterHeaderText;
                siFooterHeaderLabel.Text = siFooterHeaderText.Text;
                hasInfo = true;
           
            if (!FooterText.IsNullOrEmpty())
           
                siFooterText.Text = FooterText;
                siFooterTextLabel.Text = siFooterText.Text;
                hasInfo = true;
           

            if (string.IsNullOrEmpty(siHyperLink.NavigateUrl))
           
                phLink.Visible = false;
           
            else
           
                phLink.Visible = true;
                hasInfo = true;
           

            if (!hasInfo)
           
                this.phContent.Visible = false;
           
       

        private string _imageText = "";
        private string _linkText = "";
        private string _linkUrl = "";


        [Browsable(false)]
        private string _headerText = "";
        public string HeaderText
       
            get return _headerText;
            set _headerText = value;
       

        public string ImageText
       
            get return _imageText;
            set _imageText = value;
       

        [Browsable(false)]
        private string _footerHeaderText = "";
        public string FooterHeaderText
       
            get return _footerHeaderText;
            set _footerHeaderText = value;
       


        [Browsable(false)]
        private string _footerText = "";
        public string FooterText
       
            get return _footerText;
            set _footerText = value;
       


        public string LinkText
       
            get return _linkText;
            set _linkText = value;
       


        public string LinkUrl
       
            get return _linkUrl;
            set _linkUrl = value;
       

        private string value = string.Empty;
        [WebEditor("Telerik.Libraries.WebControls.ImageSelector, Telerik.Libraries")]
        public string Value
       
            get
           
                return this.value;
           
            set
           
                this.value = value;
           
       
   



I would like Value to be an image selector. How can I do this? Please let me know. Thanks!

Hello Huda,

You can use MediaContentSelectorView. It is not possible to use WebEditor attribute on a property a open a new widow from it. Everything should be added into the control designer. Please take a look at this post.

All the best,
Ivan Dimitrov
the Telerik team

Hey Ivan, 

I have added a support ticket so I could upload the source code to you guys as I am close, but seem to be running into an issue once the actual selection and/or upload of the image occurs.   Ticket number is 440637.  Thanks for all your help so far. 

Marc 

Hello Marc,

Ok , we will get back to your support request.

Best wishes,
Ivan Dimitrov
the Telerik team

Can you set AllowExtensions with MediaContentUploaderView like you can in the RadAsyncUpload control?