
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.
Thank you Sallie!
Having this to add to my child theme functions.php was extremely helpful and saved me from having to constantly update my single-event.php
Previous to this my theme was generating its own files to integrate Events Calendar/Calendar Pro so I had to re-upload single-event.php every time the theme updated even with a Child Theme, but this fixed it.
Do you have Single-Event.php layout templates on your wbeiste?
Hi, Jon. On some of the sites that I use Events Calendar Pro on, I have custom templates. On others, I’ve been able to get by without editing the actual templates. It depends on what you need to do, but I’ve found that I prefer to use hooks rather than modifying templates, where I can.
Just want to say thanks a lot for making this available… It is much appreciated…
Thank you so much for sharing! The 3rd one helped me immediately. The only thing that is now occuring is that every image is now shown in it’s original aspect ratio. Is there any chance to keep the ratio 1:1?
You can specify a ratio in the filter rather than using an existing image size, like this:
$size = array( 300, 300, true);
You may need to regenerate your thumbnails afterwards.
you are amazing! thank you for sharing this!