DXA is a reference Tridion implementation that contains tons of pre-configured rules and automated features. These features reduce the time to market for simple Tridion-backed websites.  However, there are a few “features†in DXA which are not defined in the documentation and may not be desirable for all sites. One of these “features†is the fact that DXA will crop any image rendered in an RTF to the Golden Ratio of 1.62.
Some of you might have completed DXA implementations without even realizing that DXA does this, and indeed it took us months before anyone noticed that DXA forces a width/height ratio on images in RTF fields. We recently attempted to render a tall image only to find that most of the image was cropped away. We assumed it was a bug that we had introduced somehow but after some digging we found out that this is the desired default DXA behavior (as explained here by Will Price) https://tridion.stackexchange.com/questions/13643/applying-advanced-styles-to-embedded-rtf-images-in-dxa. All images imbedded into RTF fields are automatically cropped to a ratio of 1.62 (the golden ratio) despite any attributes you give them in the RTF editor. This was undesirable for our implementation so we decided to fix it.
Luckily, the fix is easy. To fix this you will have to locate the BaseMediaHelper class within the DXA framework source code.
After that, you will need to create a new project with a CustomizedBaseMediaHelper class. You can then copy all of the guts for this class from the default DXA one but you will need to make one change: the DefaultMediaAspect variable should be set to 0 instead of 1.62.
Once you compile the new CustomBaseMediaHelper class and place your new DLL in the bin of your DXA webapp, you just have to point the app to it.
To have the app use your new CustomBaseMediaHelper class you will need to update the following in your Unity.config file:
- A reference to your new assembly and namespace needs to be added at the top of the config file.
- The <type> element with the attribute type=â€IMediaHelper†should be changed to point to the name of your new class instead of the old one.
You may need to refresh your application pool to see the change take effect. Once all of that is done, your images will be free to fill any dimensions that they please.
If the only thing you want to do in your CustomMediaHelper is set the DefaultMediaAspect to 0, it would be better to create a subclass of BaseMediaHelper which only needs a one-line constructor.
Alternatively, you could create your own Image View Model (possibly a subclass of the Core Module’s Image class) which gets the width and height from the XHTML and then create an Image View which calculates the aspect ratio from those.
Thanks Nicholas! Very useful post.
Thank you very much! This is exactly what I am look for. Works like a charm..