Work in progress markdown responsive images (including figure shortcode)

I thought you might be interested in the work I am doing on responsive images for markdown (plain and figure shortcode).

This is based on #514 and #544 and additional work.

3 Likes

Hi @cshoredaniel,

A quick feedback:

  • How to use your shortcode? (You may want to provide a shortcode example, define the requirements for image formats and path, etc)
  • Which features do you implement here? (output formats, linked image, lazy loading, fallback image, etc)

I was planning to use the solution from Laura Kalbag, mixed up with this one, but I’m still searching the way to go
Thanks for sharing your work!

Thank you, I was nodding off while posting, and forgot to create the

HTH (and thank you for the links).

1 Like

I hope the README answers your first question.

  • Output formats: Same as input (but must be JPEG, TIFF, BMP, PNG, or GIF, and with Hugo extended WEBP is also available) unless you set
    convertImageTo in which case the image is converted as you specify (but must be one of the above input formats, and the output format must be supported by Hugo image processing).
  • Linked image (I presume you mean full image; I hope the README answers that well enough).
  • Uses lazy loading, currently no options just always lazy
  • Fallback image is the full image (unless using convertImageTo in which case it is the identical size but converted to the specified format.

The figure shortcode is the standard Hugo image shortcode modified to use responsive-images the same as standard markdown with the render-images hook setup to do responsive images.

Standard Markdown ![Alt text](image.png) also works.

The objective is/was not to add bells and whistles, but to use standard Hugo, and add responsive images.

I know the sizes= bit needs some work.

1 Like

I’ve now got a GitHub repo for which I’ve updated the README and have a Demo site which also has a a version of the README.

Please let me know if you need more info!

2 Likes