Can I attached the Image control designer

Posted by Community Admin on 14-Jan-2011 00:00

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

Posted by Community Admin on 15-Jan-2011 00:00

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

Posted by Community Admin on 08-Jul-2013 00:00

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?

Posted by Community Admin on 08-Jul-2013 00:00

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?

This thread is closed

All Replies