Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add placeholder img helper #22

Closed
2 tasks done
tylersticka opened this issue Apr 27, 2016 · 0 comments
Closed
2 tasks done

Add placeholder img helper #22

tylersticka opened this issue Apr 27, 2016 · 0 comments
Assignees

Comments

@tylersticka
Copy link
Member

tylersticka commented Apr 27, 2016

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:

  • Rewrite as a module within this repo
  • Write tests for it
@tylersticka tylersticka self-assigned this Apr 27, 2016
tylersticka added a commit that referenced this issue Apr 28, 2016
May be used to output zero-dependency dummy images encoded as data URI strings for use in `src` attributes of `<img>` elements.

Introduces one dependency: bgrins/TinyColor

Bumps version to `0.3.0`

See: #22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant