Add placeholder img helper - Githubissues

cloudfour / core-hbs-helpers

Handlebars helpers that we usually need

MIT License

11 stars 2 forks source link

Add placeholder img helper #22

Closed tylersticka closed 8 years ago

tylersticka commented 8 years ago

Almost all of our prototyping projects benefit from a placeholder image solution, but most have caveats:

Placeholder images we save to project asset folders have to be created and managed manually.
Services like placehold.it or PlaceIMG require external requests, which can hang if connections are slow.
Client-side solutions like Holder.js require JavaScript, which can be a little tricky to integrate if the project includes both production and documentation-related JavaScript toolkits.

I prototyped a solution that uses a Handlebars helper to generate an SVG based on the provided attributes, encoding it as a data-uri for use in templates. You can see the working prototype here: http://codepen.io/tylersticka/pen/7119ac1f7900118fae7cd5eab2f6e2fa/left?editors=1010

The prototype is tested and working in the latest versions of Safari (desktop + iOS), Chrome and Firefox, as well as IE 10 and up. Tasks remaining:

[x] Rewrite as a module within this repo
[x] Write tests for it