3

The problem is image is not rendering properly, we could see that it retrieved properly from content service, as i mentioned below. But when it reaches the entity model as RichText field it is changing as <p>Image(alternateText=Checkmark-small-Black-75)&nbsp;Rates are based on year-round coverage</p> and this is how it displays in browser.

Below is what we are adding in the RTF in tridion.

<img src="tcm:826-224817" title="Checkmark-small-Black-75" alt="Checkmark-small-Black-75" style="width: 30px; height: 30px;"/>

It is supposed to resolve something like this <p><img xlink:href="tcm:826-224815" data-schemauri="tcm:826-215972-8" data-multimediafilename="Checkmark-small-Black-75.png" data-multimediafilesize="401" data-multimediamimetype="image/png" title="Checkmark-small-Black-75" alt="Checkmark-small-Black-75" style="width: 30px; height: 30px;" xlink:title="Checkmark-small-Black-75" xmlns:xlink="http://www.w3.org/1999/xlink" src="//xxxxxx.xx.xxxx.net/media/Checkmark-small-Black-75_tcm826-224815.png?r=9">&nbsp; &nbsp;Free access to your personal finance management tool</p>

we have upgraded from dxa 1.5/ Tridion 2013 to dxa 1.8/web 8.5. It used to work fine in old environment, but after the upgrade its not.

From content service we recieve the below ->

"EmbeddedValues": [ { "bodyText": { "Name": "bodyText", "Values": [ &lt;p&gt;&lt;img xlink:href=\"tcm:826-224815\" data-schemaUri=\"tcm:826-215972-8\" data-multimediaFileName=\"Checkmark-small-Black-75.png\" data-multimediaFileSize=\"401\" data-multimediaMimeType=\"image/png\" title=\"Checkmark-small-Black-75\" alt=\"Checkmark-small-Black-75\" style=\"width: 30px; height: 30px;\" xlink:title=\"Checkmark-small-Black-75\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" src=\"//example.com/media/Checkmark-small-Black-75_tcm826-224815.png?r=9\" /&gt; Rates are based on year-round coverage&lt;/p&gt; ]

I have debugged the app, but its something happening inside SemanticMapper in DXA .

All we are doing in the view model is extending the AbstractEnityModel. And when we debug we found that the bodyText field is not getting rendered value. In between we don't have any custom logic. So DXA process the json and in view model we are getting the values.

@SemanticEntity(entityName = "RTCParagraph", vocabulary = SDL_CORE, prefix = "rt") public class RTCParagraph extends AbstractEntityModel { @JsonProperty("bodyText") @SemanticProperty("rt:bodyText") private RichText bodyText;

Below is how it is getting diplayed in view.

<jsp:useBean id="entity" type="com.sdl.modules.nationwide.model.common.RTCParagraph" scope="request" />
...
..
.
<c:if test="${not empty entity.bodyText}">
     ${entity.bodyText}
</c:if>

I think it somthing similar to this post for DXA 2.0 Embedding DXA entities other than images in RTF fields

Can any one help on this please ?

UPDATE 1

After updating the view with dxa:richtext tag, we could see some improvement but the image is not rendering still.<img src="//xxxx.xx.xx.xxx.net/media/Checkmark-small-Black-75_tcm826-224815_w1024_n.png?r=9" alt="Checkmark-small-Black-75" data-aspect="0" width=""> this is because the image is appended with _w1024_n, i am not sure why that is getting appended, if we could avoid that like this (Checkmark-small-Black-75_tcm826-224815.png) it will render properly.

UPDATE 2

We found that the issue is happening within processRichText method, in com.sdl.webapp.tridion.mapping.DefaultRichTextProcessor. We are getting the document value as [#document: null] and resolveRichText return as Image(alternateText=Checkmark-small-Black-75).However if there is any exception while parsing, it goes to catch block and we are getting image rendered properly.

xhtml value :- <img xlink:href="tcm:826-224815" data-schemaUri="tcm:826-215972-8" data-multimediaFileName="Checkmark-small-Black-75.png" data-multimediaFileSize="401" data-multimediaMimeType="image/png" title="Checkmark-small-Black-75" alt="Checkmark-small-Black-75" style="width: 30px; height: 30px;" xlink:title="Checkmark-small-Black-75" xmlns:xlink="http://www.w3.org/1999/xlink" src="//xxxx.xx.xx.xxx.x/media/Checkmark-small-Black-75_tcm826-224815.png?r=9" />

 public RichText processRichText(String xhtml, Localization localization) {
    try {
        // Parse the document as XML
        final Document document = XMLUtils.parse("<xhtml>" + xhtml + "</xhtml>");

        // Resolve links, images and YouTube videos
        return resolveRichText(document, localization);
    } catch (SAXException | IOException | ContentProviderException | SemanticMappingException e) {
        LOG.warn("Exception while parsing or processing XML content", e);
        return new RichText(xhtml);
    }
}

Update 3:

When I debug the RTF “headingText” field. The fragments object shows the proper URL(PFA of the screen shot - http://www.filedropper.com/fragments ) but View is resolving only alternateText. Any thought why ?

  • It is normal that image URLs get such a suffix. This allows server-side responsive image resizing. When a request for such a URL comes in, DXA will Just-In-Time create a resized/cropped rendition based on the base image (without suffix). Since you say it still doesn’t work, the problem might be in this Image URL handling logic; the generated HTML looks fine now. – Rick Pannekoek May 5 at 8:57
  • Hi Rick, we don't have any custom handler for for richtext. We are just rendering whatever the value the private RichText bodyText; has. – user2869 May 7 at 20:14
  • As mentioned, the rendered HTML looks fine. If the image doesn’t render properly, the problem seems to be in the image retrieval process. – Rick Pannekoek May 7 at 20:25
  • Thanks, however the value we are seeing the in the bodyText field is still Image(alternateText=Checkmark-small-Black-75) , the rendered HTML i pasted in the update is retrieved by inspecting the element in the browser. – user2869 May 7 at 20:51
  • @RickPannekoek i have updated the question with more findings, its something happening in XMLUtils.parse("<xhtml>" + xhtml + "</xhtml>");. Can you please let us know your thoughts. – user2869 May 8 at 16:51
1

Note that the img XHTML element is supposed to be converted to an Entity Model (MediaItem-derived) which in turn should get rendered to HTML (using an appropriate View).

From what you are showing, it seems that the MediaItem-derived Entity Model is properly constructed (class Image), but it is not properly rendered as HTML, but instead its toString representation is rendered.

You would have to provide more information about how you’re rendering your View Models.

UPDATE

I think the problem lies in your View: you should use the dxa:richtext tag to render properties of type RichText.

For example, see: https://github.com/sdl/dxa-modules/blob/master/webapp-java/dxa-module-core/src/main/resources/META-INF/resources/WEB-INF/Views/Core/Entity/Article.jsp

  • thanks for the response. i have updated the question with the details. please let me know if you need more details. – user2869 May 1 at 20:29
  • How does the View look which renders the RTCParagraph.bodyText ? In particular: does that use the dxa:richtext tag? – Rick Pannekoek May 2 at 14:24
  • yes, it is using dxa:richtext – user2869 May 2 at 16:50
  • And how is class Image defined? Is it from the Core Module ? If not, does it implement toHtmlElement properly? – Rick Pannekoek May 2 at 17:12
  • Hi Rick, Sorry I misspoke. We're not using dxa:richtext tag. The <img> tag is part of the RTF and RTF is rendered with the out of the box RichText class. View is just retrieving the bodyText field. I have pasted the image source and view code in question. – user2869 May 2 at 20:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.