Try our conversational search powered by Generative AI!

"Fix" on-page-edit of images

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:
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?
Edited, Sep 06, 2016 11:19

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.

Sep 06, 2016 13:08

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.

Edited, Sep 06, 2016 13:29

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.

Sep 06, 2016 13:36

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.

Sep 06, 2016 14:23

I have a blog post about wrapping elements in view mode

Sep 06, 2016 14:28
* 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.