Widgets/Image Widget

Image Widget

Display images with optional fade animations for logos, photos, and graphics.

View as MarkdownOpen in ChatGPT Open in Claude

The Image Widget displays images with optional fade animations. It’s perfect for logos, photos, graphics, and any visual content that needs to appear smoothly in your videos.

Basic Usage

<img
  data-type="image"
  src="https://example.com/image.jpg"
  alt="Description"
  data-animate="fade"
  data-ease="easeIn"
  data-duration-animation="2"
  data-start="1"
  class="w-32 h-32"
/>

Attributes

Attribute Type Default Description
data-type string - Must be "image"
src string - Image URL (required)
alt string - Alt text for accessibility
data-animate string - Animation type: "fade"
data-ease string - Easing function: "easeIn", "easeOut"
data-duration-animation number 2 Animation duration in seconds
data-start number 0 When animation starts in seconds

Animation Behavior

Fade Animation

The image widget supports fade animations that smoothly transition the element’s opacity:

  • Before start: Image is invisible (opacity: 0)
  • During animation: Fades in from 0 to 1 opacity
  • After animation: Remains fully visible (opacity: 1)

Easing Functions

Easing Description Best For
easeIn Slow start, fast end Images appearing
easeOut Fast start, slow end Images disappearing
Default Cubic ease-out General use

Examples

Simple Logo Display

<div class="relative w-full h-full bg-white" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <img
      data-type="image"
      src="https://example.com/logo.png"
      alt="Company Logo"
      data-animate="fade"
      data-ease="easeIn"
      data-duration-animation="2"
      data-start="0"
      class="w-48 h-48 mx-auto mb-4"
    />
    <div
      class="text-2xl font-bold text-gray-800"
      data-type="text"
      data-animate="fade"
      data-start="2"
      data-duration-animation="2"
    >
      Welcome to Our Platform
    </div>
  </div>
</div>

Multiple Images

<div class="relative w-full h-full bg-gray-100" data-type="container">
  <!-- First image -->
  <div
    class="absolute top-1/3 left-1/4 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <img
      data-type="image"
      src="https://example.com/image1.jpg"
      alt="First image"
      data-animate="fade"
      data-start="0"
      data-duration-animation="2"
      class="w-32 h-32 rounded-lg shadow-lg"
    />
  </div>

  <!-- Second image -->
  <div
    class="absolute top-1/3 right-1/4 translate-x-1/2 -translate-y-1/2 text-center"
  >
    <img
      data-type="image"
      src="https://example.com/image2.jpg"
      alt="Second image"
      data-animate="fade"
      data-start="2"
      data-duration-animation="2"
      class="w-32 h-32 rounded-lg shadow-lg"
    />
  </div>

  <!-- Third image -->
  <div
    class="absolute bottom-1/3 left-1/2 -translate-x-1/2 translate-y-1/2 text-center"
  >
    <img
      data-type="image"
      src="https://example.com/image3.jpg"
      alt="Third image"
      data-animate="fade"
      data-start="4"
      data-duration-animation="2"
      class="w-32 h-32 rounded-lg shadow-lg"
    />
  </div>
</div>

Image with Text Overlay

<div class="relative w-full h-full bg-black" data-type="container">
  <!-- Background image -->
  <img
    data-type="image"
    src="https://example.com/hero-image.jpg"
    alt="Hero background"
    data-animate="fade"
    data-start="0"
    data-duration-animation="3"
    class="w-full h-full object-cover"
  />

  <!-- Text overlay -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <div
      class="text-6xl font-bold text-white mb-4"
      data-type="text"
      data-animate="fade"
      data-start="3"
      data-duration-animation="2"
    >
      Amazing Product
    </div>
    <div
      class="text-2xl text-gray-200"
      data-type="text"
      data-animate="fade"
      data-start="5"
      data-duration-animation="2"
    >
      Discover what's possible
    </div>
  </div>
</div>

Styling Options

Image Sizes

<!-- Small -->
<img class="w-16 h-16" data-type="image" src="image.jpg" alt="Small" />

<!-- Medium -->
<img class="w-32 h-32" data-type="image" src="image.jpg" alt="Medium" />

<!-- Large -->
<img class="w-64 h-64" data-type="image" src="image.jpg" alt="Large" />

<!-- Full size -->
<img class="w-full h-full" data-type="image" src="image.jpg" alt="Full" />

Image Shapes

<!-- Square -->
<img class="w-32 h-32" data-type="image" src="image.jpg" alt="Square" />

<!-- Rounded -->
<img
  class="w-32 h-32 rounded-lg"
  data-type="image"
  src="image.jpg"
  alt="Rounded"
/>

<!-- Circle -->
<img
  class="w-32 h-32 rounded-full"
  data-type="image"
  src="image.jpg"
  alt="Circle"
/>

<!-- Custom border radius -->
<img
  class="w-32 h-32 rounded-2xl"
  data-type="image"
  src="image.jpg"
  alt="Custom"
/>

Image Effects

<!-- Shadow -->
<img
  class="w-32 h-32 shadow-lg"
  data-type="image"
  src="image.jpg"
  alt="Shadow"
