Musielak Marek

Posted on Friday, February 06, 2009 by Marek Musielak

Extended Image Url Property

Some time ago I got a request from our customer saying "We have so many images in EPiServer that we frequently choose wrong one. Could you provide a functionality so images are displayed in edit mode?".

Sure we can. It's really easy to create own custom propery or extend existing one in EPiServer 5. Some basics about it can be found here on world.episerver.com. In this case I extended PropertyImageUrl property.

First thing that I did was overriding CreatePropertyControl method in my class:

< Hide code

[PageDefinitionTypePlugIn(DisplayName = "URL to Image (Extended)")]
public class PropertyImageUrlExtended : PropertyImageUrl
{
public override IPropertyControl CreatePropertyControl()
{
return new PropertyImageUrlExtendedControl();
}
}

Then I created PropertyImageUrlExtendedControl (overriding PropertyUrlControl class of course). The only thing that has to be done here is custom implementation of SetupEditControls method:

< Hide code

protected override void SetupEditControls()
{
base.SetupEditControls();

Image image = new Image ();
image.Style.Add("clear", "both");
image.Style.Add("float", "left");
image.ImageUrl = PropertyUrl.Value as string;

if (String.IsNullOrEmpty(image.ImageUrl))
{
image.Style.Add("display", "none");
}

Controls.Add(image);

foreach (Control control in Controls)
{
if (control is TextBox)
{
TextBox tb = (TextBox) control;
tb.Attributes.Add(
// clean source or set the new value; hide or display image
"OnChange",
@"this.parentNode.getElementsByTagName('IMG')[0].src = this.value;
if (this.value != null) this.parentNode.getElementsByTagName('IMG')[0].style.display = 'block';
else this.parentNode.getElementsByTagName('IMG')[0].style.display = 'none';");
break;
}
}
}

First I execute base.SetupEditControls() in order to create label, textbox and file picker. Then I add image, set its source and hide it if the source is empty. The second part of this method allows to update source of the image every time the content of the textbox holding chosen image is changed. It's a short javascript updating the source of the image and hiding or showing the image if the source is empty or not respectively. Result looks like this:Extended Image Url Property

Source code can be downloaded from here: source code

Read More »

Related Posts:


One response to Extended Image Url Property

  1. stu dean
    March 16, 2009 at 4:40 PM
    Nice, I know ImageVault has this functionality built in, makes you wonder why EPiServer didn't provide it in the out of the box ImageProperty..

Post a Comment