CMS: Creating a Custom Events Gallery

6 min read
There are several advantages to creating a custom events gallery. When using the built-in events gallery you have limited control over how the gallery looks. However, when you create a custom events gallery, you take full control of exactly what is displayed and how it is displayed.
In this article we cover the steps needed to build the custom events gallery shown below. We use a repeater to create a gallery effect, which displays the events. We connect that repeater to our site's event content using a dataset. You can follow the same steps to present your events in a way that you customize to fit your site's design and needs. 

Prerequisites

Before creating your custom events gallery, you need to add the Wix Events app to your site. Use the Wix Events app to create events and add event information. Notice that a collection named Events has been added to your site. This collection contains all of your event data.
Tip:
If you don't see the Events collection, refresh your Editor window.
Notes:
  • You must enable the Wix App Collections.
  • You may need to publish your site at least once after adding the Wix Events app to make some of the additional functionality described below work properly.
You may also want to familiarize yourself with the following:

Page Setup

We begin by adding a repeater to our page and setting it up so that it will be ready to show the information we want to display. In our example, we choose a repeater that contains an image and two text elements as a starting point.
Note:
You can delete the events widget that is created when you add Events to your site. Alternatively, you can hide the page with the widget from the menu or from search engines
We want to show additional information, so we add one more text elements to the repeater. At this point, feel free to change the design of the repeater as you see fit. For example, you can add a round image, an additional button, or any element you wish. We've changed some of the font sizes and moved some of the elements around.
Our repeater looks like this in the editor:
Don't worry about the actual content of the repeater. The text and images will be populated with the site's event content when we connect it using a dataset. Also, you don't need to worry about how many items are shown in the repeater. That will also be taken care of when we connect the repeater to a dataset.

Data Connections

Since we want the repeater to take our event content from the Wix Events app, we add a dataset to our page. The dataset acts as a bridge between our Events collection content and the elements on our page.
New datasets experience:
In Wix Studio, we've moved datasets to the Inspector panel on the right to make them easier for you to use. Learn more about the new datasets experience in Wix Studio
Then we connect the dataset to our Events collection.
Finally, we make connections using the Connect To Data button. We connect the repeater to the Events collection and then each page element to a field in the Events collection. You can choose what content from the collection you want to display. In our example, we choose to display the following: 
Element ID
Field Name
Example Data
repeater1
-
-
image1
Main image
-
text1
Title
Wix Meetup: New York
text2
Start date formatted
December 18, 2018
text3
Start time formatted
7:00 PM
That's all there is to do. Now you can preview or publish your site to see your custom events gallery in action. Continue reading to learn how to add more functionality to your custom events gallery.

Filtering

The gallery we created above will show all of your site's events, regardless of their current status. That means, events which have been canceled, have already started, and past events will show as well. If you don't want to show all of your events, you can use dataset filtering to only show a select subset of your events.

In our example, we only want to show upcoming events. To do so, we simply add a filter to the dataset on the Status field so that we only show events with the status SCHEDULED.

Sorting

By default, events are shown in the order they were created, from oldest to newest. That is not necessarily the order you may want. To change the display order, you can use dataset sorting to define the order of the events.
In our example, we only want to show events in order of their start date, from closest to now to furthest from now. To do so, we simply add a sort to the dataset on the Start field from old to new.

Event Details and Registration Form Pages

You can also link to an event details pages and/or a registration form for each of the events in your events gallery. There are two approaches to adding these links:
  • Link to the built-in event details page and/or registration form.
  • Link to a custom event details page that you create. The custom details page can then link to the registration form if you want. 
You can also use the dataset connected to the custom events gallery to easily create buttons to the built-in event details page or registration form.
In our example, we'll create buttons for both the details page and the registration page. We begin by adding two buttons to our repeater items and editing their texts.
Then we connect the button links using the Connect To Data button. The Details button links to Site event page url and the register button links to Registration url.
Tip:
The back button on the details page will bring visitors to the built-in events gallery, not your custom gallery. You can cover the back button with a button that you add to the page. Set the added button to link to the page with your custom event gallery. 
Alternatively, you can create your own event details page. To do so, you create a dynamic page and design it to show whatever detailed event information you want. You can also decide if you want the details page to link to a registration form or not. Then you add a button to the repeater created above and use the Connect To Data buttonto connect the button's link to the custom details dynamic page.

To learn how to create a custom event details page, see How to Create a Custom Event Details Page. 


Did this help?

|