How to Change Event Image Size in The Events Calendar without Modifying Templates Actions & filters are better than templates in so many ways

It’s not in the Themer’s Guide, but you can change the event image size in The Events Calendar using filters.

Why Use a Filter for Event Image Size?

One of the things I don’t like about Modern Tribe’s plugin The Events Calendar is the requirement to duplicate and modify templates for even very small changes. Why don’t I like modifying templates? Because it frequently causes problems when there are updates. The updates don’t overwrite changes you’ve made to the /tribe-events/ folder that you’ve created in your theme folder, but they can still break things if there have been changes to the core plugin or the original template file that are not compatible with the parts of the template file you haven’t changed.

One of the things I like about the Genesis Theme Framework is the way you can modify practically anything by using hooks. Although I do create custom single and archive templates for my custom post types in Genesis, they usually contain only the code I need to change. And it is possible to put all of the template information into the same plugin file that I use to create my custom post types. It just requires more conditionals.

What I Needed to Do

As I mentioned in my grid layout post, I recently updated the East Bay WordPress Meetup site and added The Events Calendar (free) and Event Aggregator. While looking at a single event, I noticed that the full-size image was being loaded. Since even the full-width page in the theme I’m using on that site is only 970px wide, there was no way I would ever need to load the full-size image. At most I’d need the large image size, which I had set to be 970px wide under Settings | Media.

I really didn’t want to modify the single-event.php file, but if you read the Themer’s Guide for The Events Calendar, it recommends modifying templates for even the tiniest changes. In my irritation, I complained to @theEventsCal on Twitter. Modern Tribe staff responded quickly.

This should get you what you need: 'tribe_event_featured_image_size'

— The Events Calendar (@TheEventsCal) May 22, 2017

I searched for that phrase in their technical docs–the list of hooks old and new for their various plugins. Nothing. I widened the search to include their support forums and blog, and found that the filter tribe_events_event_image_size() had been added in The Events Calendar 4.2.

Hallelujah! Now I just needed to figure out how to use that filter. (If I were a better developer, it would have been obvious to me, but I decided to go look at the WordPress Codex entry on add_filter to make sure I understood what I was doing.)

Filtering the Event Image Size

The thing with hooking a function to a filter is that you need to specify the argument you’re going to modify. In this case, the argument is size. If I wanted to modify the event image size for all possible views (single, archive, widget, shortcode), all I would need is

// Change size of ALL event images
add_filter('tribe_event_featured_image_size', 'ebwp_event_featured_image_size');
function ebwp_event_featured_image_size($size) {
	$size = 'large'; // Change to your desired image size
	return $size;
}

I didn’t actually need to change the event image size everywhere, though. I only needed to change it on the single event page. The event archive page uses the medium image, which I had set to be the width of the content area on pages with sidebars, and I had set a custom image size in the list/grid widget. That meant I needed some conditionals to restrict my change to single events.

// Change size of featured image on single events from 'full' to 'large'
add_filter('tribe_event_featured_image_size', 'ebwp_single_event_featured_image_size');
function ebwp_single_event_featured_image_size($size) {
	if( ! is_singular('tribe_events') ) {
		return;
	}
	if( ! has_post_thumbnail() ) {
		return;
	}
	$size = 'large'; // Change to your desired image size.
	return $size;
}

But then I realized that if I was going to use conditionals to apply the filter, I could actually just use the post_thumbnail_size() filter that’s built into WordPress core. And if I were a better developer, I would probably have thought of that first.

// Change size of featured image on single events using post_thumbnail_size
add_filter( 'post_thumbnail_size', 'ebwp_single_event_post_thumbnail_size');
function ebwp_single_event_post_thumbnail_size($size) {
	if( !is_singular('tribe_events') ) {
		return;
	}
	if( ! has_post_thumbnail() ) {
		return;
	}
	$size = 'large'; // Change to your desired image size.
	return $size;
}

There you have it: three possible ways to change the event image size using filters. If you want to change all the event images but not other featured images, the tribe_events_event_image_size() filter is the one to use. Otherwise, there’s not really an overpowering reason to use tribe_events_event_image_size() over post_thumbnail_size. (If you know of one, feel free to say so in the comments.)

Add this code to your theme’s functions.php file or to whatever file you store your custom functions in. (On the East Bay WP site, it’s custom-functions.php inside the WP Clips clip_custom folder.

Download the Code from GitHub