Skip to content

Pictures and Avatars

TjerG edited this page Jun 5, 2013 · 14 revisions

Picture uploader: Carrierwave

Carrierwave is a Rubygem that can be used to upload and manage image uploads. The gem provides the user with functions to resize images as they are uploaded. It is also capable of making thumbnails of uploaded images to fit windows.

To use carrierwave and the image manipulation gems, ImageMagick must be installed on the server.

# encoding: utf-8

This line tells the browser there are characters other than ASCII.

###Require gems

require 'mini_magick'

Mini_magick is a gem used to manipulate uploaded images. 'Require' loads the gem into the uploader before the code gets executed.

require 'carrierwave/storage/ftp' # FTP only

This gem gets carrierwave to store the uploaded files on an FTP server.

The uploader

class PictureUploader < CarrierWave::Uploader::Base

The carrierwave uploader has it's own class that can be used to store and retrieve files.

# Include RMagick or MiniMagick support:
# include CarrierWave::RMagick
include CarrierWave::MiniMagick

Carrierwave uses RMagick or MiniMagick to manipulate the images. Both gems are more or less capable of the same modifications. MiniMagick is a lighter application to use on a web application.

# Include the Sprockets helpers for Rails 3.1+ asset pipeline compatibility:
include Sprockets::Helpers::RailsHelper
include Sprockets::Helpers::IsolatedHelper
  • Includes helpers for image, javascript, stylesheet, font, video, & audio assets.

  • Automatically appends extension if necessary.

  • Optionally outputs digest paths.

  • Falls back to file paths in the public directory & adds cache busting timestamp.

    Choose what kind of storage to use for this uploader:

    storage :ftp

Carrierwave has several options of directories to store uploaded files on. In this case, the uploaded files get sent to an ftp server.

# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end

This method sets a directory to store the uploads on. The uploaded file gets a name generated by the lines after 'uploads/...'.

# Provide a default URL as a default if there hasn't been a file uploaded:
  def default_url
(image_tag("/images/users/avatar_placeholder.png", :size => "250x250"))
 #{}"/images/users/avatar_placeholder.png"
end

Default_url is a method that contains a link to a default image. In the case of this application the default image is a placeholder for an avatar.

# Process files as they are uploaded:
  process :resize_to_fill => [500, 500]
#  end

Processing in carrierwave scales the size of the actual image. Resize_to_fill keeps the proportions of the image.

# Create different versions of your uploaded files:
  version :thumb do
  process :resize_to_fill => [250, 250]
end

Carrierwave can make versions of an uploaded image. These smaller thumbnails will be used in other pages. The 250 pixels version gets viewed on the frontpage and dashboard pages.

version :pageimage do
  process :resize_to_fill => [490, 490]
end

The :pageimage version gets shown when a user wants to view the whole article. A popup window opens and the larger image fits the window.

version :microthumb do
  process :resize_to_fill => [50, 50]
end

The microthumb is a very small avatar that will be used in the reviews.

# Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this:
  def extension_white_list
  %w(jpg jpeg gif png)
end

The white list states a number of file extensions that can be accepted to be uploaded.