Writing a simple wintersmith plugin

I wanted to hook in to how <img> are outputted by giving them a wrapper element. The reason I want to do this is so that i can give the wrapper a full page width background while centering and constraining the img's max-width to different sizes on different screen sizes.

Enter wintersmith-markdownhacks:

fs = require 'fs'
path = require 'path'
url = require 'url'

module.exports = (wintersmith, callback) ->

class LocalGhostPage extends wintersmith.defaultPlugins.MarkdownPage

    getHtml: (base) ->
        super base
        @_html = @_html.replace(/(<img[^>]+>)/g, '<div class="image-wrapper">$1</div>')
        return @_html

    wintersmith.registerContentPlugin 'pages', '**/*.*(markdown|mkd|md)', LocalGhostPage


Registered in wintersmith's config.json:

"plugins": [

It's dirty but I love it™. Here's an obligatory cat gif showing the end result.

obligatory cat gif


Comments on this post are linked to this post's issue page on GitHub

<< back to index

Writing a simple wintersmith plugin

Written by Mpdreamz