Plain Ruby

This is a quick start guide to show how to integrate ImageKit in a Ruby application using the ImageKit Ruby SDK. The code samples covered here are hosted on Github.

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.

Copy

gem install imagekitio

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:

Copy

require 'imagekitio'

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)

Copy

public_key = 'your_public_key'
private_key = 'your_private_key'
url_endpoint = 'your_url_endpoint' # https://ik.imagekit.io/your_imagekit_id

imagekitio = ImageKitIo::Client.new(private_key, public_key, url_endpoint)

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:

Copy

upload = imagekitio.upload_file(
    file: "https://file-examples.com/wp-content/uploads/2017/10/file_example_JPG_100kB.jpg",
    file_name: "testing",
    response_fields: 'tags,customCoordinates,isPrivateFile,metadata',
    tags: %w[abc def],
    transformation: {
        pre: 'l-text,i-Imagekit,fs-50,l-end',
        post: [
            {
                type: 'transformation',
                value: 'w-100'
            }
        ]
    }
)
puts "upload remote file => ", upload

The output should like this:

Copy

upload remote file => 
{: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}

Congratulation file uploaded successfully.

Rendering images in Ruby app

Here, declare a variable to store the image URL generated by the SDK. Like this:

Copy

image_url = imagekitio.url({
   path: 'default-image.jpg',
})

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:

Let’s now learn how to manipulate images using image 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:

Copy

image_url = imagekitio.url({
  path: 'default-image.jpg',
  transformation: [{
     height: "200",
     width: "200",
   }]
})

Transformation URL:

Copy

https://ik.imagekit.io/demo/tr:h-200,w-200/default-image.jpg?ik-sdk-version=ruby-1.0.6

Refresh your browser with new URL to get the resized image.

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:

Copy

image_url = imagekitio.url({
  path: 'default-image.jpg',
  transformation: [{
    height: "300",
    width: "200",
  }]
})

Transformation URL:

Copy

https://ik.imagekit.io/demo/tr:h-300,w-200/default-image.jpg?ik-sdk-version=ruby-1.0.5

Output Image:

Now, rotate the image by 90 degrees.

Copy

image_url = imagekitio.url({
  path: 'default-image.jpg',
  transformation: [
  {
    height: "300",
    width: "200",
  },
  {
    rt: 90,
  }],
})

Chained Transformation URL:

Copy

https://ik.imagekit.io/demo/tr:h-300,w-200:rt-90/default-image.jpg?ik-sdk-version=ruby-1.0.5

Output Image:

Let’s flip the order of transformation and see what happens.

Copy

image_url = imagekitio.url({
  path: 'default-image.jpg',
  transformation: [
  {
    rt: 90,
  },
  {
    height: "300",
    width: "200",
  }],
})

Chained Transformation URL:

Copy

https://ik.imagekit.io/demo/tr:rt-90:h-300,w-200/default-image.jpg?ik-sdk-version=ruby-1.0.5

Output Image:

Adding overlays

ImageKit.io enables you to apply overlays to images and videos using the raw parameter with the concept of layers. The raw parameter facilitates incorporating transformations directly in the URL. A layer is a distinct type of transformation that allows you to define an asset to serve as an overlay, along with its positioning and additional transformations.

Text as overlays

You can add any text string over a base video or image using a text layer (l-text).

For example:

Copy

image_url = imagekit.url({
    path: "/default-image",
    url_endpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
    transformation: [{
        height: "300",
        width: "400",
        raw: "l-text,i-Imagekit,fs-50,l-end"
    }],
})

Sample Result URL

Copy

https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-text,i-Imagekit,fs-50,l-end/default-image.jpg

Output Image:

Image as overlays

You can add an image over a base video or image using an image layer (l-image).

For example:

Copy

image_url = imagekit.url({
    path: "/default-image",
    url_endpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
    transformation: [{
        height: "300",
        width: "400",
        raw: "l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end"
    }],
})

Sample Result URL

Copy

https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-default-image.jpg,w-100,b-10_CDDC39,l-end/default-image.jpg

Output Image:

Solid color blocks as overlays

You can add solid color blocks over a base video or image using an image layer (l-image).

For example:

Copy

image_url = imagekit.url({
    path: "/default-image.jpg",
    url_endpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
    transformation: [{
        height: "300",
        width: "400",
        raw: "l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end"
    }],
})

Sample Result URL

Copy

https://ik.imagekit.io/your_imagekit_id/tr:h-300,w-400,l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end/default-image.jpg

Output 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.

Copy

signed_image_url = imagekitio.url({
  path: 'default-image.jpg',
  signed: true,
  expire_seconds: 10,
})

The above snippets create a signed URL with an expiry time of 10 seconds.