Webforms Property collapsed in OnPageEdit

Vote:
 

Hi.

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?

#174838
Feb 06, 2017 18:28
Vote:
 

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?  

#174839
Feb 06, 2017 20:31
Vote:
 

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; }
#174840
Feb 06, 2017 20:38
Vote:
 

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

        [Display(Name = "Image", Order = 90)]
        [UIHint(UIHint.Image)]
        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.

#174864
Feb 07, 2017 9:18
Vote:
 

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.

#174867
Feb 07, 2017 9:22
Vote:
 

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()"/>
</div>
#174870
Edited, Feb 07, 2017 9:29
Vote:
 
<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.

#174872
Edited, Feb 07, 2017 9:36
Vote:
 

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.

#174875
Feb 07, 2017 9:49
Vote:
 

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.

#174877
Feb 07, 2017 10:10
Vote:
 

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.

#174879
Feb 07, 2017 10:16
Vote:
 

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

Thanks.

#174881
Feb 07, 2017 10:22
Vote:
 

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.

#174882
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.