blurred_image_tag 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d30dd20bfad9d09db6fc1f1ae5776eb7b3149655
+  data.tar.gz: 01f07c1ad79c6b3cff5dde2e4448b0980e2a490e
+SHA512:
+  metadata.gz: c0655f9a168c29c83e523dfbbe41941e66142efdb7d640577d7c877a3c7ade61edb79ba999adba9e6dc60672ea0743036aa45d6043dec3ac1700107077b19253
+  data.tar.gz: d2c7cb1850d5b20e169879a14494028d8a90c491d96083e9612d6d1f2a0887b8198320536e4a7bfbc4a1831e8556d68ba723aa0420c1af011871e7c54fa788b5

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 Alex Eguia
+
+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.

data/README.md

@@ -0,0 +1,35 @@
+# BlurredImageTag
+
+TODO: Write a gem description
+*= require blurred_image_tag
+gem 'blurred_image_tag'
+blurred_image_tag 'missing.png'
+parent div the width you want
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'blurred_image_tag'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install blurred_image_tag
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/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

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/app/assets/stylesheets/blurred_image_tag.css

@@ -0,0 +1,36 @@
+.blurred-image-wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0;
+  padding-top: 100%;
+  overflow: hidden;
+  background: transparent;
+}
+
+.blurred-image-wrapper img.blurred {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  filter: blur(5px) opacity(0.25);
+  -webkit-filter: blur(5px) opacity(0.25);
+  transform: scale(1.1);
+}
+
+.blurred-image-wrapper img.original {
+  position: absolute;
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}

data/app/helpers/blurred_image_tag_helper.rb

@@ -0,0 +1,18 @@
+module BlurredImageTagHelper
+  def blurred_image_tag(source, options = {})
+    # Add internal class name to coming classes
+    original_classes = [options[:class], 'original'].join(' ')
+    blurred_classes  = [options[:class], 'blurred'].join(' ')
+
+    # Retrieve width and heigth of the image, 100% by default
+    width  = options[:width].nil? ? '100%' : options[:width]
+    heigth = options[:height].nil? ? '100%' : options[:height]
+
+    # Generate parent div with two images, one blurred and the original non-blurred one on top
+    output = '<div class="blurred-image-wrapper" style="width: ' + width + '; padding-top: ' + heigth + '">'
+    output += image_tag source, options.merge(class: blurred_classes).except(:width).except(:heigth)
+    output += image_tag source, options.merge(class: original_classes).except(:width).except(:heigth)
+    output += '</div>'
+    output.html_safe
+  end
+end

data/lib/blurred_image_tag.rb

@@ -0,0 +1,2 @@
+require "blurred_image_tag/version"
+require "blurred_image_tag/engine"

data/lib/blurred_image_tag/engine.rb

@@ -0,0 +1,4 @@
+module BlurredImageTag
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/blurred_image_tag/version.rb

@@ -0,0 +1,3 @@
+module BlurredImageTag
+  VERSION = "0.1.0"
+end

metadata

@@ -0,0 +1,67 @@
+--- !ruby/object:Gem::Specification
+name: blurred_image_tag
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- KRaikk
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-07-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+description: 
+email:
+- alex@alexeguia.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/stylesheets/blurred_image_tag.css
+- app/helpers/blurred_image_tag_helper.rb
+- lib/blurred_image_tag.rb
+- lib/blurred_image_tag/engine.rb
+- lib/blurred_image_tag/version.rb
+homepage: https://github.com/KRaikk/blurred_image_tag
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Generates a div with a given image with a blurred background keeping its
+  aspect ratio.
+test_files: []