Ꮅ̣

Markdown with Responsive Images

I’ve never liked the overhead of dealing with responsive image sets in Markdown when writing for the web. I’ve now set up the current version of this site to expect any image links as a simple list as part of the yaml header, rather than within the main body of the post, which is processed further by Jekyll at compile-time.

Since I only need to do this part once it can be as complex and edge-casey as I need while keeping the actual written content short and clean.

This only works as I no longer care about in-article image positioning. I’ll generally either be sharing a single image or adding a single set of explanatory/descriptive images to the end of a post, rather than writing a print-style article with a strictly defined layout.

For example, this Markdown+yaml file:

---
date: 2017-07-23 15:31:00 +01:00
images:
  - 2017-07-23-chicago-broods.jpg
---
Chicago _broods_.

Becomes this, showing either a large or small file-size version of the image based on the viewing device type, without my needing to care about those variations when writing the post.

My live Jekyll code [is here]({{ site.markdown_url }}{{ site.github.repository_nwo }}/master/_includes/images.html) but to use it you’ll still need to add multiple images to your site, appropriately named. I use @workflowhq on iOS to automate this part.

Markdown with responsive images ·

#Technology

Not everyone makes use of the existing ‘Lion-style’ full-screen mode in os x—if you have a particularly large monitor, or just prefer having multiple overlapping windows visible at the same time, then you may see it as a waste of screen real estate—yet the tech world has seen a real growth over the last few years in applications and tools which are built with the goal of reducing distraction and increasing focus

Multi app single focus

One of the main reasons to use [Markdown][#markdown] is to avoid any issues of layout, visual composition or rendering until after the actual content has been written. Unfortunately, when publishing something for the web, issues such as how content will display on different categories of devices do eventually need to be thought about. Image syntax in particular can be cumbersome in Markdown if you need to do something more complex than just specifying a single image and alt text

Responsive images using markdown in scrivener

This is a static website—the content you’re reading now is generated once, for all visitors, then presented in the same way each time for each browser request. That’s slightly different from the (current) internet norm of generating content as it’s requested, possibly on a targeted per-user basis, and probably using a database or some server-side business logic. Think of Wordpress and its plugins as examples of the latter, while Pelican, Jekyll, and Octopress would be examples of the former

Static generation dynamic content