"Fix" on-page-edit of images

Member since: 2007
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
  • Member since: 2005

    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
  • Member since: 2007

    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
  • Member since: 2007

    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
  • Member since: 2005

    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
  • Member since: 2007

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

    #154990 Sep 06, 2016 14:28