The Keystone Image jQuery plugin overlays a semi-transparent wireframe/design image over everything in the web browser viewport. Handy when converting a PSD from a graphic designer into a webpage to ensure pixel perfect layouts.
The keystone image persists in localStorage (one image per domain). No need to re-add the image after closing the tab/browser.
Add this line to your application's Gemfile:
gem 'keystone_image'
Add this line to your application.html.erb to load up the relevant javascripts:
<% if Rails.env == 'development' %>
<%= keystone_image %>
<% end %>
The keystone_image view helper takes options to override the default settings listed at the top of jquery.keystone-image.js:
<%= keystone_image 'toogle_overlay_keycode' => 49, 'overlay_opacity' => 0.2 %>
Do not access your webpage via the file:// protocol or you might not be able to drag/drop images due to cross domain issues.
Because of the usage of HTML5 Local Storage, native drag/drop, and File API, only modern browsers are supported. Known working with:
FAQs
Unknown package
We found that keystone_image demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.
Security News
CISA’s 2025 draft SBOM guidance adds new fields like hashes, licenses, and tool metadata to make software inventories more actionable.
Security News
A clarification on our recent research investigating 60 malicious Ruby gems.