Skip to content

Instantly share code, notes, and snippets.

@bendera

bendera/placeholder.hbs

Last active November 21, 2016 22:44
Show Gist options
  • Save bendera/4be678f37c47bf3cebd1b614cd7842bb to your computer and use it in GitHub Desktop.
Save bendera/4be678f37c47bf3cebd1b614cd7842bb to your computer and use it in GitHub Desktop.
Download ZIP
Handlebars image placeholder partial. Usage example: `<img src="{{>placeholder width='100' height='100' bgcolor='000000' fgcolor='ffffff' text='hello'}}">` All parameters are optional
Raw
placeholder.hbs
data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22{{#if width}}{{width}}{{else}}100%25{{/if}}%22%20height%3D%22{{#if height}}{{height}}{{else}}100%25{{/if}}%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20{{#if width}}{{width}}{{else}}100%25{{/if}}%20{{#if height}}{{height}}{{else}}100%25{{/if}}%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder%20text%7Bfill%3A%23{{#if fgcolor}}{{fgcolor}}{{else}}ffffff{{/if}}%3Bfont-weight%3Abold%3Bfont-family%3AArial%2CHelvetica%2COpen%20Sans%2Csans-serif%2Cmonospace%3Bfont-size%3A14px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder%22%3E%3Crect%20width%3D%22{{#if width}}{{width}}{{else}}100%25{{/if}}%22%20height%3D%22{{#if height}}{{height}}{{else}}100%25{{/if}}%22%20fill%3D%22%23{{#if bgcolor}}{{bgcolor}}{{else}}dddddd{{/if}}%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dy%3D%22.3em%22%3E{{#if text}}{{text}}{{else}}{{#if width}}{{width}}{{else}}100%25{{/if}}x{{#if height}}{{height}}{{else}}100%25{{/if}}{{/if}}%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment