Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 

README.md

blurred_image_tag

Place an image into a fixed width/height box without being stretching in your Rails application, adjusting automatically no matter if it is landscape or portrait. Plus, add a blurred background of the same image to fill the box.

Great for fixed width/height <div> that may contain different image sizes and aspect ratios, like sliders.

Blurred logos example

Installation

Add this line to your application's Gemfile

gem 'blurred_image_tag'

and run

bundle install

In your application.css, include the CSS file:

/*
 *= require blurred_image_tag
 */

Then restart your webserver if it was previously running.

Usage

Helper

You can use the helper blurred_image_tag just as the image_tag helper in Rails:

blurred_image_tag source, options = {}
  • The source parameter takes the image src (in your assets pipeline or wherever it is placed).
  • The options hash accepts the same HTML attributes as image_tag.
    • Passing a width attribute will set the box's width (in any CSS units). Defaults to 100%.
    • Passing a height attribute will set the box's height (in any CSS units). Defaults to 100%.
    • Any other atributes used by gems like lazy_load will keep working.

Examples

blurred_image_tag 'avatar.png'
# => Creates a div with width: 100%, height: 100%

blurred_image_tag 'avatar.png', width: '200px'
# => Creates a div with width: 200px, height: 100%

blurred_image_tag 'avatar.png', width: '480px', height: '360px'
# => Creates a div with width: 480px, height: 360px

Output

The HTML output will be as follows:

<div class="blurred-image-wrapper">
  <img class="blurred" src="...">
  <img class="original" src="...">
</div>

Any classes added via blurred_image_tag helper will be added to the image tags, but no to the parent div.

If you want to override the CSS properties added by this gem, you can do it calling the CSS selector .blurred-image-wrapper (and children) in your own CSS files.

Just CSS!

Every positioning, blurring and scaling is done purely by CSS. No, no, JS is no here.

Contributing

  1. Fork it https://github.com/KRaikk/blurred_image_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 https://github.com/KRaikk/blurred_image_tag/pulls

About

No description, website, or topics provided.

Resources

License

Releases

No releases published
You can’t perform that action at this time.