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

Forums / Developing with Sitefinity / Manipulating the Image Selector dialog globally

Manipulating the Image Selector dialog globally

6 posts, 0 answered
  1. Travis
    Travis avatar
    86 posts
    Registered:
    15 Oct 2008
    08 May 2012
    Link to this post
    Hello,
    We are looking to control access to libraries throughout sitefinity. We will have many users accessing the back-end of our site, and they will have varying permissions. We would like to modify the display of libraries for them, so that any library they cannot access will not show up. In particular, I'm thinking of the image specification dialogue, which you can view by editing a Sitefinity Image control on a page. This is also the selector used in the Image field. In my mind, this could be accomplished by overriding whatever control it is that I need to in Settings > Advanced > Controls, as I had done previously with an HTMLfield. 

    My questions are:

    1. Will this approach work? Will we be able to modify the list of libraries by overriding a template of the dialogue? If not, what course of action should we take?
    2. What is the type of the image selector dialogue for us to overwrite?
    3. What is the content of the template that we can use so we don't lose the base-level functionality? Previously when overriding the HTMLField, I had received the template from Telerik.

    Thanks in advance

    edit I should mention that we would like to do this for documents as well, and any other controls where the user gets presented with a list of libraries that they do not have access to. Do the various library item selectors all use the same template or are they different per type (Document/Video/Custom/Image)? If they are different, what are they types for each of them and where might I find a template for them?
  2. Compton
    Compton avatar
    18 posts
    Registered:
    02 Feb 2012
    12 Nov 2012 in reply to Travis
    Link to this post
    Hi Travis,

    Did you every have any success with customizing the image selector? 

    Thanks,
     Compton
  3. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    06 Dec 2016
    16 Nov 2012
    Link to this post
    Hi Travis and Compton,

    For selecting media content in Sitefinity we use either the MediaContentSelectorView or EditorContentManagerDialog (the latter incorporates MediaContentSelectorView and MediaContentUploaderView)

    In the code behind of the mapped template for MediaContentUploaderView you can set the FilterExpression of the ClientBinder populating the Libraries dropdown, for example:

    Copy Code
    this.librariesBinder.FilterExpression = "Title.Contains(\"MyLibrary\")";
    this would ensure that only one library will be shown.

    When used as controls on EditorContentManagerDialog (e.g. in ContentBlock widget selectors for Images, Videos and Documents) the EditorContentManagerDialog will set the "mode" querystring in the Request to "Image", "Video", or "Document" accordingly, so you can check for it like this:
    Copy Code
    var mode = HttpContext.Current.Request.QueryString["mode"];
    in the code-behind of the mapped template.

    Also, for the MediaContentSelectorrView you can limit the displayed images and libraries by modifying the filter expressions on the service and itemsList control, like this:
    Copy Code
    protected void Page_Load(object sender, EventArgs e)
    {
    string libraryTitle = "\"l1\"";
    this.libraryBinder.FilterExpression = "Title.Contains(" + libraryTitle + ")";
    this.mediaContentItemsList.ConstantFilter += " AND Parent.Title.Contains(" + libraryTitle + ")";
    }

    Please note that when used as separate Views in a control designer (e.g. single image widget, single document widget etc.) these views have different templates (as they should accommodate only single item selection/upload). For example for image it is UploadImageDesignerView.ascx:
    Copy Code
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Web.UI.Fields" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend.Detail"
        TagPrefix="sfDetail" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfLibraries" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfDesigners" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" %>
         
     
    <h2><asp:Label ID="lblWhichImage" AssociatedControlID="fileNameTextBox" runat="server" Text="<%$Resources:Labels, WhichImageToUpload %>" /></h2>
    <div class="sfTxtUrlSeletor">
        <asp:TextBox ID="fileNameTextBox" runat="server" CssClass="sfTxt" />
        <asp:LinkButton runat="server" id="selectFileButton" OnClientClick="return false" CssClass="sfLinkBtn sfChange">
            <strong class="sfLinkBtnIn"><asp:Literal ID="Literal1" runat="server" Text="<%$Resources:Labels, SelectDotDotDot %>" /></strong>
        </asp:LinkButton>
    </div>
    <%--<telerik:RadAsyncUpload ID="RadAsyncUpload" runat="server" MaxFileInputsCount="1" Width="320"
        AutoAddFileInputs="False" ControlObjectsVisibility="None">
    </telerik:RadAsyncUpload>--%>
     
    <asp:Panel ID="imageSettingsPanel" runat="server">
        <div id="librarySelector" runat="server">
            <h2><asp:Label ID="librarySelectorTitle" AssociatedControlID="librariesDropDown" runat="server" Text="<%$Resources:Labels, WhereToStoreTheUploadedImage %>" /></h2>
            <asp:DropDownList ID="librariesDropDown" runat="server">
            </asp:DropDownList>
            <sitefinity:GenericCollectionBinder ID="librariesBinder" runat="server" TargetId="librariesDropDown"
                ServiceUrl="~/Sitefinity/Services/Content/ContentService.svc/" BindOnLoad="false"
                DataKeyNames="Id"
                DataMembers="Id, Title">
                <Containers>
                    <sitefinity:BinderContainer ID="BinderContainer1" runat="server" RenderContainer="false"
                        ContainerTag="OPTION" TemplateHolderTag="SELECT">
                            <option sys:value="{{Id}}">{{Title}}</option>
                    </sitefinity:BinderContainer>
                </Containers>
            </sitefinity:GenericCollectionBinder>
            <asp:Literal ID="orLiteral1" runat="server" Text="<%$Resources:Labels, or %>"></asp:Literal>
            <asp:LinkButton ID="createNewLibraryButton" runat="server" OnClientClick="return false;" Text="<%$Resources:LibrariesResources, CreateANewLibrary %>"></asp:LinkButton>
        </div>
    </asp:Panel>
    <div id="createLibraryContainer" class="sfDesignerSelector" style="min-height: 150px;display: none;">
        <sfDesigners:CreateLibraryControl ID="theCreateLibraryControl" runat="server" LibraryTypeName="Telerik.Sitefinity.Libraries.Model.Album" CreateLibraryServicePath="~/Sitefinity/Services/Content/AlbumService.svc/" />
    </div>
    and ImageSelectorDesignerView.ascx
    Copy Code
    <%@ Control Language="C#"%>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sfViews" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfDesigners" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
         
    <sitefinity:ResourceLinks ID="resourcesLinks" runat="server">
        <sitefinity:ResourceFile JavaScriptLibrary="JQuery">
        </sitefinity:ResourceFile>
    </sitefinity:ResourceLinks>
    <sf:MediaContentSelectorView id="selectorView" runat="server"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="true">
    </sf:MediaContentSelectorView>

    Kind regards,
    Boyan Barnev
    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
  4. Travis
    Travis avatar
    86 posts
    Registered:
    15 Oct 2008
    22 Feb 2013 in reply to Boyan Barnev
    Link to this post

    Hi Boyan,

     I realize that it has been some time since we first started with this post, however, we are now in need of similar functionality, and the explanation above, while helpful, does not fill me with the confidence that we're going to be able to implement this change. I really don't understand how we would, for example, edit a line in the code behind of EditorContentManagerDialog. I could see creating an entirely new class, inheriting from EditorContentManagerDialog, then overwriting methods there, but, I feel like it's incredibly easy to get lost with this approach, and when there is invariably a problem, we're just stuck spinning our wheels where we were in the first place.

    So, how would you suggest we modify a line, to check the querystring in the code-behind of a mapped template (var mode = HttpContext.Current.Request.QueryString["mode"];)? What steps do we need to take to access the code behind?

     

    Thanks

  5. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    06 Dec 2016
    27 Feb 2013
    Link to this post
    Hello,

    I am afraid you need to create a template and register it. In order to map the template you need to go to Administration->Settings->Advanced->Controls->ViewMap
    (change the type here)
    Host Type: Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentSelectorView
    LayoutTemplate: path to the .ascx file created
    Save changes and restart the application for the template to be in use.

    To edit the line:
    var mode = HttpContext.Current.Request.QueryString["mode"];

    you need to create a class that inherits from EditorContentManagerDialog and place the new line in an appropriate method.

    Kind regards,
    Stefani Tacheva
    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
  6. Lurch
    Lurch avatar
    64 posts
    Registered:
    18 Jan 2011
    09 Jul 2013
    Link to this post
    Any way you can put a control on the front end, runtime part of the widget?

    See my post for further details on what I want to do;

    developing-with-sitefinity-/how-to-put-select-an-image-link-used-in-the-sitefinity-image-widget-in-your-own-custom-widget-
6 posts, 0 answered