Automatically generated responsive images for Middleman.
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
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
.
Background images in SVG require a full absolute path with host. You have two options for setting this.
-
You can set the
:host
option in the call toautomatic_clowncar_tag
.<%= automatic_clowncar_tag 'photos/my-photo.jpg', :host => 'http://localhost:4567' %>
-
You can set the
:asset_host
configuration variable inconfig.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
- Fork it ( http://github.com//middleman-automatic-clowncar/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request