Tuesday, 29 September 2015

Holder.js doesn't work (Oh yes it does)

Developer error, that's what it was.

Holder.js is a great utility for generating dynamic images of a given size (and colour etc.) that you can use for placeholders when building a web site, if you don't have the real images yet. It allows you to write that carousel code taking up the full size it should as well as fake thumbnails, shopping item images and lots more.

You install a file called holder.js (surprise, surprise) and then you simply create images with the source (or data-src) attribute that looks something like:



The numbers are for the size and in this example, random=yes means that each time you run it, you get a different "theme" colour for the image - spice it up a bit.

You can see all the options here: https://github.com/imsky/holder

The thing is: the "holder.js" in the data-src attribute is NOT a path to the javascript file (that's what I thought it was and why it didn't work) it is purely a label that holder.js will find so it knows which images to generate and which to leave alone. Obviously the selector uses "starts with holder.js", which is why it doesn't work with a full path to it.

You have been warned!