Editing website images using Thumbor

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 startedGetting started

Prepare the infrastructurePrepare the infrastructure

Install additional dependenciesInstall 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 ManagerAdd 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 ThumborInstall 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 testingPrepare images for Thumbor testing

1. Download images:

   • poster_rodents_bunnysize.jpg
   • poster_bunny_bunnysize.jpg
   • cc.xlarge.png (Creative Commons logo)

2. Upload the images to the bucket:

   Manually

   Terraform

   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 CDNConfigure 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 resultCheck 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.

Delete the resources you createdDelete the resources you created

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