Advanced Examples

Master advanced patterns, derivatives, and styling techniques.

BynderDamImage Advanced

Custom Styling

Apply inline styles or CSS classes for complete control:

<BynderDamImage 
  asset={asset} 
  derivative="webImage"
  alt="Styled image" 
  className="rounded-xl shadow-lg"
  style={{ 
    maxWidth: '100%', 
    height: 'auto', 
    border: '3px solid #146DF9' 
  }}
/>

With Loading States

Handle loading states with React patterns:

function ImageWithLoader({ asset }) {
  const [loaded, setLoaded] = useState(false);
 
  return (
    <div className="relative">
      {!loaded && <div className="spinner">Loading...</div>}
      <BynderDamImage
        asset={asset}
        derivative="webImage"
        alt="Product"
        onLoad={() => setLoaded(true)}
        className={loaded ? 'opacity-100' : 'opacity-0'}
      />
    </div>
  );
}

BynderDamNextImage Advanced

Different Derivatives

Thumbnail derivative (250x104px):

<BynderDamNextImage
  asset={asset}
  derivative="thumbnail"
  alt="Thumbnail preview"
/>

Original derivative (highest quality):

<BynderDamNextImage
  asset={asset}
  derivative="original"
  alt="Full resolution image"
  className="max-w-full h-auto"
/>

Mini derivative (80x80px) for avatars:

<BynderDamNextImage
  asset={asset}
  derivative="mini"
  alt="Avatar"
  className="rounded-full"
/>

Fill Mode with Responsive Container

Using fill mode with a container for responsive layouts:

<div className="relative w-full h-64 rounded-lg overflow-hidden">
  <BynderDamNextImage
    asset={asset}
    derivative="webImage"
    alt="Responsive image"
    fill
    className="object-cover"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
</div>

Priority Loading

For above-the-fold images, use priority to preload:

<BynderDamNextImage
  asset={asset}
  derivative="webImage"
  alt="Hero image"
  priority
  className="w-full h-auto"
/>

Custom Styling with Tailwind

<BynderDamNextImage
  asset={asset}
  derivative="webImage"
  alt="Styled image"
  className="rounded-xl shadow-lg border-4 border-blue-600"
  priority
/>

BynderDamLink Advanced

Open in New Tab

<BynderDamLink
  asset={asset}
  derivative="original"
  target="_blank"
  className="text-blue-600 hover:underline inline-flex items-center gap-1"
>
  Open Full Size Image
  <ExternalLinkIcon />
</BynderDamLink>

Custom Download Filename

<BynderDamLink
  asset={asset}
  derivative="webImage"
  download="custom-filename.png"
  className="bg-purple-600 text-white px-5 py-2 rounded hover:bg-purple-700"
>
  Download as Custom Name
</BynderDamLink>

Styled as Button

<BynderDamLink
  asset={asset}
  derivative="original"
  download
  className="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
>
  <DownloadIcon />
  Download Original
</BynderDamLink>

Preview Link

<BynderDamLink
  asset={asset}
  derivative="webImage"
  target="_blank"
  rel="noopener noreferrer"
  className="group relative block overflow-hidden rounded-lg"
>
  <BynderDamImage asset={asset} derivative="thumbnail" alt="Preview" />
  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
    <span className="text-white font-semibold">View Full Size</span>
  </div>
</BynderDamLink>

BynderDamVideo Advanced

Autoplay Background Video

Perfect for hero sections or background videos:

<BynderDamVideo
  asset={asset}
  autoPlay
  muted
  loop
  playsInline
  className="w-full max-w-2xl mx-auto rounded-lg"
/>

Specific Derivative with Preload

<BynderDamVideo
  asset={asset}
  derivative="mp4"
  controls
  preload="metadata"
  className="w-full max-w-3xl mx-auto"
/>

Fixed Dimensions

<BynderDamVideo
  asset={asset}
  controls
  width={640}
  height={360}
  className="mx-auto rounded-lg shadow"
/>

Responsive with Aspect Ratio

Maintain 16:9 aspect ratio across all screen sizes:

<div className="relative w-full" style={{ aspectRatio: '16/9' }}>
  <BynderDamVideo
    asset={asset}
    controls
    className="absolute inset-0 w-full h-full rounded-lg"
  />
</div>

Custom Controls

function CustomVideoPlayer({ asset }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [playing, setPlaying] = useState(false);
 
  const togglePlay = () => {
    if (videoRef.current) {
      if (playing) {
        videoRef.current.pause();
      } else {
        videoRef.current.play();
      }
      setPlaying(!playing);
    }
  };
 
  return (
    <div className="relative">
      <BynderDamVideo
        asset={asset}
        ref={videoRef}
        className="w-full"
      />
      <button
        onClick={togglePlay}
        className="absolute bottom-4 left-4 bg-white px-4 py-2 rounded"
      >
        {playing ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}

Video with Poster

<BynderDamVideo
  asset={asset}
  controls
  preload="none"
  poster="https://example.com/poster.jpg"
  className="w-full max-w-2xl mx-auto rounded-lg"
/>

Derivative Selection Strategy

Available Derivatives

Image Derivatives:

mini - 80x80px (avatars, small icons)
thumbnail - 250x104px (gallery thumbnails)
webImage - 800x333px (default, web optimized)
original - Full resolution (downloads, zoom)

Video Derivatives:

mp4 - H.264 video codec
webm - WebM video codec (when available)

Smart Fallback

Components automatically fall back through available derivatives:

// Tries: webImage → thumbnail → original → first available
<BynderDamImage
  asset={asset}
  derivative="webImage"
  alt="Image with fallback"
/>

Conditional Derivatives

Choose derivatives based on use case:

function ResponsiveImage({ asset, size }) {
  const derivative = size === 'small' ? 'thumbnail' : 
                     size === 'medium' ? 'webImage' : 
                     'original';
 
  return (
    <BynderDamImage
      asset={asset}
      derivative={derivative}
      alt="Responsive asset"
    />
  );
}

Performance Patterns

Lazy Loading Below the Fold

<BynderDamImage
  asset={asset}
  derivative="webImage"
  alt="Below fold image"
  loading="lazy"
/>

Preloading Critical Images

<BynderDamNextImage
  asset={asset}
  derivative="webImage"
  alt="Hero image"
  priority
/>

Progressive Enhancement

function ProgressiveImage({ asset }) {
  return (
    <>
      {/* Load thumbnail first */}
      <BynderDamImage
        asset={asset}
        derivative="thumbnail"
        alt="Preview"
        className="blur-sm"
      />
      {/* Then load full image */}
      <BynderDamImage
        asset={asset}
        derivative="webImage"
        alt="Full image"
        loading="lazy"
        onLoad={(e) => e.target.previousSibling?.remove()}
      />
    </>
  );
}

Framework Examples TypeScript Support