The property enhances Url property by adding improved edit mode experience and server side scaling of images in view mode.

Getting started

To use the property add the following UIHint to any Url property.

using OpenWaves.EPiServer.ImageProperty;

...

[UIHint(ImageProperty.UIHint)]
public virtual Url Image1 { get; set; }

Form editing mode

Clicking on the property opens a file browser.

formediting-empty.png

Images can also be drag-dropped from the file manager.

formediting-dd.png

After a picture is selected, the property shows a server-side scalled thumbnail.

formediting-thumbnail.png

!!On-page editing mode

onpageediting.png

In this mode the property is rendered as server-side transformed image and supports drag and drop of images from the file manager.

To enable enhanced on-page editing support, use <ow:ImageProperty> control in the page template. ImagePeoprty control is a wrapper around <EPiServer:Property> control that uses <ow:Image> property internally to enable server-side image transformations.

<ow:ImageProperty PropertyName="Image1" runat="server" Transformation="ScaleDownToFill" ImageWidth="200" ImageHeight="200" />

Transformation attribute can be any of the transofmrations suppoted by <ow:Image> property. See: Image for more details.

Edit mode settings

You can change settings of ImageProperty by using custom attributes:
  • image size can be changed by using ImageSettingsAttribute
...
        [UIHint(ImageProperty.UIHint)]
        [ImageSettingsAttribute(400, 300)]
        public virtual Url MyImage1{ get; set; }
...
resized.png
  • default image dialog selector can replaced by using attribute that ihnerits from ImageDialogAttribute
OpenWaves library provides custom image browser dialog in OpenWaves.EPiServer.ImageBrowser nuget package.

Installation

  1. Install OpenWaves.EPiServer.ImageProperty nugget package from MakingWaves nugget repository.
  2. Add an initialization module that registers WebImageTransformations module used to perform server-side image transformations.

using System.Web.Hosting;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using OpenWaves;
using OpenWaves.ImageTransformations.EPiServer;

[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class Bootstrapper : IInitializableModule
{
    public void Initialize(InitializationEngine context)
    {
        ServiceLocator.SetResolver(new BasicResolver()
            .RegisterWebImageTransformationModule(
                  HostingEnvironment.VirtualPathProvider,
                  "~/Content/Images/Transformed"));
    }

    public void Uninitialize(InitializationEngine context)
    {
    }

    public void Preload(string[] parameters)
    {
    }
}

Last edited Apr 12, 2013 at 10:01 AM by grzwie, version 9

Comments

grzwie Apr 12, 2013 at 9:43 AM 
This is an extension method defined in OpenWaves.ImageTransformations.EPiServer. Just add appropriate using directive. I am updating the example above.

mnystrom Mar 20, 2013 at 5:48 PM 
Hi! I'm excited about trying out the Image Property. I have a problem though... When using the code above I get the following error:
'OpenWaves.BasicResolver' does not contain a definition for 'RegisterWebImageTransformationModule' and no extension method 'RegisterWebImageTransformationModule' accepting a first argument of type 'OpenWaves.BasicResolver' could be found (are you missing a using directive or an assembly reference?) '

If I change 'RegisterWebImageTransformationModule' to 'Register<WebImageTransformationModule>' then I get 'The type or namespace name WebImageTransformationModule could no be found'.

Any help would be greatly appreciated. Thanks!