Want to showcase photoview of 4 events on homepage but can only get list view to

[iosefo]

I can get the Photo view to work on the Events page but we would like to have a 4-across grid of the 4 most recent events in a widget or other layout area of our homepage. The Upcoming Events function in Avia Layout Builder only lets us post a list view. We are Pro clients. The image I attach is what we DON’T want; we want a grid on 1-down, 4-across event blocks. Thanks. Kate

[Sky]

Hi Susan!

If I understand correctly, you want to output a single row of the four most recent events on your homepage. I will try to help you achieve this.

Unfortunately, I am limited in how much support I can provide for customizations, but I will try to help get you pointed in the right direction.

You can add any of the calendar views to pages or posts on your site using a shortcode. You can read more about how to use the shortcodes at this knowledgebase article.

It sounds like the “Photo” view is close to what you are wanting. Here is an example shortcode that will output four upcoming events in a grid like fashion.
[tribe_events view="photo" limit="4" tribe-bar="false"]

The only problem is that by default, the photo view has three columns in the grid instead of four. Looking at it, it may a bit complicated to override the default configuration, as it uses javascript to set the position depending on the width of the view.

Another option would be to start with the list view, and override the CSS to get the look you want.

You can read more about customizing the templates by reading our Themer’s Guide.

Let me know if this helps!

Thanks,
Sky

[Mathew]

Susan,

Here’s a great resource that may provide some documentation on achieving the desired look. As Sky mentions, this type of customization falls outside of the support scope. Hope this helps.

Best of luck.

[Sky]

Mathew,

Thanks for sharing that resource!

Susan, I’m going to close this ticket since it’s been awhile since we heard from you. Please feel free to create a new thread if you have any other questions or issues.

Thanks!
Sky

[Author]

Posts