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:
[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 codeprotected 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:
Source code can be downloaded from here: source code
March 16, 2009 at 4:40 PM