https://github.com/tomasc/picture_tag
Rails helper for <picture> tag integrated with Picturefill.
https://github.com/tomasc/picture_tag
Last synced: 9 months ago
JSON representation
Rails helper for <picture> tag integrated with Picturefill.
- Host: GitHub
- URL: https://github.com/tomasc/picture_tag
- Owner: tomasc
- License: mit
- Created: 2014-07-15T10:55:38.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2018-02-04T08:13:56.000Z (over 8 years ago)
- Last Synced: 2024-03-14T21:23:52.868Z (over 2 years ago)
- Language: Ruby
- Homepage:
- Size: 23.4 KB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PictureTag
[](https://travis-ci.org/tomasc/picture_tag) [](http://badge.fury.io/rb/picture_tag) [](https://coveralls.io/r/tomasc/picture_tag)
Rails helper for `` tag integrated with [Picturefill](http://scottjehl.github.io/picturefill/).
## Installation
Add this to your application's Gemfile:
```ruby
gem 'picture_tag'
```
And then execute:
```sh
$ bundle
```
Or install it yourself as:
```sh
$ gem install picture_tag
```
In case you would like to add a picture polyfill:
```ruby
source 'https://rails-assets.org' do
gem 'rails-assets-picturefill'
end
```
And add to your `application.js`:
```JS
//= require picture_tag
```
## Usage
```Slim
= picture_tag '/images/fallback.jpg', image: { alt: 'Your smart alt attribute' } do
= source_tag srcset: '/images/large.jpg', media: '(min-width: 2000px)', sizes: '100vw'
= source_tag srcset: '/images/large_retina.jpg 2x', media: '(min-width: 2000px)', sizes: '100vw'
= source_tag srcset: '/images/medium.jpg', media: '(min-width: 1000px)', sizes: '100vw'
= source_tag srcset: '/images/medium_retina.jpg 2x', media: '(min-width: 1000px)', sizes: '100vw'
= source_tag srcset: '/images/small.jpg', sizes: '100vw'
= source_tag srcset: '/images/small_retina.jpg 2x', sizes: '100vw'
```
produces
```HTML
![Your smart alt attribute]()
```
Note that the mandatory `img` tag is automatically generated based on the arguments passed to the `picture_tag`.
## More information
* [Picturefill](http://scottjehl.github.io/picturefill/), the neat polyfill used by this gem
* [Specification](http://picture.responsiveimages.org/) provided by [Responsive Images Community Group](http://responsiveimages.org)
## Contributing
1. Fork it ( https://github.com/tomasc/picture_tag/fork )
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request