Tutorial: Your First Image Composition

This tutorial guides you through the essential concepts of working with image elements in Editframe. Each step builds on the previous one, teaching you the fundamental skills needed for image composition.

Step 1: Display a Basic Image

Start with the simplest possible image composition — displaying a single image in a timegroup.

What you'll learn: How to place an image element in a timegroup container.

Try it yourself: Change object-cover to object-contain in the class to see how the image fills the container differently.

---

Step 2: Set Fixed Duration on Image

By default, an image expands to fill its parent timegroup's duration. Here you'll learn how to give an image its own fixed duration.

What you'll learn: How to use the duration attribute to control image display time.

Try it yourself: Change the duration from "5s" to "3s" to see how the image displays for a shorter time.

---

Step 3: Create an Image Sequence

Now create a simple slideshow by sequencing multiple images with fixed durations.

What you'll learn: How to use timegroup sequence mode with multiple images to create a slideshow.

Try it yourself: Add a third image to the sequence with a different duration to see how the timegroup adapts.

---

Step 4: Combine Images with Other Content

In practice, you'll often want to combine images with text, shapes, or other elements. Wrap each image in its own timegroup to create richer compositions.

What you'll learn: How to create complex slideshows by nesting timegroups and combining images with other content.

Try it yourself: Modify the text content or add additional elements like shapes or captions to create your own custom slide composition.

---

How-To: Create Image Slideshows

Problem: You want to display multiple images in sequence, creating a slideshow effect.

Solution: Use a timegroup with mode="sequence" and give each image a fixed duration. The timegroup will automatically arrange the images sequentially.

Each image in the sequence needs a duration attribute. The timegroup calculates its total duration by summing all child durations. You can use different durations for each image to create varied pacing.

For more complex slideshows with text overlays or multiple elements per slide, wrap each image in its own timegroup (see "Combine Images with Other Elements" below).

---

How-To: Set Image Duration

Problem: You need to control how long an image displays — either expanding to fill its parent timegroup or using a fixed duration.

Solution: Use the duration attribute. When omitted or empty, the image expands to fill its parent. When set to a timestring (e.g., "5s"), the image uses that exact duration.

Expanding to fill parent (default):

The image expands to fill the 5-second timegroup duration.

Fixed duration:

The image has a fixed 5-second duration, and the timegroup adapts to contain it.

Use fixed duration when creating slideshows or when you need precise control over image display time. Use expanding duration when you want images to adapt to their container's duration.

---

How-To: Combine Images with Other Elements

Problem: You want to create slideshows or compositions where each image appears alongside text, shapes, or other elements.

Solution: Wrap each image in its own timegroup. This allows you to compose multiple elements together while still sequencing them.

Each inner timegroup contains both the image and additional content. The outer timegroup sequences these compositions. Use CSS positioning and layout (absolute positioning, grid, flexbox) to arrange elements within each slide.

This pattern is essential for creating professional slideshows with captions, overlays, or complex layouts.

---

How-To: Use Object Fit Modes

Control how an image fills its container with the CSS object-fit utility classes.

Class	Behavior
object-cover	Fills the container; may crop edges. Best for full-bleed backgrounds.
object-contain	Fits entirely within the container; may letterbox. Best for logos or photos where full content matters.
object-fill	Stretches to exactly fill the container; distorts aspect ratio.

Change object-cover to object-contain to see the difference in how the image fills the frame.

---

How-To: Add a Logo or Watermark Overlay

Layer an image on top of another element using absolute positioning and z-index.

Both images live inside the same timegroup. The logo uses absolute positioning with top-4 right-4 to anchor it to the upper-right corner, and opacity-80 to make it semi-transparent.