Skip to main content

Updating custom Cloudinary image URLs to ImageKit (face focus & cropping)

How to convert custom Cloudinary image transformation URLs (for example face-focused cropping in Card components) to the ImageKit format Glide now uses.

What changed

Glide has migrated image delivery from Cloudinary to ImageKit.io across all plans. For most apps, this is invisible. However, if you built your own image URLs by hand (for example, in a Template or If > Then > Else column to auto-focus on faces) using the res.cloudinary.com/glide/image/fetch/... format, some of those custom URLs may stop displaying in your published app. They often still open in a browser or in the Builder, which can make the problem look inconsistent.

This guide shows how to convert those custom URLs to the ImageKit format.

Quick fix

A Cloudinary fetch URL looks like this:

https://res.cloudinary.com/glide/image/fetch/TRANSFORMS/IMAGE_URL

The ImageKit equivalent looks like this:

https://ik.imagekit.io/glideapps/fetch/tr:TRANSFORMS/IMAGE_URL

To convert a URL:

  1. Replace https://res.cloudinary.com/glide/image/fetch/ with https://ik.imagekit.io/glideapps/fetch/tr:

  2. Convert each transformation token using the table below (keep them comma-separated).

  3. Leave the image URL at the end unchanged.

Example: face focus and cropping

This is the most common custom recipe. The old Cloudinary version was:

https://res.cloudinary.com/glide/image/fetch/c_thumb,g_faces/{IMAGE}

How you convert it depends on your photos:

Single person (tight, face-centered square):

https://ik.imagekit.io/glideapps/fetch/tr:w-500,h-500,fo-face/{IMAGE}

Photos that may contain more than one person (resize only, keep everyone in frame):

https://ik.imagekit.io/glideapps/fetch/tr:w-500,c-at_max/{IMAGE}

Replace {IMAGE} with your photo URL, exactly as you did before. Adjust w-500 / h-500 to suit your layout.

Supported transformation tokens

Cloudinary

ImageKit

What it does

w_500

w-500

Width in pixels

h_500

h-500

Height in pixels

c_limit

c-at_max

Scale down to fit, never upscale, no cropping

c_fill / c_lfill

(omit)

ImageKit crops to fill automatically when both width and height are set

g_faces

fo-face

Focus the crop on a detected face

g_center

fo-center

Focus the crop on the center

f_auto / q_auto

(omit)

ImageKit optimizes format and quality automatically

f_jpg / f_png / f_webp / f_avif

f-jpg / f-png / f-webp / f-avif

Force a specific output format

Important limitations

  • Only the tokens above are supported. Any other Cloudinary token (for example c_thumb, c_crop, c_scale, c_pad, the singular g_face, effects like e_..., or radius like r_...) will not convert, and the image will fail to load. Rebuild the URL using only the supported tokens.

  • Use fo-face, not fo-auto. ImageKit's fo-auto is not supported by Glide's image delivery and will break the image. Only fo-face and fo-center work for focus.

  • Focus only applies when the image is actually cropped. For fo-face to take effect, you must set both a width (w-) and a height (h-). With only one dimension, the image is resized rather than cropped, so focus has no visible effect.

  • Face focus targets a single person. fo-face Zooms to the most prominent face in the image, so a square crop of a group photo will cut other people out. For photos that may contain more than one person, use a resize-only recipe (w-500,c-at_max) so everyone stays in frame.

Simplest and most future-proof option

If you only need the image resized to fit your component, you do not need a custom URL at all. Point the field directly at the plain photo URL and let the Card component size it. This avoids hardcoding any CDN URL and keeps your app insulated from future changes to image delivery.

Did this answer your question?