/>

<!-- Border -->
<img
  class="w-32 h-32 border-4 border-white"
  data-type="image"
  src="image.jpg"
  alt="Border"
/>

<!-- Grayscale -->
<img
  class="w-32 h-32 grayscale"
  data-type="image"
  src="image.jpg"
  alt="Grayscale"
/>

<!-- Blur -->
<img class="w-32 h-32 blur-sm" data-type="image" src="image.jpg" alt="Blur" />

Animation Timing

Quick Fade (1 second)

<img
  data-type="image"
  src="image.jpg"
  alt="Quick fade"
  data-animate="fade"
  data-duration-animation="1"
  data-start="0"
/>

Slow Fade (4 seconds)

<img
  data-type="image"
  src="image.jpg"
  alt="Slow fade"
  data-animate="fade"
  data-duration-animation="4"
  data-start="0"
/>

Delayed Start

<img
  data-type="image"
  src="image.jpg"
  alt="Delayed"
  data-animate="fade"
  data-start="3"
  data-duration-animation="2"
/>

Common Use Cases

Logo Introduction

<div class="relative w-full h-full bg-blue-600" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <img
      data-type="image"
      src="https://example.com/logo.png"
      alt="Company Logo"
      data-animate="fade"
      data-ease="easeIn"
      data-duration-animation="2"
      data-start="0"
      class="w-40 h-40 mx-auto mb-6"
    />
    <div
      class="text-4xl font-bold text-white"
      data-type="text"
      data-animate="fade"
      data-start="2"
      data-duration-animation="2"
    >
      Welcome to Our Brand
    </div>
  </div>
</div>

Product Showcase

<div class="relative w-full h-full bg-gray-100" data-type="container">
  <!-- Product image -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <img
      data-type="image"
      src="https://example.com/product.jpg"
      alt="Product"
      data-animate="fade"
      data-start="0"
      data-duration-animation="3"
      class="w-80 h-80 object-cover rounded-2xl shadow-2xl"
    />
  </div>

  <!-- Product name -->
  <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-center">
    <div
      class="text-3xl font-bold text-gray-800"
      data-type="text"
      data-animate="fade"
      data-start="3"
      data-duration-animation="2"
    >
      Amazing Product
    </div>
    <div
      class="text-xl text-gray-600"
      data-type="text"
      data-animate="fade"
      data-start="5"
      data-duration-animation="2"
    >
      $99.99
    </div>
  </div>
</div>

Team Introduction

<div class="relative w-full h-full bg-white" data-type="container">
  <!-- Team member photo -->
  <div
    class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <img
      data-type="image"
      src="https://example.com/team-member.jpg"
      alt="Team Member"
      data-animate="fade"
      data-start="0"
      data-duration-animation="2"
      class="w-48 h-48 rounded-full object-cover shadow-lg"
    />
  </div>

  <!-- Name and title -->
  <div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 text-center">
    <div
      class="text-3xl font-bold text-gray-800"
      data-type="text"
      data-animate="fade"
      data-start="2"
      data-duration-animation="2"
    >
      John Doe
    </div>
    <div
      class="text-xl text-gray-600"
      data-type="text"
      data-animate="fade"
      data-start="4"
      data-duration-animation="2"
    >
      CEO & Founder
    </div>
  </div>
</div>

Image Security & Domain Restrictions

Tintage implements security measures to protect users and ensure content safety. All images must come from approved domains.

Allowed Image Domains

Images can only be loaded from these whitelisted domains:

  • dklbe7bjw8h2k.cloudfront.net - Tintage’s CloudFront CDN
  • public-worker.tintage.workers.dev - Tintage’s worker services
  • tintage-bucket.tintage.workers.dev - Tintage’s video and asset storage
  • tintage.com - Tintage’s main domain
  • images.unsplash.com - Unsplash image service
  • images.pexels.com - Pexels free stock photos
  • cdn.pixabay.com - Pixabay free stock photos

Blocked Content

