Modify XHtmlString img content

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
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
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
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
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
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
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
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.