Responsive images and markdown

[Sherwood Botsford]

I like markdown.  I use it in combination with Template Toolkit, and
basically I don't have to write any html.  My webpages are static, having
only the js snippet that Google analytics uses.  I would mostly like to
keep it that way.  I have zero javascript experience.

I can do some degree of simple page layout using a handful of classes
applied to DIVs.

So this

    <DIV class=picr3>

    ![Shelterbelt-12][2]

    Planting a shelterbelt, or any tree project...

    ***

    </DIV>
    [2]: /Images/Shelterbelt/Shelterbelt-12.jpg

is all the html I need to use to have an image sized to width 30% of the
Content div floated to the right.  The system isn't perfect, but it resizes
reasonably well, and since the page is static it caches well, and is fast
to deliver.

More important to me:  I can spend time writing content, and very little
tweaking layout.

The problem:  If I serve an nice desktop image to a mobile phone, download
times are high.  If I serve an image of reduced resolution to make phone
access quick, it looks like crap on a desktop.



 In Html we now have the <picture> element, combined with the srcset and
size attributes.  This turns what used to be a simple img tag into this:

    <picture>
    <source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
    srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">

    <source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw,
50vw"
    srcset="stick-figure.png 416w, stick-figure-hd.png 416w">

    <img src="stick-original.png" alt="Human">
    </picture>

At this point, I'm looking at having to roll my own solution much along
this line:

*  Replace <DIV> with <div>  On my implementation of Markdown, being
between lower case tags means that the content of that tag is not Markdown
processed.

* Come up with a standard naming convention, say whateverimage-L.jpg for
the large version, -M.jpg for the medium version and -S. jpg for the small
version.

* Pre process the resulting markdown files to generate the full <picture>
element from the embedded markdown.  I think this is within my limited perl
programming capabilities.

Gotchas?

This wheel has been invented already?

Better ways to approach this?  Should I bite the bullet and do this with a
javascript snippet?

Some other solution I've missing in my wandering of 'a maze of twisty
passages, all different' that is the internet?


Regards

Sherwood
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://pairlist6.pair.net/pipermail/markdown-discuss/attachments/20190327/69f2f73a/attachment.html>