SaaS CMS has officially launched! Learn more now.

DisplayTemplate Image.cshtml is not getting called for pictures inside TinyMCE (Xhtmlstring)


We are in process of upgrading EPiServer ver.11 to Optimizely ver. 12. 

The issue we are facing right now is that DIsplayTemplate (Image.cshtml) is not getting executed when picture is added in TinyMCE editor.

In EpiServer 11 we had this Image.cshtml html file inside the DisplayTemplates folder ->

@model ContentReference

@if (!ContentReference.IsNullOrEmpty(Model))
    var url = UrlResolver.Current.GetUrl(Model, null, new VirtualPathArguments { ContextMode = ContextMode.Default });
    var viewDataCssClass = ViewData["CssClass"];
    var cssClass = "img-responsive";
    if (viewDataCssClass != null)
        cssClass += " " + viewDataCssClass;

    <img class="@cssClass" src="@url" />

By this way we could add css class to images inside TinyMCE (Xhtml string).

Does anyone know whats the issue in Optimizely ver 12 or is there anyother way to add css classes to pictures/images residing inside TinyMCE ?

May 03, 2023 10:53

You can create a helper method you call whenever the XHtmlString is rendering. Then just loop through the fragments and find the one relevant to images and adjust the markup to add what you need. I've done this for similar things should as resonsive attributes and to add alt text from the core image

May 04, 2023 10:41
* 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.