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

Forums / General Discussions / Can I attached the Image control designer

Can I attached the Image control designer

4 posts, 0 answered
  1. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    14 Jan 2011
    Link to this post
    Hi,

    I have a user control which literally has an image on - its so specific because for this client I need to ensure when they insert an image in a particular place it has a CSS class associated with it. Therefore I was hoping it would be possible from my user control to simply attach the Sitefinity Image Control Designer?

    Like so:
    [Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(ImageDesigner))]

    I know im probably asking far too much, but if u dont ask you dont know!

    Thanks
    Al
  2. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    15 Jan 2011
    Link to this post
    Hi all,

    Incase anyone should be interested, the easiest way of attaching the image control designer was like so (the code was copied from the decompiled version):

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.Modules;
    using Telerik.Sitefinity.Modules.Libraries;
    using Telerik.Sitefinity.Modules.Libraries.Images;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit;
     
    namespace ioscms.AppCode.Controls {
     
        [PropertyEditorTitle(typeof(Telerik.Sitefinity.Modules.Libraries.LibrariesResources), "ImageControlPropertyEditorTitle"), ControlDesigner(typeof(Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.ImageSettingsDesigner))]
        public class HeaderImage : SimpleView, ICustomWidgetVisualization, IBrowseAndEditable {
     
            // Fields
            private BrowseAndEditToolbar browseAndEditToolbar;
            private List<BrowseAndEditCommand> commands = new List<BrowseAndEditCommand>();
            internal const string layoutTemplateName = "ioscms.AppCode.Resources.HeaderImage.ascx";
            internal const string imageCssClass = "leading-image";
     
            // Methods
            public void AddCommands(IList<BrowseAndEditCommand> commands) {
                this.commands.AddRange(commands);
            }
     
            public HeaderImage() {
     
                this.commands = new List<BrowseAndEditCommand>();
     
            }
     
     
            protected override void InitializeControls(GenericContainer container) {
                bool flag = false;
                if (this.ImageId != Guid.Empty) {
                    LibrariesManager manager = LibrariesManager.GetManager();
                    Guid imageId = this.ImageId;
                    Telerik.Sitefinity.Libraries.Model.Image item = Queryable.Where<Telerik.Sitefinity.Libraries.Model.Image>(from i in manager.GetImages()
                                                        where i.Id == imageId
                                                                                                                              select i, PredefinedFilters.PublishedItemsFilter<Telerik.Sitefinity.Libraries.Model.Image>()).FirstOrDefault<Telerik.Sitefinity.Libraries.Model.Image>();
     
                     
                    if (item != null) {
                        string str = "~" + manager.Provider.GetItemUrl(item) + item.Extension;
                        if (this.Width > 0) {
                            this.ImageItem.Width = Unit.Pixel(this.Width);
                            double num = ((double)item.Width) / ((double)item.Height);
                            this.ImageItem.Height = Unit.Pixel((int)Math.Round((double)(((double)this.Width) / num), 0));
                        }
                        this.ImageItem.ImageUrl = str;
                        this.ImageItem.AlternateText = (string)item.AlternativeText;
                        this.ImageItem.CssClass = HeaderImage.imageCssClass;
                        this.ImageItem.GenerateEmptyAlternateText = true;
                        if (this.OpenOriginalImageOnClick) {
                            this.OriginalImageLink.Controls.Add(this.ImageItem);
                            this.OriginalImageLink.HRef = str;
                            this.OriginalImageLink.Title = (string)item.AlternativeText;
                        }
                        else {
                            this.OriginalImageLink.Visible = false;
                        }
                    }
                    else if (this.IsDesignMode()) {
                        this.Controls.Clear();
                        this.Controls.Add(new LiteralControl(Res.Get<ImagesResources>().ImageWasNotSelectedOrHasBeenDeleted));
                    }
                    else {
                        flag = true;
                    }
                }
                else {
                    flag = true;
                }
                this.IsEmpty = this.ImageId == Guid.Empty;
                if (flag) {
                    this.ImageItem.Visible = false;
                    this.OriginalImageLink.Visible = false;
                }
                this.BrowseAndEditToolbar.Commands.AddRange(this.commands);
                BrowseAndEditManager current = BrowseAndEditManager.GetCurrent(this.Page);
                if (current != null) {
                    current.Add(this.BrowseAndEditToolbar);
                }
            }
     
            protected override void Render(HtmlTextWriter writer) {
                if (this.GetIndexRenderMode() == IndexRenderModes.Normal) {
                    base.RenderContents(writer);
                }
            }
     
            public override void RenderBeginTag(HtmlTextWriter writer) {
                if (!string.IsNullOrEmpty(this.CssClass)) {
                    writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass);
                    writer.RenderBeginTag(this.TagKey);
                }
            }
     
            public override void RenderEndTag(HtmlTextWriter writer) {
                if (!string.IsNullOrEmpty(this.CssClass)) {
                    base.RenderEndTag(writer);
                }
            }
     
            // Properties
            protected virtual BrowseAndEditToolbar BrowseAndEditToolbar {
                get {
                    if (this.browseAndEditToolbar == null) {
                        this.browseAndEditToolbar = this.Container.GetControl<BrowseAndEditToolbar>("browseAndEditToolbar", true);
                    }
                    return this.browseAndEditToolbar;
                }
            }
     
            public override string CssClass {
                get {
                    if (string.IsNullOrEmpty(base.CssClass)) {
                        return "sfimageWrp";
                    }
                    return base.CssClass;
                }
                set {
                    base.CssClass = value;
                }
            }
     
            public string EmptyLinkText {
                get {
                    return Res.Get<ImagesResources>().SelectAnImage;
                }
            }
     
            public int Height { get; set; }
     
            public Guid ImageId { get; set; }
     
            protected internal virtual System.Web.UI.WebControls.Image ImageItem {
                get {
                    return this.Container.GetControl<System.Web.UI.WebControls.Image>("imageItem", true);
                }
            }
     
            public bool IsEmpty { get; protected set; }
     
            protected override string LayoutTemplateName {
                get {
                    return layoutTemplateName;
                }
            }
     
            public bool OpenOriginalImageOnClick { get; set; }
     
            protected internal virtual HtmlAnchor OriginalImageLink {
                get {
                    return this.Container.GetControl<HtmlAnchor>("originalImageLink", true);
                }
            }
     
            protected override HtmlTextWriterTag TagKey {
                get {
                    return HtmlTextWriterTag.Div;
                }
            }
     
            BrowseAndEditToolbar IBrowseAndEditable.BrowseAndEditToolbar {
                get {
                    return this.BrowseAndEditToolbar;
                }
            }
     
            public int Width { get; set; }
     
     
     
     
        }
    }

    And the template:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
     
    <sf:SfImage id="imageItem" runat="server" />
    <a href="javascript:void(0)" runat="server" id="originalImageLink"></a>
    <sf:BrowseAndEditToolbar ID="browseAndEditToolbar" runat="server" Mode="Edit"></sf:BrowseAndEditToolbar>

    One point I would like to ask Telerik though, where is the Alternative text input? I realise the alt tag is picked up from the alt tag stored against the image in the library, but what happens if the user wants to change it on a specific page?

    Thanks
    higgsy
  3. Lurch
    Lurch avatar
    64 posts
    Registered:
    18 Jan 2011
    08 Jul 2013 in reply to higgsy
    Link to this post
    Thanks for that code, really pulling my hair out, about how to set up a "Select an Image" link that works like the standard Sitefinity image widget.

    One question though. The C# code, does that sit in the code behind of the page hosting the template code? Or is it in a C# library file somewhere?
  4. Lurch
    Lurch avatar
    64 posts
    Registered:
    18 Jan 2011
    08 Jul 2013
    Link to this post
    Well I put your template into a web control .ascx file, with your first code block in the backend .cs file, and I got this error on compile:

    Error   1   'ioscms.AppCode.Controls.HeaderImage' does not implement interface member 'Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit.IBrowseAndEditable.BrowseAndEditableInfo' C:\inetpub\wwwroot\pec_sitefinity_web\ImgDev\ImgDesigner.ascx.cs    19  18  SitefinityWebApp

    I did a simple cut and paste of your code, so I know there are no typo's.

    What did I do wrong? Was your first code block just for review, with only the second template code required?

    How did you implement your image selector control, please?
4 posts, 0 answered