Applying advanced styles to embedded RTF Images in DXA

Question

I am currently adding Multimedia Images to the RTF via the insert tool bar. When the GUI pop up appears and I select an image, I am given the choice for Advanced properties. For height and width specifically, the fields are populated with the uploaded images pixels.

My issue is: The image does not adhere to custom height and width values and when the site is loaded the image is loaded via the binary content url with the data-aspect of 1.62. My model has the property type for the field of RichText and the template calls the value with the helper Html.DxaRichText(Model.Field)

My Question is: How does the DXA RichText helper process these style elements? I got as far as the RichTextProcessor as well as some other HTML extension bits but couldn't quite sort it out (as of yet!).

My initial thinking: It seems that DXA was intended to approach images as handling them responsively, leveraging some of the resizing and helpers where elements can be declared as parameters. So either this approach for the Advanced values provided in the GUI were left to be implemented by us or the helpers implemented are stripping this out.

Based on this post: Prevent <style> tags from being removed by RTF fields I am inclined to think the same thing is happening, although I find it odd it's not accepted nowadays seeing as the CMS GUI inputs these values into the RTF.

Side note: When the property is not of RichText type, the image scales to 100%.

Answer 1

When the DXA publishes binaries (either linked from MM link fields, or embedded in RTF) it publishes the original full res image. When the image is rendered by a view, it will be resized according to the particular design requirements of the view - in this way we try to keep a clean separation of content and design.

RTF fields are tricky as when you start to do things like embed images with particular height and width, you are combining content and design. By default the DXA will render all images embedded in the RTF with the default aspect ratio of 1.62 (the Golden ratio), however there is nothing to stop you extending the RTF processing to take the width and height attributes into consideration when rendering.

For DXA.NET checkout the Sdl.Web.Tridion.Mapping.DefaultRichTextProcessor, you can extend/replace and configure your alternative in Unity.config. Probably there is something equivalent in the Java version (not sure which you are using)