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

Animation duration in seconds

data-start

number

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:

In the editor: Shows "Blocked: Unauthorized domain" message
In the final video: Image is replaced with a placeholder
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:

Click the image picker button in the template editor
Upload your custom image through the interface
The system automatically generates the correct CloudFront URL
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

Upload First: Always use Tintage's image uploader for custom images
Use Presets: Leverage the built-in image picker with approved sources
Test Early: Verify images load correctly in the template editor
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

Text Widget - For captions and labels
Container Widget - For grouping images
Counter Widget - For combining with statistics

PreviousCounter Widget NextContainer Widget

Last updated 5 days ago

Basic Usage

Attributes

Animation Behavior

Fade Animation

Easing Functions

Examples

Simple Logo Display

Multiple Images

Image with Text Overlay

Styling Options

Image Sizes

Image Shapes

Image Effects

Animation Timing

Quick Fade (1 second)

Slow Fade (4 seconds)

Delayed Start

Common Use Cases

Logo Introduction

Product Showcase

Team Introduction

Image Security & Domain Restrictions

Allowed Image Domains

Blocked Content

What Happens When Images Are Blocked

Using Approved Image Sources

Tintage Image Uploader (Recommended)

Stock Photo Services

Tintage Domain Assets

Best Practices

Image Requirements

Recommended Workflow

Performance Tips

Visual Design

Advanced Techniques

Image Carousel Effect

Mixed with Other Widgets

Troubleshooting

Image Not Loading

Image Blocked by Security

Image Not Animating

Poor Image Quality

Layout Issues

Related Widgets