V8.2 - RTE Inside Grid, does not render image URL

[AndersBrohus-MySupport]

I have an project which i upgraded from Umbraco 8.1.3 to 8.2 :)

In that project i have an Grid setup with some RTE's but when i use the "Insert Image" inside the RTE i do not get the URL out on the website only the ImageProcessor parameters, but inside the RTE's "View Source Code" i can see it :)

Steps to reproduce

Use the RTE inside an grid and insert an image and try to render it on the frontend.

Expected result

An img tag which has a source with an complete url

Actual result

An img tag which only has the imageprocessor parameters :)

---

This item has been added to our backlog AB#3256

[rasmusjp]

I think the problem here is because that Views/Partials/Grid/Editors/Rte.cshtml is only calling TemplateUtilities.ParseInternalLinks

Umbraco-CMS/src/Umbraco.Web.UI/Views/Partials/Grid/Editors/Rte.cshtml

Line 5 in 1d39a25

@Html.Raw(TemplateUtilities.ParseInternalLinks(Model.value.ToString(), Current.UmbracoContext.UrlProvider))

this function does not replace the media url's.

The RTE value converter also calls 2 additional methods TemplateUtilities.ResolveUrlsFromTextString and TemplateUtilities.ResolveMediaFromTextString

Umbraco-CMS/src/Umbraco.Web/PropertyEditors/ValueConverters/RteMacroRenderingValueConverter.cs

Lines 84 to 86 in 1d39a25

	sourceString = TemplateUtilities.ParseInternalLinks(sourceString, preview, Current.UmbracoContext);
	sourceString = TemplateUtilities.ResolveUrlsFromTextString(sourceString);
	sourceString = TemplateUtilities.ResolveMediaFromTextString(sourceString);

A possible workarround migth be to update Views/Partials/Grid/Editors/Rte.cshtml to something like this

@model dynamic
@using Umbraco.Web.Composing
@using Umbraco.Web.Templates

@{
    var sourceString = Model.value.ToString();
    sourceString = TemplateUtilities.ParseInternalLinks(sourceString, preview, Current.UmbracoContext.UrlProvider);
    sourceString = TemplateUtilities.ResolveUrlsFromTextString(sourceString);
    sourceString = TemplateUtilities.ResolveMediaFromTextString(sourceString);
}

@Html.Raw(sourceString)

Please note that I've not tested the code so it might not work without some modifications

[Ambertvu]

@rasmusjp
With a small adjustment, your code works (for people in dire need, like me ;-))

@model dynamic
@using Umbraco.Web.Composing
@using Umbraco.Web.Templates

@{
    var sourceString = Model.value.ToString();
    sourceString = TemplateUtilities.ParseInternalLinks(sourceString, Current.UmbracoContext.UrlProvider);
    sourceString = TemplateUtilities.ResolveUrlsFromTextString(sourceString);
    sourceString = TemplateUtilities.ResolveMediaFromTextString(sourceString);
}

@Html.Raw(sourceString)

[clausjensen]

@AndersBrohus-MySupport I've looked into the options here to see how we could solve the issue. As mentioned in the other issue the actual URL of the image file is (intentionally) removed from the src property as a part of introducing media URL providers. We do not want to store a static URL to an image in the src attribute as this could potentially need to be changed.

This however brings up the issue you see where you simply do not get the result you'd expect (and a result that actually doesn't work out of the box for rendering in frontend). I've looked into trying to resolve and recreate the src attribute in the value converter, but due to this being a giant json object, there's really not a pretty way to do this at property value converter level.

What @rasmusjp suggests above is the best solution we can provide for now. TemplateUtilities has methods for rendering RTE content and output it in the format (with transformed data) needed to actually render elements stored in RTE text values.

By default when rendering a grid, it parses internal links and outputs them as real links instead of the syntax Umbraco uses internally. The same thing needs to happen with images in order to recreate the src tags. You can achieve this by updating the Rte.cshtml partial to ensure it handles both urls and media. This will affect rendering of grid values when rendered through the GetGridHtml() method.

If you are using this value in some other way, expecting to see the actual file path in the src attribute, you would need to pass the value through the methods in TemplateUtilities (see above). This will ensure that your media URLs and links will be updated in the value you are fetching and then you can use this value wherever you need to.

[clausjensen]

fixed here: #6810