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
- Upload images
- Rendering images
- Applying common image manipulations
- Secure signed URL generation
- Adding overlays
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:
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:
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.