Dyrected
Examples & RecipesApplication Patterns

Integrations

Application patterns that connect content structure to supporting capabilities such as uploads and media collections.

Use these patterns when the content model depends on a supporting capability outside ordinary text and relationships. These are usually the patterns that connect your content schema to media handling, storage, or other infrastructure-backed features.

In Cloud, Dyrected owns the media backend and storage boundary. Use these patterns to model reusable assets and content relationships, but check Cloud plan fit for large media libraries.

Create a media upload collection

Problem: editors need a proper place to upload and manage files instead of scattering media fields across unrelated documents.

This pattern creates a dedicated upload collection with file rules and supporting metadata fields. It is the usual starting point for image libraries, downloadable assets, and any project where media needs to be reused across multiple records.

Example implementation

import { defineCollection, defineTextField, defineTextareaField } from "@dyrected/core";

export const Media = defineCollection({
  slug: "media",
  upload: {
    allowedMimeTypes: ["image/jpeg", "image/png", "image/webp"],
    maxFileSize: 10 * 1024 * 1024,
  },
  fields: [
    defineTextField({ name: "alt", label: "Alternative text", required: true }),
    defineTextareaField({ name: "caption", label: "Caption" }),
  ],
});

Read the full docs:

Create a document download library

Problem: editors need a dedicated place to manage downloadable files instead of attaching them ad hoc across many records.

This pattern uses an upload collection for PDFs and office documents, with shared metadata that can be reused anywhere in the site or app. It works well for brochures, reports, onboarding packs, and gated resources.

Example implementation

import { defineCollection, defineTextField, defineTextareaField } from "@dyrected/core";

export const Documents = defineCollection({
  slug: "documents",
  admin: { useAsTitle: "title" },
  upload: {
    allowedMimeTypes: [
      "application/pdf",
      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    ],
    maxFileSize: 20 * 1024 * 1024,
  },
  fields: [
    defineTextField({ name: "title", label: "Title", required: true }),
    defineTextareaField({ name: "summary", label: "Summary" }),
  ],
});

Read the full docs:

Create a responsive image library

Problem: editors need one reusable image library, but the frontend also needs predictable derived sizes for cards, hero sections, and thumbnails.

This pattern defines generated upload sizes and a dedicated admin thumbnail so one source image can support multiple frontend layouts cleanly. It is a strong default for marketing sites, media-heavy dashboards, and content teams that reuse the same assets often.

Example implementation

import { defineCollection, defineTextField, defineTextareaField } from "@dyrected/core";

export const Media = defineCollection({
  slug: "media",
  admin: { useAsTitle: "alt" },
  upload: {
    allowedMimeTypes: ["image/jpeg", "image/png", "image/webp"],
    maxFileSize: 10 * 1024 * 1024,
    adminThumbnail: "card",
    imageSizes: [
      { name: "card", width: 640, height: 480, fit: "cover" },
      { name: "hero", width: 1600, height: 900, fit: "cover" },
    ],
  },
  fields: [
    defineTextField({ name: "alt", label: "Alternative text", required: true }),
    defineTextareaField({ name: "caption", label: "Caption" }),
  ],
});

Read the full docs:

On this page

Dyrected| Cloud

Get your backend ready in minutes

Use a managed database, storage, APIs, and admin dashboard without setting up the infrastructure yourself.

Set Up My Backend