CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-contentful

Client for Contentful's Content Delivery API

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

assets.mddocs/

Asset Management

Asset retrieval and management for accessing binary files, images, videos, and other media stored in Contentful with comprehensive metadata and file information.

Capabilities

Get Single Asset

Fetches a single asset by its ID with optional query parameters.

/**
 * Fetches an asset by ID
 * @param id - The asset's ID
 * @param query - Object with search parameters
 * @returns Promise for an asset
 */
getAsset<Locales extends LocaleCode = LocaleCode>(
  id: string,
  query?: AssetQueries<Modifiers>
): Promise<Asset<Modifiers, Locales>>;

interface AssetQueries<Modifiers> {
  /** Specify the locale for the asset */
  locale?: string;
  /** Select specific fields to return */
  select?: string;
}

Usage Examples:

// Basic asset retrieval
const asset = await client.getAsset("asset-id");
console.log(asset.fields.title);
console.log(asset.fields.file.url);

// Get asset in specific locale
const localizedAsset = await client.getAsset("asset-id", {
  locale: "fr-FR"
});

// Get only specific asset fields
const assetPartial = await client.getAsset("asset-id", {
  select: "fields.title,fields.file.url"
});

Get Multiple Assets

Fetches a collection of assets with filtering and querying capabilities.

/**
 * Fetches a collection of assets with optional queries
 * @param query - Object with search parameters
 * @returns Promise for a collection of assets
 */
getAssets<Locales extends LocaleCode = LocaleCode>(
  query?: AssetsQueries<AssetFields, Modifiers>
): Promise<AssetCollection<Modifiers, Locales>>;

interface AssetsQueries<Fields, Modifiers> {
  /** Limit number of results (max: 1000) */
  limit?: number;
  /** Skip assets for pagination */
  skip?: number;
  /** Order results by field */
  order?: string;
  /** Specify locale */
  locale?: string;
  /** Select specific fields */
  select?: string;
  /** Search in asset fields */
  query?: string;
  /** Filter by MIME type group */
  mimetype_group?: AssetMimeType;
  /** Filter by asset fields */
  [key: `fields.${string}`]: any;
  /** Filter by system properties */
  [key: `sys.${string}`]: any;
}

type AssetMimeType =
  | 'attachment'
  | 'plaintext'
  | 'image'
  | 'audio'
  | 'video'
  | 'richtext'
  | 'presentation'
  | 'spreadsheet'
  | 'pdfdocument'
  | 'archive'
  | 'code'
  | 'markup';

Usage Examples:

// Get all assets
const allAssets = await client.getAssets();

// Get images only
const images = await client.getAssets({
  mimetype_group: "image"
});

// Search assets by title
const searchResults = await client.getAssets({
  query: "logo",
  order: "-sys.createdAt",
  limit: 10
});

// Filter by file type
const pdfDocuments = await client.getAssets({
  "fields.file.contentType": "application/pdf"
});

// Filter by size
const largeImages = await client.getAssets({
  mimetype_group: "image",
  "fields.file.details.size[gte]": 1000000 // >= 1MB
});

Create Asset Key

Creates an asset key for signing asset URLs, particularly useful for embargoed assets.

/**
 * Creates an asset key for signing asset URLs
 * @param expiresAt - UNIX timestamp when the key expires
 * @returns Promise for an asset key
 */
createAssetKey(expiresAt: number): Promise<AssetKey>;

interface AssetKey {
  policy: string;
  secret: string;
}

Usage Example:

// Create asset key that expires in 1 hour
const expiresAt = Math.floor(Date.now() / 1000) + 3600;
const assetKey = await client.createAssetKey(expiresAt);

// Use the key to sign asset URLs
const signedUrl = `${asset.fields.file.url}?policy=${assetKey.policy}&signature=${assetKey.secret}`;

Asset Types

Asset Structure

interface Asset<
  Modifiers extends ChainModifiers = ChainModifiers,
  Locales extends LocaleCode = LocaleCode
> {
  sys: AssetSys;
  fields: ChainModifiers extends Modifiers
    ? AssetFields | LocalizedAssetFields<Locales>
    : 'WITH_ALL_LOCALES' extends Modifiers
      ? LocalizedAssetFields<Locales>
      : AssetFields;
  metadata: Metadata;
}

type AssetSys = EntitySys & {
  type: 'Asset';
};

interface AssetFields {
  /** Asset title */
  title?: string;
  /** Asset description */
  description?: string;
  /** File information and URL */
  file?: AssetFile;
}

