Helpful Frank Helpers – Kitty Placeholder

So I’ve started to use the totally awesome Frank, a quick prototyping tool for static websites. I’m working with it now to quickly prototype my own websites with useful templating engines such as HAML and SASS. Trust me, it makes your life somewhat simpler.

One of the features Frank has is functions for quickly creating lorem ipsum text and placeholder images from placehold.it. The placeholder image URLs can be retrieved by calling the lorem.image(…) function. Here is one image from placehold.it that is 300 x 150 px large, which is generated by lorem.image('300x150'):

Now that is great and all but there is a similar placeholder service that displays much more awesome kitty pictures. Placekitten can place kitty pictures as placeholders. The service works similarly to placehold.it but the url looks a bit different. To get a 300 x 150 px picture you use the url, http://placekitten.com/300/150, which will give you the following picture:

So how do we add a function that will do the same thing as Frank’s lorem.image function but produces kitten placeholders instead? Don’t fret; Frank’s got it all covered. Frank provides a Helper class for you to add your own helper functions. In there we could write a helper function that generates the kitty picture placeholders that you want. It’s simple Ruby code that you put in the FrankHelpers, in project_root/helpers.rb, written as succinctly as I could:

def kitty(width, height, isGray = true)
    g = isGray ? "g/" : ""
    "http://placekitten.com/#{g}#{width}/#{height}"
end

This code works by calling kitty(300,150,false) to get the colored kitty picture as placed above. For a gray scaled kitty picture you can remove the last parameter, kitty(300,150). In order for you to add an image in HAML you do it like this:

    %img{:src=>kitty(300,150), :width=>'300', :height=>'150'}

Bam; and there you have it! I’ll post more helpers as soon as I can think of any more useful ones.

Advertisement