Image Widget

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

Tintage Image Uploader (Recommended)

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 and Getting Started with Templates.

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

Recommended Workflow

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.

Performance Tips

• Optimize images: Compress images before uploading

• Use appropriate sizes: Don't use oversized images

• Consider loading: Test with slower connections

• Alt text: Always include descriptive alt text

Visual Design

• Consistent sizing: Use consistent image sizes throughout

• Proper spacing: Add margins and padding as needed

• High quality: Use high-resolution images

• Accessibility: Ensure good contrast and readability

Advanced Techniques

Image Carousel Effect

<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

Poor Image Quality

Problem: Image appears blurry or pixelated

Solutions:

• Use higher resolution source images

• Ensure the image dimensions match your display size

• Avoid stretching small images to large sizes

• Use appropriate image formats (PNG for graphics, JPG for photos)

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

Related Widgets

• Text Widget - For captions and labels

• Container Widget - For grouping images

• Counter Widget - For combining with statistics

---