Contact UsGet started
© 2024 Direct Cursus Technology L.L.C.

Editing website images using Thumbor

Written by
Updated at July 4, 2024

Thumbor is an open-source project for on-demand image processing. Thumbor provides basic settings for editing images. For example, you can use it to resize the original image, increase its contrast ratio, or remove the red-eye effect.

Thumbor is a convenient tool you can use to prepare images for websites, e.g., to create thumbnails for video previews. Thumbor supports image caching. This allows you to reduce labor costs for your website support.

In the example below, images are posted to a website and edited using Thumbor. The edit includes resizing and adding a watermark. To upload images faster, a CDN is configured for the website using Yandex Cloud CDN.

To edit images using Thumbor and enable the CDN:

  1. Install Thumbor.
  2. Prepare images for Thumbor testing.
  3. Configure Cloud CDN.
  4. Check the result.

If you no longer need the resources you created, delete them.

Getting started

Prepare the infrastructure

  1. Create service accounts:

    • Service account for resources with the k8s.clusters.agent and vpc.publicAdmin roles for the folder where the Managed Service for Kubernetes cluster is created. This service account will be used to create resources for the Managed Service for Kubernetes cluster.

    • Service account for nodes with the container-registry.images.puller role for the folder with the Docker image registry. The nodes will pull Docker images from the registry on behalf of this account.

      You can use the same service account for both operations.

    • thumbor-sa service account for Thumbor.

  2. Create security groups for the Managed Service for Kubernetes cluster and its node groups.

    Warning

    The configuration of security groups determines the performance and availability of the cluster and the services and applications running in it.

  3. Create a Managed Service for Kubernetes cluster and a node group in any suitable configuration. When creating them, specify the security groups prepared in advance.

  4. Create a bucket in Yandex Object Storage.

  5. Grant the thumbor-sa service account the READ permission for the bucket.

  1. If you do not have Terraform yet, install it.

  2. Get the authentication credentials. You can add them to environment variables or specify them later in the provider configuration file.

  3. Configure and initialize a provider. There is no need to create a provider configuration file manually, you can download it.

  4. Place the configuration file in a separate working directory and specify the parameter values. If you did not add the authentication credentials to environment variables, specify them in the configuration file.

  5. Download the k8s-for-thumbor.tf configuration file to the same working directory.

    This file describes:

    • Network.

    • Subnet.

    • Service accounts for different services:

      • For Managed Service for Kubernetes cluster and node group.
      • For Thumbor.
      • To create Object Storage buckets.

    • Managed Service for Kubernetes cluster.

    • Node group.

    • Security groups which contain rules required for the Managed Service for Kubernetes cluster and its node groups.

      Warning

      The configuration of security groups determines the performance and availability of the cluster and the services and applications running in it.

    • Static access key for bucket creation.

    • Bucket.

  6. In k8s-for-thumbor.tf, specify:

  7. Make sure the Terraform configuration file is correct using this command:

    terraform validate

    If the file contains any errors, Terraform will point them out.

  8. Create an infrastructure:

    1. Run the command to view planned changes:

      terraform plan

      If the resource configuration descriptions are correct, the terminal will display a list of the resources to modify and their parameters. This is a test step. No resources are updated.

    2. If you are happy with the planned changes, apply them:

      1. Run the command:

        terraform apply

      2. Confirm the update of resources.

      3. Wait for the operation to complete.

    All the required resources will be created in the specified folder. You can check resource availability and their settings in the management console.

Install additional dependencies

  1. If you do not have the Yandex Cloud command line interface yet, install and initialize it.

    The folder specified in the CLI profile is used by default. You can specify a different folder using the --folder-name or --folder-id parameter.

  2. Install kubectl and configure it to work with the created cluster.

Add a certificate to Certificate Manager

Certificates from Yandex Certificate Manager are supported. You can issue a new Let's Encrypt® certificate or upload one of your own.

The certificate must be located in the same folder as your CDN resource.

For a Let's Encrypt® certificate, have your rights checked for the domain specified in the certificate.

Install Thumbor

  1. Create a static access key for the thumbor-sa service account and save it to the sa-key.json file:

    yc iam access-key create --service-account-name thumbor-sa \
   --format json > sa-key.json

  2. Install Thumbor with the following parameters:

    • Namespace: thumbor.
    • Application name: thumbor.
    • Bucket name: Bucket to which you uploaded your images.
    • Object Storage static access key: Contents of the sa-key.json file.
    • Unsigned URLs: Allowed.

Prepare images for Thumbor testing

  1. Download images:

  2. Upload the images to the bucket:

    1. In the management console, select the folder to upload an object to.
    2. Select Object Storage.
    3. Click the bucket name.
    4. Click Upload.
    5. In the window that opens, select the required files and click Open.
    6. Click Upload.
    7. Refresh the page.

    In the management console, information about the number of objects in a bucket and the used space is updated with a few minutes' delay.

    You can only upload objects to a bucket after you create it. Therefore, a separate configuration file is used for uploading images.

    1. Download the images-for-thumbor.tf configuration file to the working directory containing the k8s-for-thumbor.tf file. This file describes Object Storage objects, i.e., downloaded images to be uploaded to the bucket.

    2. Specify relative or absolute paths to the images in the images-for-thumbor.tf file. For example, if your images are stored in the same directory as the configuration files, specify:

      • poster_rodents_bunnysize.jpg
      • poster_bunny_bunnysize.jpg
      • cc.xlarge.png

    3. Run the terraform init command in the directory with the configuration files. This command initializes the provider specified in the configuration files and enables you to use the provider resources and data sources.

    4. Make sure the Terraform configuration file is correct using this command:

      terraform validate

      If the file contains any errors, Terraform will point them out.

    5. Start image upload to the bucket:

      1. Run the command to view planned changes:

        terraform plan

        If the resource configuration descriptions are correct, the terminal will display a list of the resources to modify and their parameters. This is a test step. No resources are updated.

      2. If you are happy with the planned changes, apply them:

        1. Run the command:

          terraform apply

        2. Confirm the update of resources.

        3. Wait for the operation to complete.

      All the required resources will be created in the specified folder. You can check resource availability and their settings in the management console.

