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>

Best Practices

Image Requirements

Format: JPG, PNG, GIF, WebP
Size: Optimize for web (recommended max 2MB)
URL: Must be publicly accessible
Dimensions: Use appropriate aspect ratios

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

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 4 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

Best Practices

Image Requirements

Performance Tips

Visual Design

Advanced Techniques

Image Carousel Effect

Mixed with Other Widgets

Troubleshooting

Image Not Loading

Image Not Animating

Poor Image Quality

Layout Issues

Related Widgets