Modify XHtmlString img content

Robert Tellvik

Vote:

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:

<div class="thumbnail">
    <img src="/PageFiles/958/image.jpg" class="img-responsive" />
    <div class="caption">
        <p>
            Image description text
        </p>
        <p>
            <em>Photo: Mr. X / Publisher X</em>
        </p>
    </div>
</div>

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?

#81790

Feb 26, 2014 15:02

David Knipe

Vote:

Hi Robert

The may give you the answer you want:

http://tedgustaf.com/blog/2013/2/render-image-properties-in-episerver-7/

David

#81791

Feb 26, 2014 15:11

Vote:

@David: Ted's approach would work for an image property, not for an image inside an xhtmlstring, or am I missing something?

#81795

Feb 26, 2014 15:23

David Knipe

Vote:

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 :)

#81796

Feb 26, 2014 15:27

Linus Ekström

Vote:

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.

#81797

Feb 26, 2014 15:31

Robert Tellvik

Vote:

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?

#81839

Feb 27, 2014 14:38

Robert Tellvik

Vote:

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)?

#81840

Feb 27, 2014 14:51

Linus Ekström

Vote:

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.

#81906

Feb 28, 2014 11:14