responsive_images 0.0.1

data/.gitignore

@@ -0,0 +1,18 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+.rvmrc

data/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in responsive_images.gemspec
+gemspec
+
+gem 'mobvious', "0.3.1"

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 John Koht
+
+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,119 @@
+# Responsive Images
+
+ResponsiveImages is a simple library that handles responsive images on both the server and client side for Rails projects. It provides a set of helper methods that automatically load the appropriate image for whatever device a visitor is using.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'responsive_images'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install responsive_images
+    
+
+## Configuration
+
+The Responsive Image gem is easy to setup and use. Please note that it is currently requires Rails and [Carrierwave](https://github.com/jnicklas/carrierwave). To get started, you should setup or identify your carrierwave versions, here are some examples:
+
+    class MyUploader < CarrierWave::Uploader::Base
+      ...
+    
+      # Mobile version
+      version :mobile do
+        process :resize_to_fit => [300, 300]
+      end
+  
+      # Tablet version
+      version :tablet do
+        process :resize_to_fit => [600, 600]
+      end
+  
+      # Desktop version
+      version :desktop do
+        process :resize_to_fit => [900, 900]
+      end
+    
+      ...
+    end
+  
+You can add as many as you'd like. 
+
+#### Initializer
+In order to configure the gem, you'll need to add an initializer in app/initializers/responsive_images.rb
+
+    ResponsiveImages.configure do |config|
+      # Set the default version for image. If you leave it at :default then it will use
+      # the original size, i.e., image.url or you can use a specific version
+      config.default = :default  
+      # Add some custom sizes that you'll generate with Carrierwave. You can make as many
+      # as you want. But you'll need to configure mobvious for any custom ones.
+      config.sizes = {
+        mobile: :mobile,            # carrierwave version size
+        tablet: :tablet,            # another carrierwave version size
+        desktop: :desktop           # and one more version...
+      }
+    end
+
+Note that :mobile, :tablet and :desktop should be replaced with whatever carrierwave version you created. You can add more version but you'll need to configure mobvious to identify these screen sizes. ResponsiveImages does not currently support this but it is a feature that will eventually be added.
+
+## Usage
+
+ResponsiveImages is incredibly easy to use. There are currently two primary helpers
+
+
+### Responsive Image Tag
+
+The `responsive_image_tag` is meant replace the `image_tag`. You can pass any arguments, just like you would with an `image_tag`. Here is a basic exmpale:
+
+    # basic usage
+    = responsive_image_tag @post.image
+    # => <img src="path/to/image.jpg", data-desktop-src="path/to/desktop_image.jpg" data-tablet-src="path/to/tablet_image.jpg" data-mobile-src="path/to/mobile_image.jpg" /> 
+
+The helper method will determine what size is most appropriate for the `src` attribute. Rather than load a default size and then swap them out, the ResponsiveImage gem actually detects the user device and uses the appropriate image for the `src` attribute.
+
+You can also pass custom sizes to the helper method. If you have a specific model or page that use's different image, then pass those Carrierwave versions through the :sizes parameter:
+  
+    # custom versions
+    = responsive_image_tag @post.image, :sizes => { :tablet => :post_tablet, :mobile => :post_mobile }
+    # => <img src="path/to/image.jpg", data-desktop-src="path/to/desktop_image.jpg" data-tablet-src="path/to/post_tablet_image.jpg" data-mobile-src="path/to/post_mobile_image.jpg" /> 
+  
+These custom versions will overwrite the default versions from our configuration. This is incredibly useful for pages or models that require a different set of sizes. For example, a page hero/banner might be much larger than most content images and requires custom sizes.
+
+
+### Responsive Background Image
+
+ResponsiveImages also includes a helper for background images. You can easily call this with:
+    
+    # basic usage
+    = responsive_background_image @post.image
+    # => style="url(path/to/image.jpg)" data-desktop-src="path/to/image.jpg" data-tablet-src="path/to/tablet_image.jpg" data-mobile-src="path/to/mobile_image.jpg"
+
+This will automatically create the attributes for your `<div/>` or whatever tag you add a background image too.
+
+You can also pass custom version to the helper method with:
+  
+    # custom versions
+    = responsive_background_image @post.image, :sizes => { :'mobile' => :post_small, :tablet => :post_tablet }
+    # => style="url(path/to/image.jpg)" data-desktop-src="path/to/image.jpg" data-tablet-src="path/to/post_tablet_image.jpg" data-mobile-src="path/to/post_mobile_image.jpg"
+    
+### Mobvious
+
+ResponsiveImages uses [Mobvious](https://github.com/jistr/mobvious) for device detection. Check out [the gem](https://github.com/jistr/mobvious) for more details. You can use Mobvious to detect the user device by simply calling:
+  
+    return request.env['mobvious.device_type']
+    # => desktop (mobile or tablet)
+
+
+## Contributing
+
+1. Fork it
+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 new Pull Request

data/Rakefile

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

data/lib/responsive_images.rb

@@ -0,0 +1,18 @@
+require "responsive_images/version"
+require "responsive_images/config"
+require 'responsive_images/railtie' if defined?(Rails)
+
+module ResponsiveImages
+  
+  extend Config
+  
+  class << self  
+    def initialize attrs={}
+      attrs = ResponsiveImages.options.merge(attrs)
+      Config::VALID_OPTION_KEYS.each do |key|
+        instance_variable_set("@#{key}".to_sym, attrs[key])
+      end
+    end
+  end  
+  
+end

data/lib/responsive_images/config.rb

@@ -0,0 +1,28 @@
+module ResponsiveImages
+  module Config
+    
+    VALID_OPTION_KEYS = [
+      :default,
+      :sizes
+    ]
+    
+    attr_accessor *VALID_OPTION_KEYS
+    
+    def configure
+      yield self
+      self
+    end
+    
+    def options
+      options = {}
+      VALID_OPTION_KEYS.each{ |pname| options[pname] = send(pname) }
+      options
+    end
+    
+    
+    def responsive_sizes
+      sizes
+    end
+        
+  end
+end

data/lib/responsive_images/railtie.rb

@@ -0,0 +1,24 @@
+# lib/my_gem/railtie.rb
+require 'responsive_images/view_helpers'
+require "mobvious"
+
+module ResponsiveImages
+  class Railtie < Rails::Railtie
+    
+    # Add our view helpers
+    initializer "responsive_images.view_helpers" do
+      ActionView::Base.send :include, ViewHelpers
+    end
+    
+    # Add the mobvious middleware
+    initializer "railtie.configure_rails_initialization" do |app|
+      app.middleware.use Mobvious::Manager
+    end
+    
+    # Configure Mobvious and setup the mobile tablet and desktop groups
+    Mobvious.configure do |config|
+      config.strategies = [ Mobvious::Strategies::MobileESP.new(:mobile_tablet_desktop) ]
+    end
+    
+  end
+end

data/lib/responsive_images/responsive_images.rb

@@ -0,0 +1,14 @@
+module ResponsiveImages
+  module Activator
+  
+    class << self
+      def initialize attrs={}
+        attrs = ResponsiveImages.options.merge(attrs)
+        Config::VALID_OPTION_KEYS.each do |key|
+          instance_variable_set("@#{key}".to_sym, attrs[key])
+        end
+      end
+    end
+
+  end
+end

data/lib/responsive_images/version.rb

@@ -0,0 +1,3 @@
+module ResponsiveImages
+  VERSION = "0.0.1"
+end

data/lib/responsive_images/view_helpers.rb

@@ -0,0 +1,61 @@
+module ResponsiveImages
+  module ViewHelpers
+
+    
+    # Use mobvious to get the user's device type, it will return mobile, tablet or desktop
+    def device_type
+      return request.env['mobvious.device_type']
+    end
+    
+    
+    # Create a image tag with our responsive image data attributes
+    def responsive_image_tag image, options={}
+      # Merge any options passed with the configured options
+      sizes = ResponsiveImages.options.deep_merge(options)  
+      # Let's create a hash of the alternative options for our data attributes    
+      data_sizes = alternative_sizes(image, sizes)
+      # Get the image source
+      image_src = src_path(image, sizes)      
+      # Return the image tag with our responsive data attributes
+      return image_tag image_src, data_sizes
+    end
+    
+    
+    def responsive_background_image image, options={}
+      # Merge any options passed with the configured options
+      sizes = ResponsiveImages.options.deep_merge(options)
+      data_hash = { style: "background-image: #{src_path(image, sizes)}" }.merge(alternative_sizes(image, sizes))      
+    end
+  
+    
+    # Let's identify the default image size for the image tag. If it's a desktop then our
+    # default src attribute should be desktop (or default) but if it's a mobile or table
+    # then we should set the src attribute to the mobile or tablet image
+    def src_path image, sizes
+      case device_type
+      when :desktop
+        image_src = sizes[:default] == :default ? image.url : image.url.send(sizes[:default])
+      when :tablet
+        image_src = sizes[:sizes][:tablet].present? ? image.url.send(sizes[:sizes][:tablet]) : image.url.send(sizes[:default])
+      when :mobile
+        image_src = sizes[:sizes][:mobile].present? ? image.url.send(sizes[:sizes][:mobile]) : image.url.send(sizes[:default])
+      end
+    end
+    
+    
+    # Loop over the images sizes and create our data attributes hash
+    def alternative_sizes image, sizes
+      data_sizes = {}
+      sizes[:sizes].each do |size, value|
+        if value.present?
+          data_sizes["data-#{size}-src"] = (value == :default ? image.url : image.url.send(value))
+        else
+          false
+        end
+      end
+      data_sizes
+    end
+        
+        
+  end  
+end

data/responsive_images.gemspec

@@ -0,0 +1,24 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'responsive_images/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "responsive_images"
+  spec.version       = ResponsiveImages::VERSION
+  spec.authors       = ["John Koht"]
+  spec.email         = ["john@kohactive.com"]
+  spec.description   = "A responsive image gem for Rails and Carrierwave"
+  spec.summary       = "A responsive image gem for Rails and Carrierwave"
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+  spec.add_dependency "mobvious"
+end

metadata

@@ -0,0 +1,106 @@
+--- !ruby/object:Gem::Specification
+name: responsive_images
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- John Koht
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-03-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: mobvious
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A responsive image gem for Rails and Carrierwave
+email:
+- john@kohactive.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/responsive_images.rb
+- lib/responsive_images/config.rb
+- lib/responsive_images/railtie.rb
+- lib/responsive_images/responsive_images.rb
+- lib/responsive_images/version.rb
+- lib/responsive_images/view_helpers.rb
+- responsive_images.gemspec
+homepage: ''
+licenses:
+- MIT
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.25
+signing_key: 
+specification_version: 3
+summary: A responsive image gem for Rails and Carrierwave
+test_files: []