Tutorial: Creating slideshow of Images & Videos using Repeating Group

This is my first tutorial and for future reference.

Objective: Creating a slideshow that contains images & videos.
Problem: Bubble’s slick slideshow plugin only able to show images. Videos are not supported.
I cannot find to see any tutorial regarding about this.

Prep database & option set:


I created a data type Media with File, Media Type data field. Optional if you want to add Title or Order number


Also I created Option Set for Media Type (Image & Video) to categorize them.
Learn this to keep option sets tidy off Youtube, credits to the respective Bubbler.

Install video player plugin:


Not sponsored, I install this plugin because it have a Event “… has finished playing”.
You’ll need that for the workflow later on.

Adding the visual elements:


Here you can see I added a Repeating Group. Set Data Source: Search for Media(s).



Added both Image and Video player in the Repeating Group, with Conditions if an Image is in the current cell, the video player will hidden. Vice versa.


Added a text for my reference. I didn’t know Page Number existed. This is super useful.


Create Custom State. This is the “ingredient” of our recipe. Duh.

Workflow:


Every sec, the Custom State will update what’s the current cell Media Type is.

This is the real ingredient, I’ve been wrecking my head since yesterday figuring out how the heck I want to tell Custom State gather information of the current cell.
Keyword is: item #RepeatingGroup’s page number.

Now all that’s left is just tell Bubble in the workflow:
If an Image is shown, set duration for 5 secs then show next item.
If Video is shown, let it play until the end then show next item.


We tell Bubble if the current cell is Image, let it play for 5 sec, then show next item.

Select an event workflow: When conditions is true + when custom state is Image.

  • Add a pause duration 5 sec
  • After that show next item
  • Set custom state to tell us what kind of media type is showing.


I had to put this because to make it loop. Without this, when it reach to first page again, it just stops.


We tell Bubble if the current cell is Video, let it play until finished, then show next item.

Give it a try! Let me know what you think.