Blog

Inspired by this post on how to create mirror images with Paperclip, I decided to write up how to do the same thing with CarrierWave. It’s a nice example of how CarrierWave’s Uploader class makes manipulating files very easy.

This assumes you’ve already generated an uploader and probably mounted it on a model somewhere. If this doesn’t make sense to you, check out the CarrierWave documentation.

Add this method to you uploader:

def add_mirror_effect(mirror_length)
  manipulate! do |img|
    mirror_rows = img.rows * mirror_length

    gradient = Magick::GradientFill.new(0, 0, mirror_rows, 0, "#888", "#000")
    gradient = Magick::Image.new(img.columns, mirror_rows, gradient)
    gradient.matte = false

    flipped = img.flip
    flipped.matte = true
    flipped.composite!(gradient, 0, 0, Magick::CopyOpacityCompositeOp)

    new_frame = Magick::Image.new(img.columns, img.rows + mirror_rows)
    new_frame.composite!(img, 0, 0, Magick::OverCompositeOp)
    new_frame.composite!(flipped, 0, img.rows, Magick::OverCompositeOp)
    new_frame
  end
end

This will first create a gradient. It will then flip the image and use that gradient as the alpha channel for the flipped image. Finally it will create a new image, putting the original, and the faded out mirror image together.

Next, add a version to your Uploader, which calls the new add_mirror_effect method:

version :with_mirror do
  process :add_mirror_effect => 0.2
end

That’s it! The end result should look something like this:

class AvatarUploader < CarrierWave::Uploader::Base
  include CarrierWave::RMagick

  version :with_mirror do
    process :resize_to_fill => [200, 200]
    process :add_mirror_effect => 0.2
  end

private

  def add_mirror_effect(mirror_length)
    manipulate! do |img|
      mirror_rows = img.rows * mirror_length

      gradient = Magick::GradientFill.new(0, 0, mirror_rows, 0, "#888", "#000")
      gradient = Magick::Image.new(img.columns, mirror_rows, gradient)
      gradient.matte = false

      flipped = img.flip
      flipped.matte = true
      flipped.composite!(gradient, 0, 0, Magick::CopyOpacityCompositeOp)

      new_frame = Magick::Image.new(img.columns, img.rows + mirror_rows)
      new_frame.composite!(img, 0, 0, Magick::OverCompositeOp)
      new_frame.composite!(flipped, 0, img.rows, Magick::OverCompositeOp)
    end
  end

end

For extra props, put the add_mirror_effect method in a module and include it in your Uploader.

Client

ICE House AB

Year

2009

Web site

http://41104.se/, et al

On behalf of our client ICE House we developed a platform for hyperlocal portals. The portals are accessed through nearly 7000 domain names, one for each Swedish zip code. Visiting the portal for your local zip code will show you all kinds of things available near you, such as classified ads, houses on the market, current offers of local companies, etc. Think of it as the common bulletin boards at your local grocery store, on steroids.

The sites use Google Maps to give the visitors an intuitive interface to browse the site. The posts you see change as you pan and zoom around the map. The sites’ content is mainly provided by agents - people local to each portal’s area. We also created a simple API that the developers at ICE House can use to post things that their spiders find while they crawl around the web looking for geocoded data.

This was also the first project where we used CarrierWave, a Ruby on Rails plugin for handling file uploads developed by our very own Jonas Nicklas. We’ll talk more about CarrierWave in an upcoming post on this blog.

ICE House has created a film describing Mittpostnummer (in Swedish). Check it out below. The sites are currently in a public beta while ICE House tune their spiders and agents to fill the sites with content.

REXML could not parse this XML/HTML: 
<object width="520" height="320"><param name="movie" value="http://www.youtube.com/v/VEVIGD1BQK8&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&hl=sv&feature=player_embedded&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/VEVIGD1BQK8&rel=0&color1=0xb1b1b1&color2=0xcfcfcf&hl=sv&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="520" height="320"></embed></object>