The following image sources are automatically blocked:

  • Base64 data URLs (data:image/...)
  • Unauthorized domains (any domain not in the whitelist)
  • Invalid or malformed URLs
  • Local file paths (file://)

What Happens When Images Are Blocked

When an image from an unauthorized domain is detected:

  1. In the editor: Shows “Blocked: Unauthorized domain” message
  2. In the final video: Image is replaced with a placeholder
  3. Console warnings: Logged for debugging purposes

Using Approved Image Sources

We strongly recommend using Tintage’s built-in image uploader for all custom images. This ensures:

  • Automatic optimization for video rendering
  • Reliable hosting with guaranteed uptime
  • No external dependencies or broken links
  • Seamless integration with the template editor

To use the uploader:

  1. Click the image picker button in the template editor
  2. Upload your custom image through the interface
  3. The system automatically generates the correct CloudFront URL
  4. Your image is ready to use in templates

Learn more: For detailed information about the image uploader and template editor, see Template Editor.

Stock Photo Services

For high-quality stock photos, you can use these approved services:

Unsplash Images:

<img
  data-type="image"
  src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1080&h=1080&q=80"
  alt="Unsplash image"
/>

Pexels Images:

<img
  data-type="image"
  src="https://images.pexels.com/photos/1234567/pexels-photo-1234567.jpeg?auto=compress&cs=tinysrgb&w=1080&h=1080"
  alt="Pexels image"
/>

Pixabay Images:

<img
  data-type="image"
  src="https://cdn.pixabay.com/photo/2023/01/01/12/34/example-1234567_1280.jpg"
  alt="Pixabay image"
/>

Tintage Domain Assets

For official Tintage assets:

<img
  data-type="image"
  src="https://tintage.com/assets/logo.png"
  alt="Tintage logo"
/>

Best Practices

Image Requirements

  • Format: JPG, PNG, GIF, WebP
  • Size: Optimize for web (recommended max 2MB)
  • URL: Must be from an approved domain and publicly accessible
  • Dimensions: Use appropriate aspect ratios
  • Security: Only use images from whitelisted domains
  • Upload Method: Use Tintage’s image uploader for best results
  1. Upload First: Always use Tintage’s image uploader for custom images
  2. Use Presets: Leverage the built-in image picker with approved sources
  3. Test Early: Verify images load correctly in the template editor
  4. Optimize: Ensure images are properly sized and compressed

Need help? Check out our Template Editor Guide for step-by-step instructions on using the image uploader and Security Documentation for understanding domain restrictions.

Advanced Techniques

<div class="relative w-full h-full bg-gray-900" data-type="container">
  <!-- First image -->
  <img
    data-type="image"
    src="https://example.com/image1.jpg"
    alt="First"
    data-animate="fade"
    data-start="0"
    data-duration-animation="2"
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 object-cover rounded-lg"
  />

  <!-- Second image -->
  <img
    data-type="image"
    src="https://example.com/image2.jpg"
    alt="Second"
    data-animate="fade"
    data-start="3"
    data-duration-animation="2"
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 object-cover rounded-lg"
  />

  <!-- Third image -->
  <img
    data-type="image"
    src="https://example.com/image3.jpg"
    alt="Third"
    data-animate="fade"
    data-start="6"
    data-duration-animation="2"
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 object-cover rounded-lg"
  />
</div>

Mixed with Other Widgets

<div
  class="relative w-full h-full bg-gradient-to-br from-purple-500 to-pink-500"
  data-type="container"
>
  <!-- Background image -->
  <img
    data-type="image"
    src="https://example.com/background.jpg"
    alt="Background"
    data-animate="fade"
    data-start="0"
    data-duration-animation="3"
    class="absolute inset-0 w-full h-full object-cover opacity-30"
  />

  <!-- Logo -->
  <img
    data-type="image"
    src="https://example.com/logo.png"
    alt="Logo"
    data-animate="fade"
    data-start="2"
    data-duration-animation="2"
    class="absolute top-8 left-8 w-16 h-16"
  />

  <!-- Main content -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  >
    <div
      class="text-6xl font-bold text-white mb-4"
      data-type="text"
      data-animate="fade"
      data-start="4"
      data-duration-animation="2"
    >
      Welcome
    </div>
    <div
      class="text-2xl text-purple-100"
      data-type="text"
      data-animate="fade"
      data-start="6"
      data-duration-animation="2"
    >
      To our amazing platform
    </div>
  </div>
</div>

Troubleshooting

Image Not Loading

Problem: Image doesn’t appear in the video

Solutions:

  • Check that the image URL is correct and accessible
  • Verify the image format is supported (JPG, PNG, GIF, WebP)
  • Ensure the image is not too large (max 2MB recommended)
  • Test the URL in a browser to confirm it loads
  • Check domain restrictions: Ensure the image URL is from an approved domain

Image Blocked by Security

Problem: Image shows “Blocked: Unauthorized domain” message

Solutions:

  • Use Tintage’s uploader: Upload custom images through the built-in image uploader (recommended)
  • Use approved domains: Only use images from whitelisted domains:
    • dklbe7bjw8h2k.cloudfront.net (Tintage CloudFront)
    • public-worker.tintage.workers.dev (Tintage Workers)
    • tintage-bucket.tintage.workers.dev (Tintage video storage)
    • tintage.com (Tintage main domain)
    • images.unsplash.com (Unsplash)
    • images.pexels.com (Pexels)
    • cdn.pixabay.com (Pixabay)
  • Avoid base64: Don’t use data:image/... URLs
  • Use image picker: Leverage the built-in image picker with preset approved images

Learn more: See our Security and Domain Restrictions Guide for complete information about approved domains and troubleshooting blocked images.

Image Not Animating

Problem: Image appears but doesn’t fade in

Solutions:

  • Check that data-type="image" is set correctly
  • Verify data-animate="fade" is included
  • Make sure data-start time is reasonable
  • Ensure data-duration-animation is set

Layout Issues

Problem: Image positioning or sizing is wrong

Solutions:

  • Use appropriate CSS classes for sizing (w-32, h-32, etc.)
  • Check positioning classes (absolute, top-1/2, etc.)
  • Ensure container has proper dimensions
  • Test different size combinations

Last updated on January 5, 2026