Webforms Property collapsed in OnPageEdit



Having an article page (webforms) that editors can On-Page edit; but when a property (used form Images) is empty the element in the template collapses (perhaps since img is an inline element?) in dojo making it 0px in with height thus making it impossible for editors to change this property unless switch to All-Properties view.

I've tried applying CssClass with display block and min-height, but no luck.  I know how to fix this in MVC but not in WebForms.

Any advice?

Feb 06, 2017 18:28

The property control should render a div for you in edit mode. This div should have a class which should get some min height and width by CSS.  Have you overridden anything in the rendering of properties, e.g. the ContentRenderer or any of the property type controls?  

Feb 06, 2017 20:31

Btw, I guess Image is a content reference? In that case the property control will render a span and just the name or ID of the content. For page references an anchor will be rendered.

Have a look in the Alloy templates how images are rendered in WebForms. Basically you need to render a partial control. Don't remember now, but maybe this is done automatically if you decorate the Image property in your content model with UI hint "image":

[UIHint("image")] // There is a constant for this as well, UIHints.Image.
public virtual ContentReference Image { get; set; }
Feb 06, 2017 20:38

Correct. It is a ContentReference with attribute UIHint(UIHint.Image)

        [Display(Name = "Image", Order = 90)]
        public virtual ContentReference Image { get; set; }

To my knowledge, rendering is not being overridden.

Element in editMode

I've tried with CssClass setting the img element to display block but no change.

Feb 07, 2017 9:18

You can see the actual ouput if you inspect the page (in the iframe) and not the overlay which you've attached above. Maybe that will give you some clues.

Feb 07, 2017 9:22

Yes, the element is there. I've enclosed the property woth div with a minimum height of 50px.

Is there something equivalent in Webforms to:

<div @Html.EditAttributes(x => x.CurrentPage.Image)>
<img src="@Model.CurrentPage.Image.FriendlyUrl()"/>
Edited, Feb 07, 2017 9:29
<EPiServer:Property PropertyName="Image" CustomTagName="div" runat="server" />

Is the equivalent.

Your MVC code might "fail" in on-page-editing, e.g. if you add a CSS class to the image in your code above, it will get lost when an editor changes the image. Why? Becuase when the image is rendered asynchronously the default display template for the UI hint "image" will be used, your code above will not be used. Just a tip :) Instead do this:

@Html.PropertyFor(x => x.CurrentPage.Image, new { CssClass = "yadayada" });

And then have a display template for "image" or ContentReference.

Edited, Feb 07, 2017 9:36

Instead of adding styling to a wrapping div, why are you not styling the image? Since it's image placement and size that will determine the editable area in the overlay.

Feb 07, 2017 9:49

I am styling the image. The css class image-block does just that. See image above. I added min-height to the wrapping div just to see if container lies there.

Feb 07, 2017 10:10

Ok, maybe this is browser-specific then. In Edge I get an broken image icon, which will take up some space. I guess Chrome will hide it completely. Then I would recommend creating a custom renderer for images, which will output a placeholder image when the property is null. You don't need to return an image URL, just a base64 encoded svg or small png. You should also set width and height attributes on the img element.

Feb 07, 2017 10:16

Ah, Chrome. I can see it now.  Ok, will return a static string if page is in edit mode and ContentReference is Empty.


Feb 07, 2017 10:22

Yes, Episerver should've handled this nicer OOTB :) But I guess most partners already have custom image rendering in place that will handle this case, and output a placeholder image in edit mode.

Feb 07, 2017 10:36
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.