jQuery Picture Tag for Rails
Ruby Gem to include the jQuery Picture Tag source code in your Rails application. Works great with Picture Tag Rails!
Current Version
0.0.1
Requirements
- jQuery
- matchMedia.js for older browsers
- rubygems >= 1.3.6
- railties >= 3.1.0, < 5.0
- thor ~> 0.14
Installation
Gemfile
Add this line to your application's Gemfile:
gem 'jquery_picture_tag-rails'
Manual
Or install it yourself as:
gem install jquery_picture_tag-rails
Rails 3.1 or greater (with asset pipeline enabled)
The jquery-picture-tag file will be added to the asset pipeline and available for you to use.
Add this line in app/assets/javascripts/application.js
:
//= require jquery-picture-tag
Rails 3.0 (or greated with asset pipeline disabled)
Copy the jquery-picture-tag file into public/javascripts
:
rails generate jquery_picture_tag:install
Include the jquery-picture-tag into your application:
<%= javascript_include_tag "jquery-picture-tag" %>
Usage
Use the W3C Picture Element Proposal's <picture>
tag syntax.
ProTip™: Use picture_tag-rails to generate it for you.
<picture alt="Kitty cat!">
<source media="(min-width: 1600px)" srcset="cat-large.jpg 1x, [email protected] 2x">
<source media="(min-width: 1000px)" srcset="cat-medium.jpg 1x, [email protected] 2x">
<source media="(min-width: 768px)" srcset="cat-small.jpg 1x, [email protected] 2x">
<source media="(min-width: 480px)" srcset="cat-tiny.jpg 1x, [email protected] 2x">
<source srcset="cat-tiny.jpg 1x, [email protected] 2x">
<img alt="Kitty cat!" src="cat-tiny.jpg">
</picture>
Put this Javascript somewhere to apply it to all <picture>
tags.
$(function() {
$('picture').pictureTag();
});
Or this to apply it to just some <picture>
tags.
$(function() {
$('.gallery picture').pictureTag();
});
Authors
- Jessica Lynn Suttles / @jlsuttles
Contributing
- Fork it
- Get it running
- Create your feature branch (
git checkout -b my-new-feature
) - Write your code and specs
- Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
If you find bugs, have feature requests or questions, please file an issue.
License
Copyright (c) 2012 G5
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.