TextMate Snippets for Footnotes and Responsive Images
I use TextMate to write posts on my website and I have some handy snippets to write footnotes and retina-ready responsive images
Footnotes
To include a footnote link1, I have created a snippet triggered by fn:
<a id="fnr${1:1}-`date +"%Y-%m-%d"`" href="#fn${1}-`date +"%Y-%m-%d"`"><sup>${1}</sup></a>
The current date is automatically inserted and the footnote number starts at 1 and can be edited if there are multiple footnotes in the same post.
Then, to write the footnote (at the end of the post below a horizontal rule), I use a second snippet tiggered by fnr (for footnote return):
1. <a id="fn${1:1}-`date +"%Y-%m-%d"`"></a> $0 <a href="#fnr${1:1}-`date +"%Y-%m-%d"`">↩</a>
This automatically creates an ordered list item (the footnote starts with 1. using the Markdown syntax) with a backlink to the location of the footnote reference. The footnote number can also be edited and starts at 1. The cursor is then placed to write the footnote text.
Retina-ready Responsive Images
To display a retina-ready responsive images, I use 8 JPEG files of the same images at different resolutions and picturefill to display the appropriate one.
To simplify the typing, I have a snippet triggered by rrf (for retina responsive figure):
<figure><div class="img" data-picture data-alt="${2:title}">
<div data-src="#{ site.img_base_url }images/${1:filename}-320w.jpg"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-480w.jpg" data-media="(min-width: 320px)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-768w.jpg" data-media="(min-width: 480px)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-900w.jpg" data-media="(min-width: 768px)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-640w.jpg" data-media="(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-960w.jpg" data-media="(min-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5),(min-width: 320px) and (-moz-min-device-pixel-ratio: 1.5),(min-width: 320px) and (-o-min-device-pixel-ratio: 3/2)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-1536w.jpg" data-media="(min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5),(min-width: 480px) and (-moz-min-device-pixel-ratio: 1.5),(min-width: 480px) and (-o-min-device-pixel-ratio: 3/2)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}.jpg" data-media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5),(min-width: 768px) and (-moz-min-device-pixel-ratio: 1.5),(min-width: 768px) and (-o-min-device-pixel-ratio: 3/2)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="#{ site.img_base_url }images/${1:filename}-900w.jpg" alt="${2:title}">
</noscript>
</div>
<figcaption>${2:title} © #{ site.author.name }</figcaption>
</figure>
$0
The cursor is first placed to edit the filename variable which updates the 8 file names (I use consistent suffixes for each resolution) and then for the image title variable (the #{ site.img_base_url } and #{ site.author.name } variables are used by Awestruct when it renders the HTML).
These simple snippets makes it handy to include footnotes or images without writing tedious HTML elements.
- Such as this one... ↩
