Ruby on Rails

This is a quick start guide to show you how to integrate ImageKit in the Ruby on Rails application. The code samples covered here are hosted on Github -  https://github.com/imagekit-samples/quickstart/tree/master/ruby-on-rails.
This guide walks you through the following topics:
​Setting up ImageKit Ruby SDK​
​Rendering images​
​Applying common image manipulations​
​Secure signed URL generation​
​Adding overlays to images​
​Uploading files​
Setting up ImageKit Ruby SDK
For this tutorial, we will create a fresh rails application and work with it. If you already have an existing Rails app, it is also possible to use that, although you would need to modify the terminal commands and configurations in this tutorial as applicable. 
Let's create a new rails application. Create a new directory and enter the command:
1
rails new sample-app
Copied!
Now, navigate to the newly created directory, and run the app:
1
rails server
Copied!
In your web browser, navigate to http://localhost:3000/​
You should see a generic welcome message (Yay! You're on Rails!).
Welcome message for a fresh Ruby on Rails application
Next, to use ImageKit functionality in our app, we will create a new controller with the following command:
1
rails generate controller Welcome
Copied!
This will generate a few scaffolding files for you. Go to config/routes.rb and add the following lines:
1
get 'welcome/index'
2
root 'welcome#index'
Copied!
Here, we are doing two things:
1.
One, creating a route at the path welcome/index, to direct requests coming on that path to go to the index action of the Welcome controller, which we will add soon.
2.
Second, we are declaring the root path to be directed to welcome/index. This means that all requests on http://localhost:3000/ will go to http://localhost:3000/welcome/index
Installing the SDK
First, add this line to your Gemfile to add the 'imagekitio' gem as a dependency.
1
gem 'imagekitio'
Copied!
Next, run the bundle install command to install the imagekitio gem from the RubyGems repository.
1
bundle install
Copied!
Initializing the SDK
Before the SDK can be used, let's learn about and configure the requisite authentication parameters that need to be provided to the SDK.
Open the app/controllers/application_controller.rb file and add your public and private API keys, as well as the URL Endpoint as follows: (You can find these keys in the Developer section of your ImageKit Dashboard)
1
class ApplicationController < ActionController::Base
2
    before_action :init_ik
3
​
4
    def init_ik
5
        private_key = "YOUR_PRIVATE_KEY"
6
        public_key = "YOUR_PUBLIC_KEY"
7
        # default value for endpoint is: https://ik.imagekit.io/<YOUR_IMAGEKIT_ID>/
8
        url_endpoint = "YOUR_URL_ENDPOINT"
9
​
10
        # here we initialize an instance of the SDK, which we will use to work with images
11
        @imagekitio = ImageKit::ImageKitClient.new(private_key, public_key, url_endpoint)
12
    end
13
end
Copied!
Restart the application
1
rails server
Copied!
The home screen will display an error message stating that the index action could not be found for the WelcomeController. Let's fix that.
Rendering images in Ruby on Rails
Open up the project in your text editor of choice, and navigate to app/controllers/welcome_controller.rb. Edit it to make it look like the following:
1
class WelcomeController < ApplicationController
2
  def index
3
    # Configure your URL here
4
  end
5
end
Copied!
Here, declare a variable to store the image URL generated by the SDK. Like this:
1
class WelcomeController < ApplicationController
2
  def index
3
    @image_url = @imagekitio.url({
4
      path: 'default-image.jpg',
5
    })
6
  end
7
end
Copied!
Now, @image_url has the URL https://ik.imagekit.io/<your_imagekit_id>/default-image.jpg stored in it.  This variable can now be read by the index view, where we will display the image.
Go to app/views/welcome/index.html.erb, and add the following line:
1
<%= image_tag @image_url %>
Copied!
This fetches the image from the URL stored in @image_url that we created in the controller file.
Rerunning the server should now display this default image in its full size:
Image in its original dimensions (1000px * 1000px)
Common image manipulation in Ruby on Rails
Let’s now learn how to manipulate images using ImgeKit transformations.
Height and width manipulation
To resize an image along with its height or width, we need to pass the transformation as an array to the imagekitio.url() method.
Let’s resize the default image to 200px height and width:
1
class WelcomeController < ApplicationController
2
  def index
3
    @image_url = @imagekitio.url({
4
      path: 'default-image.jpg',
5
      transformation: [{
6
        height: "200",
7
        width: "200",
8
      }]
9
    })
10
  end
11
end
Copied!
Transformation URL:
1
https://ik.imagekit.io/violetviolinist/tr:h-200,w-200/default-image.jpg?ik-sdk-version=ruby-1.0.6
Copied!
Refresh your browser to get the resized image.
Resized image (200px * 200px)
Chained transformation
​Chained transformations provide a simple way to control the sequence in which transformations are applied.
Let’s try it out by resizing an image, then rotating it:
1
class WelcomeController < ApplicationController
2
  def index
3
    @image_url = @imagekitio.url({
4
      path: 'default-image.jpg',
5
      transformation: [{
6
        height: "300",
7
        width: "200",
8
      }]
9
    })
10
  end
11
end
Copied!
Transformation URL:
1
https://ik.imagekit.io/violetviolinist/tr:h-300,w-200/default-image.jpg?ik-sdk-version=ruby-1.0.5
Copied!
Output Image:
Resized and cropped (200px * 300px)
Now, rotate the image by 90 degrees.
1
class WelcomeController < ApplicationController
2
  def index
3
    @image_url = @imagekitio.url({
4
      path: 'default-image.jpg',
5
      transformation: [
6
      {
7
        height: "300",
8
        width: "200",
9
      },
10
      {
11
        rt: 90,
12
      },
13
    ],
14
    })
15
  end
16
end
Copied!
Chained Transformation URL:
1
https://ik.imagekit.io/violetviolinist/tr:h-300,w-200:rt-90/default-image.jpg?ik-sdk-version=ruby-1.0.5
Copied!
Output Image:
Resized, then rotated
Let’s flip the order of transformation and see what happens.
1
class WelcomeController < ApplicationController
2
  def index
3
    @image_url = @imagekitio.url({
4
      path: 'default-image.jpg',
5
      transformation: [
6
      {
7
        rt: 90,
8
      },
9
      {
10
        height: "300",
11
        width: "200",
12
      },
13
    ],
14
    })
15
  end
16
end
Copied!
Chained Transformation URL:
1
https://ik.imagekit.io/violetviolinist/tr:rt-90:h-300,w-200/default-image.jpg?ik-sdk-version=ruby-1.0.5
Copied!
Output Image:
Rotated, then resized
Adding overlays to images in Ruby on Rails
ImageKit.io allows you to add text and image overlay dynamically.
Text overlay
Text overlay can be used to superimpose text on an image. For example:
1
class WelcomeController < ApplicationController
2
  def index
3
    @image_url = @imagekitio.url({
4
      path: 'default-image.jpg',
5
      transformation: [{
6
        height: "300",
7
        width: "300",
8
        overlay_text: 'ImageKit',
9
        overlay_text_font_size: 50,
10
        overlay_text_color: '0651D5',
11
      }],
12
    })
13
  end
14
end
Copied!
Transformation URL:
1
https://ik.imagekit.io/violetviolinist/tr:h-300,w-300,ot-ImageKit,ots-50,otc-0651D5/default-image.jpg?ik-sdk-version=ruby-1.0.5
Copied!
Output Image:
Text Overlay (300px * 300px)
Image overlay
Image overlay can be used to superimpose an image on another image. For example, we will upload a while logo image on this link into our account and use it for the overlay image.
Base Image: default-image.jpg
Overlay Image: overlay-image.png
1
class WelcomeController < ApplicationController
2
  def index
3
    @image_url = @imagekitio.url({
4
      path: 'default-image.jpg',
5
      transformation: [{
6
        height: "300",
7
        width: "300",
8
        overlay_image: "overlay-image.png"
9
      }],
10
    })
11
  end
12
end
Copied!
Transformation URL:
1
https://ik.imagekit.io/violetviolinist/tr:h-300,w-300,oi-overlay-image.png/default-image.jpg?ik-sdk-version=ruby-1.0.6
Copied!
Output Image:
Overlay image over another image
Secure signed URL generation
You can use the SDK to generate a signed URL of an image, that expires in a given number of seconds.
1
# app/controllers/welcome_controller.rb
2
​
3
def signed_url
4
  @signed_image_url = @imagekitio.url({
5
    path: 'default-image.jpg',
6
    signed: true,
7
    expire_seconds: 10,
8
  })
9
end
Copied!
1
# config/routes.rb
2
​
3
get 'welcome/signed_url'
Copied!
1
# app/controllers/views/welcome/signed_url.html.erb
2
​
3
<span>
4
    <%= @signed_image_url %>
5
</span>
Copied!
The above snippets create a signed URL with an expiry time of 10 seconds.
Signed URL generation
Uploading file in Ruby on Rails application
There are two different methods of uploading a file to your ImageKit Media Library:
1.
Direct image upload.
2.
Attaching the image to a model using CarrierWave.
Direct image upload
First, add the following code to app/views/welcome/index.html.erb:
1
<h3>File Upload</h3>
2
<%= form_with(url: {action: :upload}, multipart: true) do %>
3
    <%= file_field_tag 'picture' %>
4
    <%= submit_tag "Upload" %>
5
<% end %>
6
​
7
<br>
8
​
9
<% flash.each do |name, msg| %>
10
    <%= content_tag :div, msg, class: "alert alert-info" %>
11
<% end %>
Copied!
This creates a simple form with a file upload field and a submit button. The form submits the file to the path /welcome/upload. We need to add this path to our routes. Go to config/routes.rb, and add the following line:
1
post 'welcome/upload'
Copied!
Now, we have the route and the HTML markup set up to submit a file for uploading. Let's introduce the controller action 'welcome#upload' to receive the file and upload it to the Media Library. Go to app/controllers/welcome_controller.rb, and add the following method:
1
def upload
2
    uploaded_file = params[:picture]
3
    output = @imagekitio.upload_file
4
    (
5
        file = uploaded_file, # required
6
        file_name= "new_file.jpg",  # required
7
        options= {response_fields: 'tags', tags: ["hello"]}
8
    )
9
    if output[:error]
10
        redirect_to "/", notice: "There was some problem uploading your image"
11
    else
12
        redirect_to "/", notice: "Your image has been uploaded successfully with the name of #{output[:response]["name"]}"    end
13
end
Copied!
Here, we first extract the file from the :picture property of the params object, and then upload the file to our Media Library by the name of new_file.jpg, using the upload_file() API. We also attach an example tag 'hello' to the image.
Now, refresh the home page, and you should see the upload field.
​
​
Select an image/file from your local computer, and click on the Upload button. A success message shall flash below the file field.
Your image has been uploaded successfully with the name <NAME_OF_FILE>
Now, after upload, if you go to the Media Library section of your ImageKit dashboard, you should see the newly uploaded image.
If you get an authentication error during upload, verify that the API keys are configured correctly.
Fetching uploaded file
Fetch the uploaded image and display it in the UI by adding this line to your app/views/welcome/index.html.erb.
1
<%= image_tag "https://ik.imagekit.io/<YOUR_IMAGEKIT_ID>/<FILE_NAME>" %>
Copied!
The app should render your uploaded image correctly.
Attaching the image to a model (using CarrierWave)
You can attach an image as an attribute of one of your models, making it convenient to write a model-oriented code. This method uses the CarrierWave gem, which is a dependency of the imagekitio gem.

First, add the following configurations to config/environments/development.rb and config/environments/production.rb
1
config.imagekit = 
2
{
3
  private_key: "<your-private-key>",
4
  public_key: "<your-public-key>",
5
  url_endpoint: "<endpoint-url>"
6
}
Copied!
Next, we'll create an entity called an uploader.
1
rails g uploader <Uploading_attribute_name>
2
# For example if you want to create uploader for Picture attribute then use
3
rails g uploader Picture
4
# Generated uploader's path will be app/uploaders/picture_uploader.rb
Copied!
Now, go to the generated uploader file - app/uploaders/<name>_uploader.eb, and enter the following code. The options configuration is optional.
1
# Set store as imagekit_store
2
storage :imagekit_store
3
​
4
# If you want to add uploading options then create this method inside uploader file as an example
5
​
6
def options
7
    options = 
8
    {
9
        response_fields: 'isPrivateFile, tags',
10
        tags: ["Rails SDK uploads"],
11
        use_unique_file_name: false,
12
        folder: "your_directory/"
13
    }
14
end
15
​
16
# If you want to set upload dir then you can use following method or you can also use options method.
17
# This method shuld return string
18
def store_dir
19
    "your_directory/"
20
end
Copied!
Now, we generate a model and give it a picture attribute, which will be an image. If you already have a model in your project, you can simply add the attribute to the existing model.
1
rails generate model Post
Copied!
Now go to the model file - app/models/post.rb, and add the following lines:
1
class Post < ApplicationRecord
2
    attr_accessor :picture
3
    mount_uploader :picture, PictureUploader
4
end
Copied!
You are free to change the name of the attribute from :picture to something else.
Perform the database migrations. This will add two columns - title, picture to the Posts table of our database.
1
rails g migration AddPictureToPosts picture:string
2
rails g migration AddTitleToPosts title:string
3
rails db:migrate
Copied!
Now, create another controller named after the model. For example, we'll create a controller called Post.
1
rails generate controller Posts
Copied!
Now, go to app/controllers/posts_controller.rb, and add the following methods:
1
class PostsController < ApplicationController
2
    def index
3
        @posts = Post.all
4
    end
5
    def show
6
        @post = Post.find params[:id]
7
    end
8
​
9
    def new
10
        @post = Post.new
11
    end
12
​
13
    def create
14
        @post = Post.new post_params
15
        if @post.save
16
            redirect_to @post
17
        else
18
            render 'new'
19
        end
20
    end
21
​
22
    def post_params
23
        params.require(:post).permit(:title, :picture)
24
    end
25
end
Copied!
Here, we create standard methods to show all posts, show a single post, and create a new post. These methods will have to be accompanied by some HTML markup as well. So go to app/views/posts/, and add the following files
index.html.erb
1
<%= @posts.each do |post| %>
2
    <div class="post">
3
        <div class="image">
4
            <%= image_tag post.picture.url %>
5
        </div>
6
        <div class="content">
7
            <%= link_to "#{post.title}", post_path(post), class: "header" %>
8
        </div>
9
    </div>
10
<% end %>
11
<%= link_to 'Back', posts_path %>
Copied!
new.html.erb
1
<%= form_with model: @post do |form| %>
2
​
3
    <%= label_tag(:title, "Enter title of post") %>
4
    <%= form.text_field :title %>
5
    
6
    <%= label_tag(:picture, "Upload a picture") %>
7
    <%= form.file_field :picture %>
8
    
9
    <%= submit_tag "Submit" %>
10
<% end %>
11
​
12
<%= link_to 'Back', posts_path %>
Copied!
show.html.erb
1
<div class="post">
2
    <div class="image">
3
        <%= image_tag @post.picture.url %>
4
    </div>
5
    <div class="content">
6
        <%= link_to "#{@post.title}", post_path(@post), class: "header" %>
7
    </div>
8
</div>
9
<%= link_to 'Back', posts_path %>
Copied!
Now, restart the server and go to http://localhost:3000/posts/new. You should see two form fields, for title, and picture. Enter a text value for the title field, and upload an image/file for the picture field, and click on Submit. This should redirect you to http://localhost:3000/posts/1, displaying the title and the image.
This sums up how you can upload images to your Media Library using the SDK. The second method is more suited for RESTful applications with CRUD operations where the image is an attribute of a resource.
Authentication parameter generation
You can use the SDK to generate authentication parameters that are required if you want to implement client-side upload functionality using javascript or some front-end framework.
1
# app/controllers/welcome_controller.rb
2
​
3
def auth_params
4
  @auth_params = @imagekitio.get_authentication_parameters()
5
end
Copied!
1
# config/routes.rb
2
​
3
get 'welcome/auth_params'
Copied!
1
# app/views/welcome/auth_parameters.html.erb
2
​
3
<div>
4
    <%= @auth_params %>
5
</div>
Copied!
The get_authentication_parameters(token = nil, expire = nil)  takes two optional arguments, token, and expire. token defaults to a random string if not provided. expire defaults to infinite. 
You should see an output like this:
1
{    
2
    :token=>"6b4d79e5-eb36-4de0-8ef5-534c88e45ebf",
3
    :expire=>1600957501,
4
    :signature=>"4c19c4066a140921eddaff7aaa3625df2bf8182a"
5
}
Copied!
What's next
The possibilities for image manipulation and optimization with ImageKit are endless. Learn more about it here: 
​Image Transformations​
​Image optimization​
​Media Library​
​Performance monitoring​
React Native
Vue.js
Last modified 24d ago
Copy link
Contents
Setting up ImageKit Ruby SDK
Rendering images in Ruby on Rails
Common image manipulation in Ruby on Rails
Height and width manipulation
Chained transformation
Adding overlays to images in Ruby on Rails
Secure signed URL generation
Uploading file in Ruby on Rails application
Direct image upload
Attaching the image to a model (using CarrierWave)
Authentication parameter generation
What's next