HTML Generation

/**
 * Generate HTML img tag with Cloudinary URL and responsive attributes
 * @param public_id - Public ID of the image
 * @param options - Image tag and transformation options
 * @returns HTML img tag string
 */
function image(public_id: string, options?: ImageTagOptions): string;

interface ImageTagOptions extends TransformationOptions {
  /** Enable responsive image behavior */
  responsive?: boolean;
  /** Enable high DPI support */
  hidpi?: boolean;
  /** Use client hints for optimization */
  client_hints?: boolean;
  /** Responsive placeholder image */
  responsive_placeholder?: string;
  /** Srcset configuration */
  srcset?: {
    breakpoints?: number[];
    sizes?: string;
    transformation?: TransformationOptions;
  };
  /** HTML attributes to add to tag */
  attributes?: Record<string, string>;
  /** HTML width attribute */
  html_width?: number;
  /** HTML height attribute */
  html_height?: number;
  [key: string]: any;
}

const cloudinary = require('cloudinary');

// Basic image tag
const imgTag = cloudinary.image('sample', {
  width: 300,
  height: 200,
  crop: 'fill'
});
// Result: <img src="https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_fill/sample" />

// Responsive image with srcset
const responsiveImg = cloudinary.image('sample', {
  responsive: true,
  width: 300,
  height: 200,
  crop: 'fill',
  srcset: {
    breakpoints: [200, 400, 800],
    sizes: '(max-width: 400px) 100vw, 50vw'
  }
});

// Image with custom attributes
const customImg = cloudinary.image('sample', {
  width: 300,
  height: 200,
  crop: 'fill',
  attributes: {
    alt: 'Sample image',
    class: 'hero-image',
    'data-testid': 'main-image'
  }
});

/**
 * Generate HTML video tag with multiple sources and poster
 * @param public_id - Public ID of the video
 * @param options - Video tag and transformation options
 * @returns HTML video tag string
 */
function video(public_id: string, options?: VideoTagOptions): string;

interface VideoTagOptions extends TransformationOptions {
  /** Video source formats to include */
  source_types?: string | string[];
  /** Source-specific transformations */
  source_transformation?: Record<string, TransformationOptions>;
  /** Poster image configuration */
  poster?: string | TransformationOptions;
  /** Fallback content for unsupported browsers */
  fallback_content?: string;
  /** HTML5 video controls */
  controls?: boolean;
  /** Video preload behavior */
  preload?: 'none' | 'metadata' | 'auto';
  /** HTML width attribute */
  html_width?: number;
  /** HTML height attribute */
  html_height?: number;
  [key: string]: any;
}

const cloudinary = require('cloudinary');

// Basic video tag
const videoTag = cloudinary.video('sample_video', {
  width: 640,
  height: 480,
  controls: true
});

// Video with multiple formats and poster
const multiFormatVideo = cloudinary.video('my_video', {
  width: 640,
  height: 480,
  source_types: ['webm', 'mp4', 'ogv'],
  poster: { width: 640, height: 480, crop: 'fill' },
  controls: true,
  preload: 'metadata'
});

// Video with source-specific transformations
const optimizedVideo = cloudinary.video('my_video', {
  width: 640,
  height: 480,
  source_transformation: {
    webm: { quality: '70' },
    mp4: { quality: '80' }
  },
  fallback_content: 'Your browser does not support HTML5 video.'
});

/**
 * Generate HTML picture tag with multiple sources
 * @param public_id - Public ID of the image
 * @param options - Picture tag options with sources
 * @returns HTML picture tag string
 */
function picture(public_id: string, options?: PictureTagOptions): string;

interface PictureTagOptions extends TransformationOptions {
  /** Array of source configurations */
  sources?: Array<{
    /** Minimum width media query */
    min_width?: number;
    /** Maximum width media query */
    max_width?: number;
    /** Source-specific transformation */
    transformation?: TransformationOptions;
    /** Media query string */
    media?: string;
  }>;
  [key: string]: any;
}

const cloudinary = require('cloudinary');

// Picture tag with responsive sources
const pictureTag = cloudinary.picture('sample', {
  sources: [
    {
      min_width: 1200,
      transformation: { width: 800, height: 600, crop: 'fill' }
    },
    {
      min_width: 768,
      transformation: { width: 600, height: 450, crop: 'fill' }
    },
    {
      transformation: { width: 400, height: 300, crop: 'fill' }
    }
  ]
});

/**
 * Generate HTML source tag
 * @param public_id - Public ID of the asset
 * @param options - Source tag options
 * @returns HTML source tag string
 */
function source(public_id: string, options?: SourceTagOptions): string;

interface SourceTagOptions extends TransformationOptions {
  /** Media query for the source */
  media?: string;
  /** MIME type for the source */
  type?: string;
  /** Srcset configuration */
  srcset?: {
    breakpoints?: number[];
    sizes?: string;
  };
  /** HTML attributes */
  attributes?: Record<string, string>;
  [key: string]: any;
}

const cloudinary = require('cloudinary');

// Source tag for picture element
const sourceTag = cloudinary.source('sample', {
  media: '(min-width: 768px)',
  width: 800,
  height: 600,
  crop: 'fill',
  format: 'webp'
});
// Result: <source media="(min-width: 768px)" srcset="..." type="image/webp">

interface ImageTagOptions extends TransformationOptions {
  responsive?: boolean;
  hidpi?: boolean;
  client_hints?: boolean;
  responsive_placeholder?: string;
  srcset?: {
    breakpoints?: number[];
    sizes?: string;
    transformation?: TransformationOptions;
  };
  attributes?: Record<string, string>;
  html_width?: number;
  html_height?: number;
  [key: string]: any;
}

interface VideoTagOptions extends TransformationOptions {
  source_types?: string | string[];
  source_transformation?: Record<string, TransformationOptions>;
  poster?: string | TransformationOptions;
  fallback_content?: string;
  controls?: boolean;
  preload?: 'none' | 'metadata' | 'auto';
  html_width?: number;
  html_height?: number;
  [key: string]: any;
}

interface PictureTagOptions extends TransformationOptions {
  sources?: Array<{
    min_width?: number;
    max_width?: number;
    transformation?: TransformationOptions;
    media?: string;
  }>;
  [key: string]: any;
}

interface SourceTagOptions extends TransformationOptions {
  media?: string;
  type?: string;
  srcset?: {
    breakpoints?: number[];
    sizes?: string;
  };
  attributes?: Record<string, string>;
  [key: string]: any;
}