Creating a video gallery page - Meta Box + Kadence

Ready to beautify your website with a stunning video gallery? In today's practice, we're going to find out how to do it with Meta Box and Kadence.

This is my example.

Video version

Preparation

The page is an archive page with a list of videos. Each video is kept in a post of a custom post type.

The information of the video is also the default information from the post, even the short description, author, or date. Just the videos are saved in a custom field.

So, we need some tool for this practice:

• Meta Box plugin to have a framework that allows creating a custom post type and a custom field for videos. You can download it directly from wordpress.org;
• MB Custom Post Type: to create a custom post type for videos;
• Meta Box Builder: to have a UI on the back end to create a custom field to store the video URL.

You can download and install each extension individually or use the Meta Box AIO which has all the Meta Box extensions.

Finally, I have Kadence with its pro version to have some extra types of blocks to flexibly display the information.

1. Creating a new post type

Go to Meta Box > Post Types to create a new post type for the videos.

Since I want to show the author information for each video, go to the Supports tab, and check the Author box to enable the author feature for the posts.

After publishing, you will see a new menu displayed. It's your post type.

2. Creating a custom field

Move to Meta Box > Custom Fields > Add New to create a new field group.

In this practice, the related information of the video is the default supported by WordPress. So, I use only one custom field to save the video. Also, instead of uploading the video, I use a URL from another place. However, I won’t use the URL field. The oEmbed field will be the best choice in this case because Kadence can display the video preview directly from the link saved in this field type.

After creating the field, in the Settings tab, choose Location as the Post type, and select Video to apply these fields to it.

Now, you’ll see the created custom field in the post editor.

Pay attention to the Author box. This section is available since we set it to enable the author feature for the Video post type when creating it.

Let's add some information and some videos as well.

Now, move on to the next step.

3. Creating a query card for the video

To get information about each video from posts, you should create a query card first. This is a new feature of the Advanced Query Loop from Kadence. It allows us to define the template for individual posts within the loop.

Go to Kadence Blocks > All Query Cards and create a new one.

After choosing the wanted layout for the card, you will see some default blog posts displayed.

Go to the right sidebar, set the preview as the post type that we created.

The preview will change, but please notice that it’s just changing in the preview, not querying any data.

So now, you can remove some unnecessary blocks, and choose the suitable blocks to get the corresponding information.

First, to get the video preview, choose the Dynamic HTML block to have more options to customize the display of the video preview.

Then, set the HTML Content as Post Custom Field and select the field of the video.

Now, you can see the videos displayed immediately.

For the additional information of the video, we style it into 2 columns like this:

So, add a Columns block, and choose the layout for it.

In the first column, add an Advanced Image block to display the author’s avatar. Instead of selecting any image, just enable dynamic image for this block.

Click on the button as the image below shown, and choose the Author Image from the dropdown list.

After that, you will see the author's avatar appear.

Move to the second column, choose a Section block to cover all the rest information. Next, add a Text Advanced block to get the name of the video stored in the title of the post.

Now, enable dynamic content, and choose the Post Title option.

Next, choose the Author Name block. The name says it all!

For the video’s description, choose the Dynamic HTML block again. Then, set the HTML Content as Post Excerpt.

And the last information is the published date, choose another Dynamic HTML block and connect it to the post date.

That’s all the information in the videos that I want to show.

Now, we can change some parameters in each block to have a better look.

4. Displaying the video gallery on the page

It’s time to display the video gallery on the frontend.

4.1 Creating a page

First, go to Meta Box > Pages to create a new page as usual.

4.2 Adding query

We’ve regulated how the information displays in the Query Card, but haven’t stipulated where it will query from yet. So now, add the Advanced Query Loop block provided by Kadence, and create a new query.

For the layout, I will do it later, so skip choosing any pre-made layout.

There’ll be a place to choose which post type we want to query from on the below screen. Choose the post type that we use for the videos.

And, don’t forget to select the created card for the layout of each video display. Then, this loop will inherit its layout and styling.

Now, the page displays all the videos along with their information already. You can change the layout of the gallery by changing some settings.

You also can use some CSS as well.

Let’s see how they look on the page!

So, we've created the page for the video gallery.

Sometimes, you may want to display an attractive video playlist on your sites as well. You can refer to it