Create a video gallery/mosaic w/ CMS collection but no repeater

Ask the community
, , ,
1

Question:
How can I create a mosaic / video gallery, using a CMS collection but no repeater, having different size of video ?

Product:
I use WIX STUDIO

What are you trying to achieve:
I want to have a home page, with only videos looping on autoplay. There are 3 main ratios of videos : 16:9/ 9:16/4:5. Videos are positionned next to each other no blank spaces, with on top a title and subtitle per video, when clicking on video or titles, redirect to the project page.
Using a CMS collection but no repeater (having different video ratios).

What have you already tried:
I built a CMS with these items : Title/Subtitle/ Video (uploaded file) / ratio/ priority
/ category and I tried to connect a container but it doesnt work.

It should look like this, but I did this “by hand” I want it to be done automatically…

Capture d’écran 2025-05-16 à 10.26.40
Capture d’écran 2025-05-16 à 10.26.401920×1482 220 KB

Additional information:
It’s my first wix studio project, I’m trying my best to solve it but I’m drowning in code and chatgpt wrong answers…

2

Hi! Try to use Wix Pro Gallery

3

I’m on wix studio, I think wix pro gallery is for wix

4

Hi, @user5615 !!

To start, try creating a new section and setting it to a grid layout. Choose any grid style you like. Once you’ve done that, the section will be divided into smaller boxes. Click on each box and use “Add Media” to fill them with your favorite videos. You should also be able to customize the grid layout, so feel free to adjust it to match your preferred design. :smiling_face_with_sunglasses:

At this point, each cell in the grid is essentially a video box, so it’s probably possible to switch the video content via code using video URLs. That means it should definitely be feasible to link it with the content of a collection as well. :innocent:

5

Hello ! thanks for your comment ! It’s the way I did the page on the screen, but I did that for 15 videos by hand maybe but there are 90 total… haha and if I’m ok to just set up empty boxes, I would like to find a way to populate it easily, probably by coding yes but how…? haha :sweat_smile: thanks for your reply though

6

I see. So it looks like I was on the right track. I’m personally a bit interested in this too, so I’ll try coding it myself to see what happens. :innocent: Please wait a moment. :melting_face:

7

For now, please try running the code to see if it works. :innocent:
Please make sure to correctly update the three points to match your environment before running the code. :upside_down_face:

import wixData from "wix-data";

$w.onReady(async function () {

    const collectionId = "testVideoCollection"; // ← Please replace with your collection ID !!
    const sectionIdsList = ["section1", "section2","section3"]; // ← Please replace with your section IDs that contain videoBoxes !!
    let videoIndex = 0;

    try {

        const items = (await wixData.query(collectionId).find()).items;
        const videos = items.map(item => item.video); // ← Please replace "video" with the field name from your collection !!

        for (const sectionId of sectionIdsList) {
            const boxElemsList = $w(`#${sectionId}`).children;
            for (const boxElem of boxElemsList) {
                const videoBox = boxElem.children[0];
                if (videoIndex < videos.length)
                    videoBox.src = videos[videoIndex++];
            }
        }

    } catch (error) {
        console.log(error);
    }

});
8

It works !!! So happy haha sorry it’s just that every time I try something like that it fails :joy: thanks !!

9

I’m glad to hear it worked out well! :kissing_face_with_smiling_eyes: Personally, I’m also happy that it gave me an opportunity to explore more design variations. Thank you! :innocent: