The Events Calendar Pro has introduced a new feature that enhances the visual presentation of events in the Photo View. This feature allows you to display event images in a uniform grid layout, providing a cleaner and more organized appearance.
To enable this feature:
- Navigate to Events → Settings → Display in your WordPress dashboard.
- Locate the option labeled “Display images as a grid on Photo View”.
- Check this option to activate the grid layout.
Once enabled, event images in the Photo View will be displayed in a consistent 16:9 aspect ratio, ensuring a harmonious and professional look across your events calendar.
If the default 16:9 aspect ratio doesn’t align with your design preferences, you can easily adjust it using CSS. For instance, to change the aspect ratio to 4:3, you can add custom CSS either by editing your theme’s style.css file directly or by going to Appearance > Customize > Additional CSS in your WordPress dashboard, which provides a safer and easier way to apply CSS changes without modifying theme files.
.tribe-events-view--photo.tribe-events-pro.tribe-events-pro-photo--grid
.tribe-events-pro-photo__event
.tribe-events-pro-photo__event-featured-image-link {
padding-top: 75%;
}
Here’s how the calculation works:
- For a 4:3 aspect ratio: (3 / 4) * 100 = 75%
- For the default 16:9 aspect ratio: (9 / 16) * 100 = 56.25%
By adjusting the padding-top value, you can set the desired aspect ratio for your event images, allowing for greater flexibility in your calendar’s design.