4

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%.

  • At least on an SDL Web 8 system using DXA (the Education environment, specifically), I'm seeing image sizes set as an attribute as in style="width: 100px; height: 100px; rather than a style tag. Aside from the RTF processing, an XSLT filter might strip style attributes even if allowed in advanced image settings. – Alvin Reyes Mar 28 '17 at 20:07
  • Does anyone know if there has been an update on this? Are inline styles now allowed with Tridion DXA? – KristinKniss Feb 22 '18 at 19:49
7

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)

  • Thanks! If I wasn't clear in my question, this reaffirms what my thinking was. Seems like I'll need to customize the GUI to place giant red X's over those fields ;). I'm also a fan of the separation of content and design philosophy. – Loya1ty Jan 12 '16 at 17:05

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.