Plain Ruby
Real-time image resizing, automatic optimization, and file uploading in Ruby application using ImageKit.io.
This is a quick start guide to show you how to integrate ImageKit in the Ruby application. The code samples covered here are hosted on Github - https://github.com/imagekit-samples/quickstart/tree/master/ruby/ruby_app.
This guide walks you through the following topics:

Setting up ImageKit Ruby SDK

We will create a fresh Ruby application for this tutorial and work with it.
First, we will install the imagekitio gem in our machine by executing the following command on your terminal.
1
gem install imagekitio
Copied!
It will download the latest version(ie. >= 2) of imagekitio sdk gem in our machine. Now let's create a new file app.rb and begin to write code in it. Open the new app.rb file with your favorite editor.
We are going to require the gem imagekitio at the top of the file as follow:
1
require 'imagekitio'
Copied!
It loads the imagekitio gem in our application. 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.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
public_key = 'your_public_key'
2
private_key = 'your_private_key'
3
url_endpoint = 'your_url_endpoint' # https://ik.imagekit.io/your_imagekit_id
4
5
imagekitio = ImageKitIo::Client.new(private_key, public_key, url_endpoint)
Copied!
The imagekitio client is configured with user-specific credentials.

Uploading images in Ruby app

There are different ways to upload the file in imagekitio. Let's upload the remote file to imagekitio using the following code:
1
upload = imagekitio.upload_file(
2
file: "https://file-examples.com/wp-content/uploads/2017/10/file_example_JPG_100kB.jpg",
3
file_name: "testing",
4
response_fields: 'tags,customCoordinates,isPrivateFile,metadata',
5
tags: %w[abc def],
6
)
7
puts "upload remote file => ", upload
Copied!
The output should like this:
1
upload remote file =>
2
{:response=>{"fileId"=>"61a87b98dfsc0486be6e2741a", "name"=>"testing.jpg", "size"=>102117, "filePath"=>"/testing.jpg", "url"=>"https://ik.imagekit.io/demo/testing.jpg", "fileType"=>"image", "height"=>700, "width"=>1050, "thumbnailUrl"=>"https://ik.imagekit.io/demo/tr:n-media_library_thumbnail/testing.jpg", "tags"=>["abc", "def"], "AITags"=>nil, "isPrivateFile"=>true, "customCoordinates"=>nil, "metadata"=>{"height"=>700, "width"=>1050, "size"=>102117, "format"=>"jpg", "hasColorProfile"=>true, "quality"=>0, "density"=>72, "hasTransparency"=>false, "exif"=>{}, "pHash"=>"902d9df1fc74367"}}, :error=>nil}
Copied!
Congratulation file uploaded successfully.

Rendering images in Ruby app

Here, declare a variable to store the image URL generated by the SDK. Like this:
1
image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
})
Copied!
Now, image_url has the URL https://ik.imagekit.io/<your_imagekit_id>/default-image.jpg stored in it. This fetches the image from the URL stored in image_url.
open the url on browser, it should now display this default image in its full size:
Image in its original dimensions (1000px * 1000px)

Common image manipulation in Ruby App

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
image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
transformation: [{
4
height: "200",
5
width: "200",
6
}]
7
})
Copied!
Transformation URL:
1
https://ik.imagekit.io/demo/tr:h-200,w-200/default-image.jpg?ik-sdk-version=ruby-1.0.6
Copied!
Refresh your browser with new url 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
image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
transformation: [{
4
height: "300",
5
width: "200",
6
}]
7
})
Copied!
Transformation URL:
1
https://ik.imagekit.io/demo/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
image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
transformation: [
4
{
5
height: "300",
6
width: "200",
7
},
8
{
9
rt: 90,
10
}],
11
})
Copied!
Chained Transformation URL:
1
https://ik.imagekit.io/demo/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
image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
transformation: [
4
{
5
rt: 90,
6
},
7
{
8
height: "300",
9
width: "200",
10
}],
11
})
Copied!
Chained Transformation URL:
1
https://ik.imagekit.io/demo/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 App

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
image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
transformation: [{
4
height: "300",
5
width: "300",
6
overlay_text: 'ImageKit',
7
overlay_text_font_size: 50,
8
overlay_text_color: '0651D5',
9
}],
10
})
Copied!
Transformation URL:
1
https://ik.imagekit.io/demo/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: logo-white_SJwqB4Nfe.png
1
image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
transformation: [{
4
height: "300",
5
width: "300",
6
overlay_image: "logo-white_SJwqB4Nfe.png"
7
}],
8
})
Copied!
Transformation URL:
1
https://ik.imagekit.io/demo/tr:h-300,w-300,oi-logo-white_SJwqB4Nfe.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
signed_image_url = imagekitio.url({
2
path: 'default-image.jpg',
3
signed: true,
4
expire_seconds: 10,
5
})
Copied!
The above snippets create a signed URL with an expiry time of 10 seconds.
Signed URL generation

What's next

The possibilities for image manipulation and optimization with ImageKit are endless. Learn more about it here: