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

Forums / Developing with Sitefinity / Image Editor Dialog

Image Editor Dialog

11 posts, 1 answered
  1. Marc
    Marc avatar
    24 posts
    Registered:
    09 Jun 2011
    23 Jun 2011
    Link to this post
    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
  2. Marc
    Marc avatar
    24 posts
    Registered:
    09 Jun 2011
    23 Jun 2011
    Link to this post
    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".




    However, the ascx I am using for the SimpleImageField.ascx has the required field(s) as you can see below.  Any help?

    <%@ Control Language="C#" AutoEventWireup="true" %>
      
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
    <%@ Register Assembly="Controls" Namespace="Controls.Resources" TagPrefix="custom" %>
      
    <sitefinity:ResourceLinks ID="resourcesLinks" runat="server">
        <sitefinity:ResourceFile JavaScriptLibrary="JQuery">
        </sitefinity:ResourceFile>
    </sitefinity:ResourceLinks>
      
    <sitefinity:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sitefinity:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Read">
                <sitefinity:SitefinityLabel id="titleLabelRead" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl"></sitefinity:SitefinityLabel>
                <sitefinity:SitefinityLabel id="textLabelRead" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtContent"></sitefinity:SitefinityLabel>
                <asp:Image ID="image" runat="server" />
                <sitefinity:SitefinityLabel id="descriptionLabelRead" runat="server" WrapperTagName="p" HideIfNoText="false" CssClass="sfDescription"></sitefinity:SitefinityLabel>
                <sitefinity:SitefinityLabel id="exampleLabelRead" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
            </sitefinity:ConditionalTemplate>
            <sitefinity:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Write">
                <sitefinity:SitefinityLabel ID="titleLabelWrite" runat="server" CssClass="sfTxtLbl" />
                <asp:LinkButton ID="expandButton" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
                <asp:Panel ID="expandableTarget" runat="server" CssClass="sfFieldWrp">
      
                    <telerik:RadWindowManager ID="windowManager" runat="server" Skin="Sitefinity">
                        <Windows>
                            <telerik:RadWindow ID="simpleImageSelector" Width="600" Height="400" NavigateUrl="~/Sitefinity/Dialog/SimpleImageSelectorDialog" runat="server" ReloadOnShow="true"
                             Modal="true" VisibleStatusbar="false" Behaviors="Close" >
                            </telerik:RadWindow>
                        </Windows>
                    </telerik:RadWindowManager>
      
                    <asp:TextBox ID="textBox" runat="server" CssClass="sfTxt" />
                    <asp:HyperLink ID="selectLink" runat="server" NavigateUrl="javascript:void(0);" CssClass="sfLinkBtn sfChange">
                        <strong class="sfLinkBtnIn">Select...</strong>
                    </asp:HyperLink>
                    <sitefinity:SitefinityLabel id="descriptionLabelWrite" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                    <sitefinity:SitefinityLabel id="exampleLabelWrite" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
                      
                </asp:Panel>
            </sitefinity:ConditionalTemplate>
        </Templates>
    </sitefinity:ConditionalTemplateContainer>
  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    24 Jun 2011
    Link to this post
    Hi Marc,

    Please use MediaContentSelecorView. Take a look at this thread

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  4. Marc
    Marc avatar
    24 posts
    Registered:
    09 Jun 2011
    24 Jun 2011
    Link to this post
    Thanks for the reply.  I will dig deeper on that thread and report back. 
  5. Marc
    Marc avatar
    24 posts
    Registered:
    09 Jun 2011
    24 Jun 2011
    Link to this post
    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.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    27 Jun 2011
    Link to this post
    Hello Marc,

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

    sample


    var contentType = typeof(Telerik.Sitefinity.Libraries.Model.Image).FullName;
              var parentType = typeof(Telerik.Sitefinity.Libraries.Model.Album).FullName;
             // var libraryBinderServiceUrl = "~/Sitefinity/Services/Content/AlbumService.svc/";
             //var mediaContentBinderServiceUrl = "~/Sitefinity/Services/Content/ImageService.svc/";
              var itemsName = Res.Get<ImagesResources>().Images;
              var itemName = Res.Get<ImagesResources>().Image;
              var itemNameWithArticle = Res.Get<ImagesResources>().ImageWithArticle;
              var libName = Res.Get<ImagesResources>().Album;
              //var template = "Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm";
              var displayAltTextField = true;
              var displayTitleTextField = true;
              var displayResizingOptionsControl = true;
              var showOpenOriginalSizeCheckBox = true;
     
              this.UploaderView.ContentType = contentType;
              this.UploaderView.ParentType = parentType;
              this.UploaderView.LibraryName = libName;
              this.UploaderView.ItemsName = itemsName;
              this.UploaderView.ItemName = itemName;
              this.UploaderView.ItemNameWithArticle = itemNameWithArticle;
              this.UploaderView.DisplayAltTextField = displayAltTextField;
              this.UploaderView.DisplayTitleTextField = displayTitleTextField;
              this.UploaderView.DisplayResizingOptionsControl = displayResizingOptionsControl;
              this.UploaderView.ShowOpenOriginalSizeCheckBox = showOpenOriginalSizeCheckBox;


    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Huda
    Huda avatar
    8 posts
    Registered:
    30 Jul 2012
    30 Jun 2011
    Link to this post
    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!
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    01 Jul 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Marc
    Marc avatar
    24 posts
    Registered:
    09 Jun 2011
    05 Jul 2011
    Link to this post
    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 
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    06 Jul 2011
    Link to this post
    Hello Marc,

    Ok , we will get back to your support request.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Kristian
    Kristian avatar
    214 posts
    Registered:
    03 Jun 2010
    28 Feb 2012
    Link to this post
    Can you set AllowExtensions with MediaContentUploaderView like you can in the RadAsyncUpload control?
11 posts, 1 answered