Responsive Images In Markdown

How to make Markdown images responsive

Peter Stokes · Wednesday, April 11, 2018

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)

Articulate MarkDown Editor

Viewing the post without the MarkDownDeep callback results in this.

Image Not Responsive

Applying the callback results in the image sitting nicely within its boundaries.

Markdown Image Responsive

There may well be other ways of achieving the same results but this has worked well for me.

Share:

Peter Stokes

Peter Stokes

All author posts
;