&quot;Fix&quot; on-page-edit of images

"Fix" on-page-edit of images

Johan Petersson

Vote:

Hi,

All properties are wrapped with an element in edit mode so on-page-edit will work. However this sometimes messes up the layout of images. So I thought maybe I could fix this by adding all neccessary editing attributes to the img element instead by replacing the standard property renderer. But I ran into some problems, of course.

It seems like a wrapping element is always needed since this is what's returned by the property renderer endpoint:

{"doReload":false,"innerHtml":""}

I.e. it sets the innerHtml. But there is no innerHtml on an img element. Can we somehow tell the CMS to replace the whole element and not just set the inner HTML, maybe by an editor setting attribute?

Thanks.

#154977

Edited, Sep 06, 2016 11:19

Mattias Olsson

Vote:

Not the answer you're looking for but I'm not aware of any good solution for this problem. I would probably just tell the frontend team to wrap images, or add a CSS-file in edit mode only, that works around the layout problem :). In my opinion, it's not worth the time and money to try to "hack" the CMS in cases like these. I usually just add an edit mode only CSS if I don't have control over the frontend code myself.

#154978

Sep 06, 2016 13:08

Johan Petersson

Vote:

In my opinion we should have total control over the output :) That's why we in the first place are replacing the default property renderer so it behaves more like the webcontrol in WebForms, i.e. always wraps the property, even in view mode (if we specify CustomTag [sic]). So just adding an edge case for images is not a big effort... if we get it to work of course.

We're not just doing this to get a nice output... we're mostly doing this to make the editing experience awesome for our editors.

#154980

Edited, Sep 06, 2016 13:29

Johan Petersson

Vote:

I'm soooo looking forward to .NET Core where we have tag helpers and hopfully more control over this. But still, images will probably be an issue since the value of an image is not the inner HTML.

#154982

Sep 06, 2016 13:36

Mattias Olsson

Vote:

I agree, of course, that total control over the output is the ideal thing. And it's really strange that we don't, out of the box, have the possibility to always wrap the property the same way in both edit, preview and view mode.

I was only hinting that it will probably (not definitely) be a bigger effort than you can imagine. :) If you find a nice solution, I would be very interested in it.

#154989

Sep 06, 2016 14:23

Johan Petersson

Vote:

I have a blog post about wrapping elements in view mode http://dodavinkeln.se/post/propertyfor()-revisited

#154990

Sep 06, 2016 14:28