Plain Ruby

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​
​Upload images​
​Rendering images​
​Applying common image manipulations​
​Secure signed URL generation​
​Adding overlays to images​
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:
​Image Transformations​
​Image optimization​
​Media Library​
​Performance monitoring​

Ruby

Ruby on Rails with active_storage

Last modified 2mo ago

Copy link

Contents

Setting up ImageKit Ruby SDK

Uploading images in Ruby app

Rendering images in Ruby app

Common image manipulation in Ruby App

Height and width manipulation

Chained transformation

Adding overlays to images in Ruby App

Secure signed URL generation

What's next