Responsive Images In Markdown
How to make Markdown images responsive
On a recent website I wrote for a local athletics club I incorporated the Articulate blog plugin to provide news articles on the site.
One issue I came across was when using the Markdown editor either via the phone interface or from the Umbraco Back Office was any images were not responsive. Understandably Articulate doesn't know which CSS framework you are using so wouldn't know which classes to add.
So how do you make the images responsive? The answer is to tap into the Umbraco Application Startup Events where we can provide a callback for MarkDownDeep and inject the relevant classes.
The following code shows how to inject Bootstrap 4 img-fluid class to MarkDown images.
I knocked up a quick bootstrap theme for Articulate which demonstrates this in action. I then created a simple post with an image from yesterdays run at the gym (yes it's slow)
Viewing the post without the MarkDownDeep callback results in this.
Applying the callback results in the image sitting nicely within its boundaries.
There may well be other ways of achieving the same results but this has worked well for me.