Cloudinary

Cloudinary delivers and transforms images, audio, video, and documents. Every public API asset is stored there, so you can build an optimised delivery URL directly from its Directus ID.

Access to all assets is public. If you know the ID assigned by Directus, you can construct the Cloudinary URL and request the file without authentication.

Construct an asset URL

All assets use the following structure:

• Cloud name: onderwijsin
• Base folder: onderwijsloket-directus/production
• Public ID format: onderwijsloket-directus/production/{ID assigned by Directus}

Use Cloudinary’s standard delivery URL format, without including a version segment:

https://res.cloudinary.com/onderwijsin/{asset_type}/upload/{public_id}

Where:

Apply common transformations

Cloudinary supports on-the-fly transformations for images, video, and audio. Transformations are expressed as comma-separated parameters placed between the upload/ segment and the public ID. Multiple transformations can be combined in a single request. Some basic examples are given below.

Transform images

• Resize and crop:
  w_800,h_600,c_fill
• Automatic format and quality:
  f_auto,q_auto
• Convert to WebP:
  f_webp

Transform video

• Resize:
  w_1280
• Trim video:
  so_3,du_5
• Convert format:
  f_mp4

Transform audio

• Convert to MP3:
  f_mp3
• Set bitrate:
  br_128k
• Set codec:
  ac_aac

Choose an integration approach

Cloudinary provides SDKs and integrations for many common frameworks. Typical integration patterns include:

• Client-side rendering with URL-based transformations (React, Vue, Next.js).
• Server-side helpers for building transformation URLs (Node.js, PHP, Python, Ruby).
• Automatic optimization via framework plugins (Next.js Image component, Nuxt modules).
• Media players that accept Cloudinary URLs directly for audio and video streaming.

Since all assets are public and use predictable URLs, most integrations only require constructing the URL from the ID assigned by Directus and adding any desired transformations.

Continue with Cloudinary documentation

• URL Structure and Delivery Types
• Image Transformations
• Video Transformations
• Audio Transformations
• SDKs and Framework Integrations