If you’re looking for an idea to improve the user experience of your website and to make it look more professional, adding a dynamic gallery is one option that you might try. For example, if you have an e-commerce website, dynamic galleries can allow you to showcase your products in various ways, such as by product category, price or popularity. This can help your customers to find what they are looking for more easily.
The Dynamic Field widget from the JetEngine add-on for Elementor allows you to add dynamic galleries to your website. This means that the media (images, video, etc.) in the gallery can be pulled from any source, such as a custom post type, taxonomy, or even a third-party plugin.
This article will show you how to add the dynamic gallery in Elementor with the help of the Dynamic Field widget from the JetEngine add-on for Elementor.
Steps to Add Dynamic Gallery in Elementor with JetEngine
Before we start the tutorial, please ensure you’ve already installed and activated the JetEngine plugin.
You can purchase JetEngine for a single plugin or buy a bundle of Crocoblock plugins — download JetEngine on its official website. Please install and activate it once you have downloaded it.
Step 1: Turn on the Modules (Grid and Slider Gallery)
First, you need to enable two modules of JetEngine: Grid Gallery for Dynamic Field widget and Slider Gallery for Dynamic Field widget. These modules are two features in the Dynamic Field widget that can display your gallery dynamically in two styles: grid or slider.
On your WordPress dashboard, please navigate to the JetEngine and click on it, bringing you to the JetEngine dashboard. Next, enable the Grid Gallery for Dynamic Fied widget and Slider Gallery for Dynamic Field widget modules by switching the toggles to the right.
Don’t forget to click the Save button to save the changes you’ve made.
Step 2: Create the Meta Box
Before we create a new meta box, you first need to decide whether you want to add the dynamic gallery to the default WordPress post types (pages and posts) or other post types (WooCommerce Product Data, etc). In this example, we will add the dynamic gallery to the default WordPress posts.
Alright, navigate to the Meta Boxes (WordPress dashboard -> JatEngine). Once you enter the Meta Boxes dashboard, click the Add New button.
Next, we’re going to edit our new meta box. Here are some essential things that we apply to the meta box:
- General Settings
- Meta Box Title: Put a title for your meta box with your preference.
- Meta Box for: Assign the meta box for Post.
- Visibility Conditions
- Enable For Post Types: Please select post types where this meta box should be shown. In this example, we select Posts.
- Meta fields
- Click the New Meta Field button.
- Label: Add a meta field label with your preference.
- Field Type: Set the field type to Gallery
Once you’ve finished editing your Meta Box, apply the changes by clicking the Add Meta Box button.
Step 3: Add the Dynamic Field Widget to the Template
Create or Edit the Single Post template
Next, we will add the Dynamic Field widget to the template. As we mentioned earlier, we will add the dynamic gallery to the posts so that we can add the Dynamic Field widget to the Single Post template.
Go to the Single Post template editor by creating a new template or editing the existing one.
Once you enter the template editor, add the Dynamic Field widget to the canvas area. You can place the widget anywhere you want to display the dynamic gallery.
Setting the Dynamic Field Widget
Now, it is time to edit the widget settings. Go to the Dynamic Field widget settings, and we will edit some essential things below:
- Source: Set the source of this widget to Meta Data.
- Meta Field: Set it to a meta field label you’ve created on the Meta Boxes settings; in this example, we set it to 1st Gallery.
- Filter field output: Enable this option by switching the toggle to Yes.
- Callback: Set the callback to the Images gallery slider or Images gallery grid. It depends on what styles you want the gallery to display, slider or grid.
Once you’ve finished editing your widget, don’t forget to publish or update your template.
Step 4: Add the Dynamic Gallery to the Content
Alright, now we’re moving on to the last step of this tutorial. We will add the media of the dynamic gallery (images, videos, etc) to the content you want to add to. In this example, we will add the media to the post.
Go to the WordPress Gutenberg editor; you can create a new post or edit the existing one.
Under the content area, you will find the meta box you’ve created. Afterwards, insert some images/videos that you want to display in your dynamic gallery by clicking the CHOOSE MEDIA button.
Once you’ve finished inserting the media, you can preview the page to see the dynamic gallery on your post.
Don’t forget to save or publish your content. Feel free to tweak and style up your Dynamic Field widget on the Single Post template to achieve the best dynamic gallery on your page.
The Bottom Line
Adding a dynamic gallery to your website with the JetEngine add-on for Elementor is a great way to improve the user experience and make your site look more professional. The Dynamic Field widget makes it easy to add a dynamic gallery to any post, product, or page on your site. By following the steps in this article, you can create a dynamic gallery that will showcase your content in a visually appealing way.
2 thoughts on “How to Add Dynamic Gallery in Elementor with JetEngine”
Videos are not shown in the gallery with this call back, if you have a solution to dispplay both omages and videos in the same gallery, please share.
Hi Herve!
Thanks for visiting our site.
Regarding your question, If the GIF is okay for you, you can convert your videos to GIFs before uploading them to your WordPress media.
Adding the dynamic video gallery needs a different widget, the “Dynamic Repeater” widget. We will write an article about the Dynamic Repeater widget later.
Thank you!