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.

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:

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)

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:

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:

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:

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:

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:

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

Transformation URL:

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:

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

Transformation URL:

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.

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

Chained Transformation URL:

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.

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

Chained Transformation URL:

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:

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

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:

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

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:

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

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.

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.

What's next

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

Last updated