type LocalizedAssetFields<Locales extends LocaleCode> = {
  [FieldName in keyof AssetFields]: {
    [LocaleName in Locales]?: AssetFields[FieldName];
  };
};

type AssetCollection<
  Modifiers extends ChainModifiers = ChainModifiers,
  Locales extends LocaleCode = LocaleCode
> = ContentfulCollection<Asset<Modifiers, Locales>>;

Asset File Information

interface AssetFile {
  /** Direct URL to the asset file */
  url: string;
  /** File metadata and dimensions */
  details: AssetDetails;
  /** Original filename */
  fileName: string;
  /** MIME content type */
  contentType: string;
}

interface AssetDetails {
  /** File size in bytes */
  size: number;
  /** Image dimensions (for image assets) */
  image?: {
    width: number;
    height: number;
  };
}

Working with Assets

Image Asset Manipulation

// Get image asset
const imageAsset = await client.getAsset("image-asset-id");
const imageFile = imageAsset.fields.file;

console.log(`Image URL: ${imageFile.url}`);
console.log(`Dimensions: ${imageFile.details.image.width}x${imageFile.details.image.height}`);
console.log(`File size: ${imageFile.details.size} bytes`);

// Use Contentful's Image API for transformations
const thumbnailUrl = `${imageFile.url}?w=200&h=200&fit=fill`;
const webpUrl = `${imageFile.url}?fm=webp&q=80`;
const blurredUrl = `${imageFile.url}?blur=50`;

File Type Detection

// Check asset type by MIME type
const asset = await client.getAsset("asset-id");
const contentType = asset.fields.file.contentType;

function getAssetType(contentType: string): string {
  if (contentType.startsWith('image/')) return 'image';
  if (contentType.startsWith('video/')) return 'video';
  if (contentType.startsWith('audio/')) return 'audio';
  if (contentType === 'application/pdf') return 'pdf';
  return 'file';
}

const assetType = getAssetType(contentType);
console.log(`Asset type: ${assetType}`);

Filtering Assets by Type

// Get only images
const images = await client.getAssets({
  mimetype_group: "image"
});

// Get specific image formats
const jpegImages = await client.getAssets({
  "fields.file.contentType": "image/jpeg"
});

// Get videos
const videos = await client.getAssets({
  mimetype_group: "video"
});

// Get documents
const documents = await client.getAssets({
  mimetype_group: "pdfdocument"
});

Asset URL Construction

// Build asset URLs with transformations
function buildAssetUrl(asset: Asset, transformations: Record<string, string | number> = {}): string {
  const baseUrl = asset.fields.file.url;
  
  if (Object.keys(transformations).length === 0) {
    return baseUrl;
  }
  
  const params = new URLSearchParams();
  Object.entries(transformations).forEach(([key, value]) => {
    params.append(key, String(value));
  });
  
  return `${baseUrl}?${params.toString()}`;
}

// Usage examples
const asset = await client.getAsset("image-id");

const thumbnail = buildAssetUrl(asset, { w: 150, h: 150, fit: 'fill' });
const optimized = buildAssetUrl(asset, { fm: 'webp', q: 75 });
const progressive = buildAssetUrl(asset, { fl: 'progressive' });

Localized Assets

// Using withAllLocales modifier for multi-language assets
const allLocalesClient = client.withAllLocales;
const localizedAsset = await allLocalesClient.getAsset("asset-id");

// Access localized asset fields
console.log(localizedAsset.fields.title['en-US']); // English title
console.log(localizedAsset.fields.title['fr-FR']); // French title
console.log(localizedAsset.fields.description['de-DE']); // German description

// Check if asset has file in specific locale
if (localizedAsset.fields.file['en-US']) {
  console.log('English file URL:', localizedAsset.fields.file['en-US'].url);
}

Asset Metadata and Tags

// Access asset metadata
const asset = await client.getAsset("asset-id");

// Check asset tags
asset.metadata.tags.forEach(tag => {
  console.log('Tag ID:', tag.sys.id);
});

// Access asset system information
console.log('Created:', asset.sys.createdAt);
console.log('Updated:', asset.sys.updatedAt);
console.log('Revision:', asset.sys.revision);
console.log('Space:', asset.sys.space.sys.id);
console.log('Environment:', asset.sys.environment.sys.id);

docs

assets.md

client.md

entries.md

index.md

querying.md

space-content-types.md

sync.md

tags-taxonomy.md

tile.json