Skip to content

Octo-Labs/middleman-automatic-clowncar

Repository files navigation

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

About

Funny name, easy responsive images for middleman.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published