How to Create a Dynamic Gallery with Load More Functionality in Crocoblock (JetEngine Repeater Field)

If you’re building WordPress websites with Crocoblock, you already know how powerful JetEngine is for handling dynamic content. One of the most useful—and visually engaging—features you can create is a dynamic image gallery with a “Load More” button using the Repeater Field.

This setup is ideal for portfolios, case studies, real estate listings, photography websites, or any project where you want to display images dynamically without overwhelming the page.

What You’ll Build

By the end of this tutorial, you’ll have:

• A dynamic image gallery powered by JetEngine Repeater Field
• Images stored inside a custom post type
• A clean grid layout using Listing Grid
• A “Load More” button instead of traditional pagination
• Fully dynamic content managed from the WordPress admin

Step 1: Create a Custom Post Type

First, you need a structure to store your gallery items.

1. Go to JetEngine → Post Types → Add New
2. Create a post type (e.g., Portfolio, Gallery, or Projects)
3. Enable support for:
   • Title
   • Editor (optional)
   • Featured Image (optional)

Save the post type.

Step 2: Add a Repeater Field for Images

Now we’ll create the gallery structure inside each post.

1. Go to JetEngine → Meta Boxes → Add New
2. Assign it to your custom post type
3. Add a field:
   • Type: Repeater
   • Name: Projects gallery slide

Inside the repeater, add a sub-field:

• Type: Media
• Label: Projects gallery img
• Name: Projects gallery img

Now each post can store multiple images dynamically.

Step 3: Add Gallery Images in Posts

Go to your custom post type (e.g., Projects):

1. Open or create a post
2. Scroll to the Repeater field
3. Add multiple images
4. Save or update the post

At this point, your dynamic gallery data is ready.

Step 4: Create a Listing Template

Next, we’ll design how each gallery item appears.

1. Go to JetEngine → Listings → Add New
2. Choose:
   • Source: Posts
   • Post Type: Your custom post type

Inside the listing layout:

• Add Dynamic Repeater Field widget
• Select your repeater: Projects gallery slide
• Inside repeater item:
  • Use Dynamic Image widget → select sub-field Projects gallery img

Step 5: Create a Listing Grid

Now display your gallery on a page.

1. Edit a page with Elementor
2. Add the Listing Grid widget
3. Select your listing template
4. Configure:
   • Columns (e.g., 3 or 4)
   • Gap between items

Your gallery is now dynamic and visible.

Step 6: Enable “Load More” Functionality

This is where the magic happens.

1. Open Listing Grid settings
2. Navigate to Pagination
3. Select:
   • Load More

Configure:

• Posts per page: 6 or 9 (recommended)

Now, instead of loading all images at once, users can click “Load More” to progressively reveal additional items—improving performance and UX.

Step 7: Style the Load More Button

To match your website design:

• Go to the Style tab in Listing Grid
• Customize:
  • Button background color
  • Typography
  • Padding and spacing
  • Border radius
  • Hover effects

You can also switch to infinite scroll if you prefer automatic loading.

Pro Tips & Enhancements

• Use Lightbox: Enable Elementor lightbox for image previews
• Enable Lazy Loading: Improves page speed for large galleries
• Combine with Filters: Use JetSmartFilters for category-based filtering
• Masonry Layout: Create a Pinterest-style grid for better visuals

Final Thoughts

With JetEngine’s Repeater Field and Listing Grid, creating a dynamic gallery with a “Load More” button is straightforward and highly flexible. This approach keeps your pages fast, scalable, and easy to manage from the backend.

Whether you’re building a portfolio, showcasing products, or displaying media content, this setup ensures a clean and professional user experience.

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments