Funny name, easy responsive images for middleman.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
features
fixtures/automatic-clowncar-app
lib
.gitignore
.travis.yml
Gemfile
LICENSE.txt
README.md
Rakefile
middleman-automatic-clowncar.gemspec

README.md

Middleman::Automatic::Clowncar

Automatically generated responsive images for Middleman.

Gem Version Build Status Code Climate Coverage Status Dependency Status

Installation

Add this line to your application's Gemfile:

gem 'middleman-automatic-clowncar'

And then execute:

$ bundle

Or install it yourself as:

$ gem install middleman-automatic-clowncar

Usage

Activate the module in config.rb and pass in config options.

activate :automatic_clowncar,
  :sizes => {
    :small => 200,
    :medium => 400,
    :large => 600
  },
  :namespace_directory => %w(photos),
  :filetypes => [:jpg, :jpeg, :png]

At build time the extension will look in source/photos and will create thumbnails for each image it finds there.

For example, let's say you have an image at source/photos/my-photo.jpg. With the configuration above the extension will generate the following files:

build/photos/my-photos.svg
build/photos/my-photo/my-photo-small.jpg
build/photos/my-photo/my-photo-medium.jpg
build/photos/my-photo/my-photo-large.jpg
build/photos/my-photo/timestamp.txt

The timestamp file is used to allow the extension to skip regenerating the thumbnails if the modified timestamp of the source image has not changed.

Then in a template you can use the automatic_clowncar_tag to display a responsive image.

<%= automatic_clowncar_tag 'photos/my-photo.jpg' %>

Please note : The directory for the images to be clowncar-ed must be outside of (and different than) the source/images directory. Middleman automatically does some things with images that interfere with the operation of middleman-automatic-clowncar.

Setting the host

Background images in SVG require a full absolute path with host. You have two options for setting this.

  1. You can set the :host option in the call to automatic_clowncar_tag.

    <%= automatic_clowncar_tag 'photos/my-photo.jpg', :host => 'http://localhost:4567' %>
    
  2. You can set the :asset_host configuration variable in config.rb.

    activate :asset_host
    set :asset_host, 'http://localhost:4567'
    

    Then you'll probably need a different host for your deployed site, so you can change the :asset_host variable for your build.

    configure :build do
      set :asset_host, 'http://www.octolabs.com'
    end
    

Contributing

  1. Fork it ( http://github.com//middleman-automatic-clowncar/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 new Pull Request