Configure the CDN

  1. Activate a CDN provider for your folder:

    yc cdn provider activate --type=gcore --folder-id=<folder_ID>

  2. Get the CDN provider's domain name:

    yc cdn resource get-provider-cname

    Result example:

    cname: cl-msa87*****.edgecdn.ru
folder_id: b1g86q4m5vej********

    The domain name is specified in the cname parameter.

  3. Configure a CNAME record for your domain:

    1. Go to your domain's DNS settings on the site of your DNS hosting provider.

    2. Prepare a CNAME record so that it points to the previously copied address on the .edgecdn.ru domain. For example, if the website domain name is cdn.example.com, create a CNAME record or replace an existing one for cdn:

      cdn CNAME cl-msa87*****.edgecdn.ru.

  4. Get Thumbor's external IP address:

    kubectl -n thumbor get svc thumbor \
   -o jsonpath='{.status.loadBalancer.ingress[0].ip}'

  5. Create an origin group in Cloud CDN:

    yc cdn origin-group create \
   --name thumbor \
   --origin source=<Thumbor_IP_address>,enabled=true

    Result example:

    id: "123***"
folder_id: b1g86q4m5vej********
name: thumbor
use_next: true
origins:
  - id: "234****"
    origin_group_id: "345***"
    source: cdn.example.com
    enabled: true

    This will get you the origin group ID in the origin_group_id parameter. You will need this ID in the next step.

  6. Create a CDN resource and connect the origin group to it:

    yc cdn resource create \
   --cname <resource_domain_name> \
   --origin-group-id=<origin_group_ID> \
   --origin-protocol=https \
   --ignore-query-string \
   --cert-manager-ssl-cert-id <certificate_ID> \
   --forward-host-header

    Resource domain name example: cdn.example.com

    Result example:

    id: bc855oumelrq********
folder_id: b1g86q4m5vej********
cname: cdn.example.com
created_at: "2022-01-15T15:13:42.827643Z"
updated_at: "2022-01-15T15:13:42.827671Z"
active: true
options:
  edge_cache_settings:
    enabled: true
    default_value: "345600"
  query_params_options:
    ignore_query_string:
      enabled: true
      value: true
  host_options:
    forward_host_header:
      enabled: true
      value: true
  stale:
    enabled: true
    value:
      - error
      - updating
origin_group_id: "345***"
origin_group_name: thumbor
origin_protocol: HTTPS
ssl_certificate:
  type: CM
  status: CREATING

    It takes 15 to 30 minutes to connect a CDN resource.

Check the result

Open your website at the URL:

  • https://<resource_domain_name>/unsafe/300x400/filters:watermark(cc.xlarge.png,10,-10,80,20)/poster_bunny_bunnysize.jpg
  • https://<resource_domain_name>/unsafe/600x800/filters:watermark(cc.xlarge.png,10,-10,80,20)/poster_bunny_bunnysize.jpg
  • https://<resource_domain_name>/unsafe/400x300/filters:watermark(cc.xlarge.png,-10,10,80,15)/poster_rodents_bunnysize.jpg
  • https://<resource_domain_name>/unsafe/800x600/filters:watermark(cc.xlarge.png,-10,10,80,15)/poster_rodents_bunnysize.jpg

You will see the prepared images of different sizes. Each image carries a Creative Commons watermark.

Note

If the resource is unavailable at the specified URL, make sure that the security groups for the Managed Service for Kubernetes cluster and its node groups are configured correctly. If any rule is missing, add it.

Delete the resources you created

Some resources are not free of charge. To avoid paying for them, delete the resources you no longer need:

  1. In the terminal window, go to the directory containing the infrastructure plan.

  2. Delete the images-for-thumbor.tf configuration file. To delete a bucket, first delete the objects in it.

  3. Check if the changes are correct using this command:

    terraform validate

    If there are any errors in the configuration files, Terraform will point them out.

  4. Confirm updating the resources.

    1. Run the command to view planned changes:

      terraform plan

      If the resource configuration descriptions are correct, the terminal will display a list of the resources to modify and their parameters. This is a test step. No resources are updated.

    2. If you are happy with the planned changes, apply them:

      1. Run the command:

        terraform apply

      2. Confirm the update of resources.

      3. Wait for the operation to complete.

  5. Delete the k8s-for-thumbor.tf configuration file.

  6. Make sure the Terraform configuration files are correct using this command:

    terraform validate

    If there are any errors in the configuration files, Terraform will point them out.

  7. Confirm updating the resources.

    1. Run the command to view planned changes:

      terraform plan

      If the resource configuration descriptions are correct, the terminal will display a list of the resources to modify and their parameters. This is a test step. No resources are updated.

    2. If you are happy with the planned changes, apply them:

      1. Run the command:

        terraform apply

      2. Confirm the update of resources.

      3. Wait for the operation to complete.

    All the resources described in the k8s-for-thumbor.tf configuration file will be deleted.

Previous
Using Metrics Provider to stream metrics
Next
Using Istio