Responsive Images support on Markdown Cards

[Ludovic_Toinel]

Hi,

Ghost supports Responsives images on image card.

I could be genious to support responsive images on Markdown cards !

@davegardner/markdown-it-responsive

Regards,

[Kevin]

It’s a difficult one to implement. We’re able to generate srcset and sizes for image and gallery cards because they allow metadata about the image to be stored inside the mobiledoc document format. Markdown doesn’t let you do that unless you break away from cross-compatible markdown which would largely work against the intention of the markdown card.

[Ludovic_Toinel]

The responsiveness is a rendering issue linked to the theme used and not the post content. It’s not a mobiledoc issue, isn’t it ?

What about to let the image as is in the mobile doc and let the rendering resizes the images and provides images sizes regarding the theme used ?

Thank-you Kevin.

[Kevin]

The responsiveness is a rendering issue linked to the theme used and not the post content.

No, themes have no control over the post content rendering. Post content is rendered to HTML when the post is saved to keep front-end and API requests fast through not needing to render on the fly.

What about to let the image as is in the mobile doc and let the rendering resizes the images and provides images sizes regarding the theme used ?

Sorry, I’m not sure what this means, can you re-phrase?

[Ludovic_Toinel]

The Koenig rendering motor could take into parameters the theme settings in terms of image resolution supported ?

The html could be regenerated each time a theme is changed based on the Mobiledoc document that contains the original Markdown ?

I’m trying to find a solution to accelerate the mobile rendering of my blog on long posts

[Kevin]

@Ludovic_Toinel

The Koenig rendering motor could take into parameters the theme settings in terms of image resolution supported ?

The html could be regenerated each time a theme is changed based on the Mobiledoc document that contains the original Markdown ?

That side of things isn’t the problem, srcsets use system-defined sizes that aren’t affected by themes. The issue is having access to the image dimensions so that we can output the correct set of srcset/sizes that work within the available system sizes. Image and gallery cards store that metadata within mobiledoc, markdown has no equivalent.

[Ludovic_Toinel]

The other solution could be to add a “loadind=lazy” attribute on all post images generated by the markdown
Image Lazy Loading plugin for Markdown-it by ltoinel · Pull Request #156 · TryGhost/Koenig · GitHub

It could save me some performance Warning on large posts (+ support new image format).