Video Grid that changes content on selection

Hi there, new upgrader and have made a few simple websites with your software - and busy trying to improve my portfolio of my video work for various UK broadcasters.
I’m keen to have a video grid with all the films I’ve made, but an option where you can toggle between the genres, a little like this website has: Our Portfolio | Frantic

Is there any way that this can be done in sitely?

I would love it if there is - I’ve seen a few sites where this happens and it animates the boxes into position when you select the genre you want to see.

EG:
http://www.lewisarnold.co.uk/portfolio/

Any advice on how to do this - much appreciated!

Thanks
Matt

Hello and welcome ! :blush:

You can achieve a similar result by using layout blocks. These blocks allow you to display a specific block while hiding the others when clicking on a button. For example, by clicking on a button linked to a category, you could display the block containing the thumbnails of the videos in that category. Here’s how to proceed:

  1. Create the layout blocks: Create a separate layout block for each category and insert the corresponding video thumbnails into each block.

  2. Assign a group ID: In the Style tab of each layout block, assign the same group ID to all the blocks you want to manage together.

  3. Set the initial visibility: Check the Initially hidden box for all the layout blocks, except for the one you want to be visible by default when the page loads.

  4. Add category buttons: Add buttons representing your categories higher up on your page or wherever you prefer.

  5. Configure the buttons to control the blocks: For each button, set up the following action:

• On click: Visibility of the layout block

• Select the block corresponding to the category of this button.

• Choose the option Show.

• Check Close other layout blocks.

• Group ID: Enter the group ID you assigned in the layout block settings.

Once this is set up, when you click on a button, the corresponding layout block will be displayed, while the others will be automatically hidden.

If needed, you can watch a video explaining how these layout blocks work here: https://www.youtube.com/watch?v=Viqo34-m5vk.

Feel free to reach out if you need further assistance! :blush:

5 Likes

And to top it all off you can introduce One Time Animation transitions to give it a slick finish! :slight_smile:

4 Likes