🖼️ What is an Image Blender?
Basically, it’s an image gallery slider where you can scroll through a series of images. You can use it as:
- A simple image gallery or slider
- A zoom-in effect on a single image using multiple zoomed-in photos
- Or even for layering images to reveal different parts
For example, we’ve created a zoom-in effect on a photo of mountain goats using 4 pictures, each one zoomed in closer. When you scroll through, it feels like you’re moving closer to the object!
⚙️ How to Create an Image Blender Using H5P on WordPress
Step 1: Install the Agamotto Module
- Head to your WordPress dashboard
- Go to H5P Content > Add New
- Find the module called Agamotto or Image Blender
- If it’s not installed, click Get to install it, then open it to start creating your activity
Step 2: Set Up Your Activity
- Title: e.g., Image Blender
- Heading: e.g., Watch the Goat
This title and heading show up on your activity.
Step 3: Add Your Images
- Add your first image (e.g., a wide shot of mountain goats)
- Add alternative text (required for accessibility) — e.g., “Far shot of goat”
- Add a label — e.g., “Go 1”
- Add an image description — e.g., “This is a far shot of a goat”
Repeat for your other images, each zoomed in closer (you can leave some optional fields blank if you want).
The more images you add, the smoother your zoom or transition will feel!
Step 4: Configure Behavioral Settings
- Snap slider: If enabled, the slider will snap to the nearest image tick mark instead of stopping anywhere in between
- Display tick marks: Show markers to indicate where images are
- Display labels: Show labels for each image (if you added them)
- Transparency replacement color: Choose a background color if your images have transparent areas (not needed if images are fully opaque)
Step 5: Preview Your Activity
- You’ll see your first image with the label and description
- Drag the slider and watch the picture zoom in or transition through the different images
- The tick marks help you know how many images there are
- If snap is off, you can stop anywhere between images; if snap is on, it jumps to the closest image
💡 Pro Tips & Use Cases
- Great for step-by-step diagrams — each image shows the next step in a process
- Interactive zoom-ins on detailed photos or maps
- Reveal parts of an image gradually (like borders appearing on a globe)
- Perfect to include inside interactive workbooks or lessons
🙌 That’s it!
There’s really not much to it — just upload your images, configure a few settings, and you have a slick interactive gallery.
If you have any questions or ideas, leave a comment below! Thanks for watching, and see you next time!
📢 Want more interactive content tutorials?
👉 Subscribe to Ed-Hermit on YouTube for weekly deep dives into H5P, WordPress, and other education technology for building engaging digital content: youtube.com/@edu-hermit
Got questions or creative ways you’re using H5P? Drop them in the comments—I’d love to hear what you’re building!
Leave a Reply