I would like to modify the content of an XHtmlString. More precisly, I would like to modify all the images that are added to an XHtmlString Property.
When I add an image to an XHtmlString it will add following to its content:
<img src="/PageFiles/958/image.jpg" />
But I would like to modify that so it will result in following:
<img src="/PageFiles/958/image.jpg" class="img-responsive" />
Image description text
<em>Photo: Mr. X / Publisher X</em>
So I want to wrap it inside an div, add a class to the img tag and extract the image file information and publish it.
How can I accomplish this?
The may give you the answer you want:
@David: Ted's approach would work for an image property, not for an image inside an xhtmlstring, or am I missing something?
Hi Mari I was thinking it could be possible to use this approach to add a custom rendering for an xhtml property where Robert could find the <img> instances and alter the rendering as specified. I am not totally sure if it would work or not :)
Since the question was regarding how to tweak the rendering for images inside a html property, the answer is a bit trickier. Easy solution, though perhaps not best for the editors, is to define a changed behavior for dropping images inside Tiny MCE. This can be done by defining a UI Descriptor for your image type (or base type) and defining the EditorDropBehavior to creating blocks instead of images (EditorDropBehaviour.CreateContentBlock). You can read more about how this is done here: http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2013/12/Customizing-the-look-and-behavior-in-the-UI-for-your-content-types/
Images will then be treated as a content block inside the editor, the same way as inside a Content Area, and when renderered it will use the same principles as for a Content Area. The caveat with the solution above is that the image will not be shown inside the Tiny MCE editor, instead a place holder will be shown when editing.
The alternative to the solution above is to create a custom renderer for XHtmlStrings. This would then loop through the string fragments that the html property exists of, and add special handling for instances of UrlFragment. This would require quite some more work and be done differently depending if you use MVC or Web Forms for your templates.
Thanks for your answers!
Linus -> We don't use EPiServer 7.5 so I think I have to go for the second option. We use MVC. Do you have any quick examples of how to edit the content?
And how can I configure the TinyMCE Editor so I can have "img-responsive" as a default class for the image added (so I don't have to manually write it every time I add a new image)?
Best way I can come to think of is to create an always enabled Tiny MCE plug-in that ensures that this class is added, either when inserting the content, or when the editor get's the content from the dom. Check out the tinymce.plugins.EPiTrailing plug-in, thats part of the EPiServer UI, that attaches event handlers to handle both cases.