Last Updated: February 25, 2016
·
756
· keyboardcowboy

PlaceKitten Mixin for Jade

Need to quickly add some images to a template for prototyping? Placekitten.com gives you the cutest placeholder images ever. Use this mixing to smoosh them into your template.

The mixin:

// - Create a kitten image
// - Use 1 for color, 0 for B&W
mixin kitten(width, height, color, classes)
  classes = classes || ''

  if color
    img(src="http://placekitten.com/#{width}/#{height}", alt="Here's a cute kitten.", title="Here's a cute kitten.", class="#{classes}")
  else
    img(src="http://placekitten.com/g/#{width}/#{height}", alt="Here's a cute kitten.", title="Here's a cute kitten.", class="#{classes}")

Add it to your Jade template:

mixin kitten(400, 300, 0, 'embed right')

Generates:

<img src="http://placekitten.com/g/400/300" alt="Here's a cute kitten." title="Here's a cute kitten." class="embed right"/>