• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

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

May 23, 2017 by Sallie Goetsch 5 Comments

This entry is part 11 of 13 in the series Modern Tribe Tutorials
browser inspector showing new markup for event featured image

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.

Media settings for the East Bay WordPress Meetup website

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

Modern Tribe Tutorials Series Navigation<< Previous PostNext Post >>

Related Items

  • First row of event list grid display
    CSS Grid Layout for Event List Widget with Flexbox Fallback
  • Events Calendar Pro list widget showing list date and featured image
    Removing the List Date from Events Calendar Pro List Widget
  • code for adding featured images to Modern Tribe event list
    Defining Event Image Size in The Events Calendar by Modern Tribe

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Events Calendar Pro, Tutorial

Reader Interactions

Comments

  1. Jon Miller says

    January 28, 2018 at 11:52 am

    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?

    Reply
    • Sallie Goetsch says

      January 28, 2018 at 3:23 pm

      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.

      Reply
  2. John Fridinger says

    June 30, 2018 at 8:12 pm

    Just want to say thanks a lot for making this available… It is much appreciated…

    Reply
  3. Jan says

    January 19, 2022 at 3:10 am

    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?

    Reply
    • Sallie Goetsch says

      January 19, 2022 at 11:46 am

      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.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)


More in this series:

  • Creating a Horizontal List Widget with Featured Images in Events Calendar Pro
  • Change Photo View in Events Calendar Pro to Equal-Height Grid with Venue & Location
  • Horizontal Output for Events Calendar Pro Shortcode
  • Displaying Multiple Rows of Events in Events Calendar Pro Widget
  • Defining Event Image Size in The Events Calendar by Modern Tribe
  • Removing the List Date from Events Calendar Pro List Widget
  • Adding Non-Standard Pricing Info in The Events Calendar Using ACF
  • Moving the Gcal and iCal Links in The Events Calendar
  • Horizontal Events Widget for Events Calendar Pro — Now with Flexbox!
  • CSS Grid Layout for Event List Widget with Flexbox Fallback
  • How to Change Event Image Size in The Events Calendar without Modifying Templates
  • CSS Grid Layout for Events Calendar Pro Widget Shortcode
  • Update: Moving the Events Calendar iCal and Gcal links in 2018

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact