[icon name=”bell” class=”” unprefixed_class=””] After the 4.4.3 update to Events Calendar Pro, my custom photo view broke. The problem turned out to be outdated (and redundant) content.php and loop.php files in my /tribe-events/pro/photo/ folder. I have now updated my GitHub repository for the /tribe-events/ folder and the code there is working as of March 11, 2017.
When I built KiaMiller.com, one of the reasons I urged Kia to buy Events Calendar Pro was the photo view for the main events calendar. It’s attractive and allows the visitor to see numerous events at once. (Modern Tribe describes it as “a fun grid that showcases featured images for your events.”)
The photo view shows the event featured image, title, and dates, along with the post excerpt in a Masonry grid. Kia Miller’s main event page looked like this when I built it:
It was not possible to take a screenshot without cutting off some of the content, because not all the excerpts are the same length. You might be able to avoid that problem by using auto-excerpts that cut the text off arbitrarily after a certain number of characters, but you still have the problem that recurring events will show an extra line under the date, as you can see in the entry for the Kundalini Yoga and Raw Juice Cleanse.
This morning Kia told me that she preferred the look of the event listings on the home page, which use my modified Events Calendar List Widget:
The Events Calendar and Events Calendar Pro use multiple templates to display each view, and also multiple templates for the widget. I dug into their Themer’s Guide, copied the relevant template files to the /tribe-events/ folder in my theme directory, and found it was relatively easy to comment out the lines that display the excerpt. (Templates for the photo view live in /views/pro/photo/ in the Events Calendar Pro plugin directory and you should copy them to /tribe-events/pro/photo/ in your theme directory before editing them.)
Here are the lines you need to remove from single-event.php (not the main one, the one in that pro/photo/ directory):
<div class="tribe-events-list-photo-description tribe-events-content entry-summary description"> <?php echo tribe_events_get_the_excerpt() ?> </div>
That gave me a good start: despite the different title lengths, the event blocks were much closer in height. To make them exactly equal, I had to hunt down the appropriate CSS and make some modifications. I added the media queries after I saw how squeezed-looking the display was in smaller browser widths.
#tribe-events-photo-events .type-tribe_events.tribe-events-photo-event {
float: left;
width: 29.2%;
height:320px;
margin: 0 4% 30px 0;
padding: 0;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
@media only screen and (max-width: 1024px) {
#tribe-events-photo-events .type-tribe_events.tribe-events-photo-event {
width: 44%;
}
}
@media only screen and (max-width: 600px) {
#tribe-events-photo-events .type-tribe_events.tribe-events-photo-event {
float: none;
width: 100%;
height:100%;
}
}
Yes, I know the CSS doesn’t look the same as in the other example. If I use the CSS highlighter the media query entries look funny.
I also made a change to the font for the titles, as I had done with the widget:
h2.tribe-events-list-event-title,
h2.tribe-events-list-event-title a {
font-family: 'Open Sans Condensed,' 'Lato', Helvetica, sans-serif;
font-size : 18px;
font-weight:bold;
line-height:24px;
margin-top: 0;
margin-bottom: 10px;
padding:0;
}
Finally, I added some code to the single-event.php file in order to display the venue and location instead of the excerpt. I copied the code that I found in the /widgets/modules/single-event.php file and modified it until it worked:
<div class="vcard adr location">
<?php if ( tribe_get_venue() != '' ): ?>
<span class="fn org tribe-venue">
<?php echo tribe_get_venue_link(); ?>
</span><br />
<?php endif ?>
<?php if ( tribe_get_city() != '' ): ?>
<span class="locality"><?php echo tribe_get_city(); ?>, </span>
<?php endif ?>
<?php if ( tribe_get_region() != '' ): ?>
<span class="region"><?php echo tribe_get_region(); ?>, </span>
<?php endif ?>
<?php if ( tribe_get_country() != '' ): ?>
<span class="country-name"><?php echo tribe_get_country(); ?></span>
<?php endif ?>
</div>
That resulted in the following grid:
I could tinker with the CSS a little more so that the wrap background color is also set to a fixed height, but I’m not sure that would actually look better. If you want to watch to see how it evolves, visit https://www.kiamiller.com/events/.
I’ll be happy to send you my altered template files if you’re interested—assuming you’re already an Events Calendar Pro user, since they won’t do you much good otherwise.
You can find the code on GitHub. Note that you may need to update some of the classes depending on your theme.
![screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir](https://www.wpfangirl.com/wp-content/uploads/2015/09/Livresque-du-Noir-final-150x150.jpg)
