localghost.io_

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

    callback()

Registered in wintersmith's config.json:

"plugins": [
    "wintersmith-sass",
    "./node_modules/wintersmith-markdownhacks/plugin.coffee"
]

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

obligatory cat gif

One comment so far

bishopZundefined

thank you for this!

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