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
1<img data-type="image"
2 src="https://example.com/image.jpg"
3 alt="Description"
4 data-animate="fade"
5 data-ease="easeIn"
6 data-duration-animation="2"
7 data-start="1"
8 class="w-32 h-32" />
9Attributes
| 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
1<div class="relative w-full h-full bg-white" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <img data-type="image"
4 src="https://example.com/logo.png"
5 alt="Company Logo"
6 data-animate="fade"
7 data-ease="easeIn"
8 data-duration-animation="2"
9 data-start="0"
10 class="w-48 h-48 mx-auto mb-4" />
11 <div class="text-2xl font-bold text-gray-800"
12 data-type="text"
13 data-animate="fade"
14 data-start="2"
15 data-duration-animation="2">
16 Welcome to Our Platform
17 </div>
18 </div>
19</div>
20Multiple Images
1<div class="relative w-full h-full bg-gray-100" data-type="container">
2 <!-- First image -->
3 <div class="absolute top-1/3 left-1/4 -translate-x-1/2 -translate-y-1/2 text-center">
4 <img data-type="image"
5 src="https://example.com/image1.jpg"
6 alt="First image"
7 data-animate="fade"
8 data-start="0"
9 data-duration-animation="2"
10 class="w-32 h-32 rounded-lg shadow-lg" />
11 </div>
12
13 <!-- Second image -->
14 <div class="absolute top-1/3 right-1/4 translate-x-1/2 -translate-y-1/2 text-center">
15 <img data-type="image"
16 src="https://example.com/image2.jpg"
17 alt="Second image"
18 data-animate="fade"
19 data-start="2"
20 data-duration-animation="2"
21 class="w-32 h-32 rounded-lg shadow-lg" />
22 </div>
23
24 <!-- Third image -->
25 <div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 translate-y-1/2 text-center">
26 <img data-type="image"
27 src="https://example.com/image3.jpg"
28 alt="Third image"
29 data-animate="fade"
30 data-start="4"
31 data-duration-animation="2"
32 class="w-32 h-32 rounded-lg shadow-lg" />
33 </div>
34</div>
35Image with Text Overlay
1<div class="relative w-full h-full bg-black" data-type="container">
2 <!-- Background image -->
3 <img data-type="image"
4 src="https://example.com/hero-image.jpg"
5 alt="Hero background"
6 data-animate="fade"
7 data-start="0"
8 data-duration-animation="3"
9 class="w-full h-full object-cover" />
10
11 <!-- Text overlay -->
12 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
13 <div class="text-6xl font-bold text-white mb-4"
14 data-type="text"
15 data-animate="fade"
16 data-start="3"
17 data-duration-animation="2">
18 Amazing Product
19 </div>
20 <div class="text-2xl text-gray-200"
21 data-type="text"
22 data-animate="fade"
23 data-start="5"
24 data-duration-animation="2">
25 Discover what's possible
26 </div>
27 </div>
28</div>
29Styling Options
Image Sizes
1<!-- Small -->
2<img class="w-16 h-16" data-type="image" src="image.jpg" alt="Small" />
3
4<!-- Medium -->
5<img class="w-32 h-32" data-type="image" src="image.jpg" alt="Medium" />
6
7<!-- Large -->
8<img class="w-64 h-64" data-type="image" src="image.jpg" alt="Large" />
9
10<!-- Full size -->
11<img class="w-full h-full" data-type="image" src="image.jpg" alt="Full" />
12Image Shapes
1<!-- Square -->
2<img class="w-32 h-32" data-type="image" src="image.jpg" alt="Square" />
3
4<!-- Rounded -->
5<img class="w-32 h-32 rounded-lg" data-type="image" src="image.jpg" alt="Rounded" />
6
7<!-- Circle -->
8<img class="w-32 h-32 rounded-full" data-type="image" src="image.jpg" alt="Circle" />
9
10<!-- Custom border radius -->
11<img class="w-32 h-32 rounded-2xl" data-type="image" src="image.jpg" alt="Custom" />
12Image Effects
1<!-- Shadow -->
2<img class="w-32 h-32 shadow-lg" data-type="image" src="image.jpg" alt="Shadow" />
3
4<!-- Border -->
5<img class="w-32 h-32 border-4 border-white" data-type="image" src="image.jpg" alt="Border" />
6
7<!-- Grayscale -->
8<img class="w-32 h-32 grayscale" data-type="image" src="image.jpg" alt="Grayscale" />
9
10<!-- Blur -->
11<img class="w-32 h-32 blur-sm" data-type="image" src="image.jpg" alt="Blur" />
12Animation Timing
Quick Fade (1 second)
1<img data-type="image"
2 src="image.jpg"
3 alt="Quick fade"
4 data-animate="fade"
5 data-duration-animation="1"
6 data-start="0" />
7Slow Fade (4 seconds)
1<img data-type="image"
2 src="image.jpg"
3 alt="Slow fade"
4 data-animate="fade"
5 data-duration-animation="4"
6 data-start="0" />
7Delayed Start
1<img data-type="image"
2 src="image.jpg"
3 alt="Delayed"
4 data-animate="fade"
5 data-start="3"
6 data-duration-animation="2" />
7Common Use Cases
Logo Introduction
1<div class="relative w-full h-full bg-blue-600" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <img data-type="image"
4 src="https://example.com/logo.png"
5 alt="Company Logo"
6 data-animate="fade"
7 data-ease="easeIn"
8 data-duration-animation="2"
9 data-start="0"
10 class="w-40 h-40 mx-auto mb-6" />
11 <div class="text-4xl font-bold text-white"
12 data-type="text"
13 data-animate="fade"
14 data-start="2"
15 data-duration-animation="2">
16 Welcome to Our Brand
17 </div>
18 </div>
19</div>
20Product Showcase
1<div class="relative w-full h-full bg-gray-100" data-type="container">
2 <!-- Product image -->
3 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
4 <img data-type="image"
5 src="https://example.com/product.jpg"
6 alt="Product"
7 data-animate="fade"
8 data-start="0"
9 data-duration-animation="3"
10 class="w-80 h-80 object-cover rounded-2xl shadow-2xl" />
11 </div>
12
13 <!-- Product name -->
14 <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-center">
15 <div class="text-3xl font-bold text-gray-800"
16 data-type="text"
17 data-animate="fade"
18 data-start="3"
19 data-duration-animation="2">
20 Amazing Product
21 </div>
22 <div class="text-xl text-gray-600"
23 data-type="text"
24 data-animate="fade"
25 data-start="5"
26 data-duration-animation="2">
27 $99.99
28 </div>
29 </div>
30</div>
31Team Introduction
1<div class="relative w-full h-full bg-white" data-type="container">
2 <!-- Team member photo -->
3 <div class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
4 <img data-type="image"
5 src="https://example.com/team-member.jpg"
6 alt="Team Member"
7 data-animate="fade"
8 data-start="0"
9 data-duration-animation="2"
10 class="w-48 h-48 rounded-full object-cover shadow-lg" />
11 </div>
12
13 <!-- Name and title -->
14 <div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 text-center">
15 <div class="text-3xl font-bold text-gray-800"
16 data-type="text"
17 data-animate="fade"
18 data-start="2"
19 data-duration-animation="2">
20 John Doe
21 </div>
22 <div class="text-xl text-gray-600"
23 data-type="text"
24 data-animate="fade"
25 data-start="4"
26 data-duration-animation="2">
27 CEO & Founder
28 </div>
29 </div>
30</div>
31Image 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 CDNpublic-worker.tintage.workers.dev- Tintage's worker servicestintage-bucket.tintage.workers.dev- Tintage's video and asset storagetintage.com- Tintage's main domainimages.unsplash.com- Unsplash image serviceimages.pexels.com- Pexels free stock photoscdn.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
Note
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:
1<img data-type="image"
2 src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1080&h=1080&q=80"
3 alt="Unsplash image" />
4Pexels Images:
1<img data-type="image"
2 src="https://images.pexels.com/photos/1234567/pexels-photo-1234567.jpeg?auto=compress&cs=tinysrgb&w=1080&h=1080"
3 alt="Pexels image" />
4Pixabay Images:
1<img data-type="image"
2 src="https://cdn.pixabay.com/photo/2023/01/01/12/34/example-1234567_1280.jpg"
3 alt="Pixabay image" />
4Tintage Domain Assets
For official Tintage assets:
1<img data-type="image"
2 src="https://tintage.com/assets/logo.png"
3 alt="Tintage logo" />
4Best 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
Note
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
Image Carousel Effect
1<div class="relative w-full h-full bg-gray-900" data-type="container">
2 <!-- First image -->
3 <img data-type="image"
4 src="https://example.com/image1.jpg"
5 alt="First"
6 data-animate="fade"
7 data-start="0"
8 data-duration-animation="2"
9 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 object-cover rounded-lg" />
10
11 <!-- Second image -->
12 <img data-type="image"
13 src="https://example.com/image2.jpg"
14 alt="Second"
15 data-animate="fade"
16 data-start="3"
17 data-duration-animation="2"
18 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 object-cover rounded-lg" />
19
20 <!-- Third image -->
21 <img data-type="image"
22 src="https://example.com/image3.jpg"
23 alt="Third"
24 data-animate="fade"
25 data-start="6"
26 data-duration-animation="2"
27 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 object-cover rounded-lg" />
28</div>
29Mixed with Other Widgets
1<div class="relative w-full h-full bg-gradient-to-br from-purple-500 to-pink-500" data-type="container">
2 <!-- Background image -->
3 <img data-type="image"
4 src="https://example.com/background.jpg"
5 alt="Background"
6 data-animate="fade"
7 data-start="0"
8 data-duration-animation="3"
9 class="absolute inset-0 w-full h-full object-cover opacity-30" />
10
11 <!-- Logo -->
12 <img data-type="image"
13 src="https://example.com/logo.png"
14 alt="Logo"
15 data-animate="fade"
16 data-start="2"
17 data-duration-animation="2"
18 class="absolute top-8 left-8 w-16 h-16" />
19
20 <!-- Main content -->
21 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
22 <div class="text-6xl font-bold text-white mb-4"
23 data-type="text"
24 data-animate="fade"
25 data-start="4"
26 data-duration-animation="2">
27 Welcome
28 </div>
29 <div class="text-2xl text-purple-100"
30 data-type="text"
31 data-animate="fade"
32 data-start="6"
33 data-duration-animation="2">
34 To our amazing platform
35 </div>
36 </div>
37</div>
38Troubleshooting
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
Note
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-starttime is reasonable - Ensure
data-duration-animationis 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
Related Widgets
- Text Widget - For captions and labels
- Container Widget - For grouping images
- Counter Widget - For combining with statistics
Last updated: 2026-01-05