GithubHelp home page GithubHelp logo

carliros / hakyll-banner-images-demo Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 140 KB

A small Hakyll-based site demonstrating how to have automatically processed, per-post banner images.

Haskell 86.56% HTML 13.44%

hakyll-banner-images-demo's Introduction

title tags excerpt
Banner Images with Hakyll
howto, hakyll, images, imagemagick, haskell
This post demonstrates one approach to associate banner images with posts in a Hakyll site, produce multiple versions of them with ImageMagick, and use them in templates.

This repository contains a small "proof of concept" site built with the Hakyll static site generator. It demonstrates a technique which allows a developer to associate a "banner" image with each post in their site. The generated site will contain several versions of each image in different sizes, etc.

Each post in the site is represented by a directory containing an index.md Markdown file and, optionally, a banner.png image file. This repository contains two posts, one with and one without an image:

posts/2013-10-23-post-without-banner/index.md
posts/2013-10-24-post-with-banner/banner.png
posts/2013-10-24-post-with-banner/index.md

The site.hs Haskell program contains only the most basic Hakyll directives to process the Markdown files (indeed, I haven't even bothered to override the date code; you'll need to put the date in the Markdown file metadata). In addition, it contains the proof-of-concept code to handle the banner images.

The imageProcessor function is a helper to construct the Hakyll Rules () to process a set of banner images and the Context a allowing them to be used in the associated posts and templates. This function takes a Pattern which matches the banner images and a list describing the different versions to generate of each image.

let (postImages, postImageField) = imageProcessor "posts/*/banner.png"
                                     [ ("small" , Just (200,100))
                                     , ("medium", Just (600,300))
                                     , ("full"  , Nothing)
                                     ]

The first argument to imageProcessor is the pattern identifying the image to be processed. This pattern must end in a full filename. The second argument is a list of versions to create. Each version has a name (the String) and image processing instructions (Nothing to copy the image, Just (x,y) to scale and crop the image to the given dimensions using ImageMagick's convert command). This generates a Rules () value to process the images (postImages in the code) and a Context a to make them available in posts and templates.

The Rules () value can be "run" just like any create or match statement and the Context a value can be used in the context of post with a path that matches the image pattern (ignoring the filename). This context defines one variable for each of the image versions being generated. In this code, the variables are:

  • banner-small is a 200x100 image.
  • banner-medium is a 600x300 image.
  • banner-full is the original image.

These names are generated from the filename banner.png in the image pattern (this is why the pattern must have a filename) and the name of each version.

hakyll-banner-images-demo's People

Contributors

thsutton avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.