Defining Event Image Size in The Events Calendar by Modern Tribe

Update 05/23/2017. Read my new tutorial on setting the event image size with a filter. The solution there is better than this one.

Various people have asked me how to get The Events Calendar or Events Calendar Pro to show a specific size/shape of image. This is actually very simple, but you have to know where to look.

First, if your theme already has a featured image size that you want to use, make sure you know what it’s called. In the project I’m working on right now, I’m using the Flex Pro Genesis child theme from Simple Pro Themes. Flex Pro defines several custom image sizes:

  add_image_size( 'featured-75',     75,  75, true );
  add_image_size( 'featured-150',   150, 150, true );
  add_image_size( 'img-1-column',   695, 365, true );
  add_image_size( 'img-2-columns',  528, 285, true );
  add_image_size( 'img-3-columns',  345, 185, true );
  add_image_size( 'img-4-columns',  252, 145, true );
  add_image_size( 'box-slider',    1080, 550, true );
  add_image_size( 'full-width',    1900, 550, true );

(Note that I’m going to have to add a few more sizes in the same proportions if I want to take advantage of the new responsive images feature in WordPress 4.4, but I’ll save that for another post.)

In this case, I’ve chosen to use the ‘box-slider’ image size for the featured images on blog posts. It might be that you will want to create a special size just for your event images, in which case you’d need to update your functions.php file with a new line:

add_image_size( 'my-new-image-size', $width, $height, true );

To use the same image size, ‘box-slider’, for event images, first create a folder called tribe-events inside your theme folder. (So for this project it will be flex/tribe-events.)

Copy (don’t move) the original single-event.php file from the-events-calendar/src/views/ into the new tribe-events folder in your theme folder.

Open the file in your text editor or IDE and look for the following lines:

<!-- Event featured image, but exclude link -->
<?php echo tribe_event_featured_image( $event_id, 'full', false ); ?>

In the second line, change ‘full’ to your chosen image size, and ‘false’ to ‘true’, like this:

<!-- Event featured image, but exclude link -->
<?php echo tribe_event_featured_image( $event_id, 'box-slider', true ); ?>

Save your modified single-event.php file and upload it and your new tribe-events folder to the theme folder on your server. Your single events will now show the custom image size.

You will need to repeat this exercise for your other views if you want to specify the featured image sizes there. This ultimately leads to editing a whole bunch of files called single-event.php but stored in different folders, and creating some custom CSS files.

Specify Image Size for Photo View (Pro)

For the photo view, you will need to edit the single-event.php file within the plugins/events-calendar-pro/src/views/pro/photo/ folder and save it to your-theme/tribe-events/pro/photo/single_event.php. (I don’t have to tell you to replace ‘your-theme’ with the actual name of your theme folder, do I?)

Look for the line that says

<?php echo tribe_event_featured_image( null, 'medium' ); ?>

Replace ‘medium’ with the name of your custom image size. Upload the file and its containing folder to the server. The image below shows images true-cropped to 695 x 365, scaled to fit in 25% of the content area.

Specify Image Size for Related Events (Pro)

To change the image size for related events, open the plugins/events-calendar-pro/src/views/pro/related-events.php file and look for the line

<?php $thumb = ( has_post_thumbnail( $post->ID ) ) ? get_the_post_thumbnail( $post->ID, 'large' ) : [line truncated]

Change ‘large’ to the name of your preferred image size. Remember that on small screens this list of related events will show in a column, not a row, so don’t choose an image that’s too small.

Specify Image Size for List View

To specify an image size for the list view, open the tribe/the-events-calendar/src/views/list/single-event.php file. Save it to your-theme/tribe-events/list/single-event. Find the line

<?php echo tribe_event_featured_image( null, 'medium' ) ?>

Change ‘medium’ to the image size you prefer to use.

In this case, you will also have to do some CSS modification to get the image to show up at a larger size, because The Events Calendar sets it at 1/3 of the content area:

Create a file called tribe-events.css and save it to your-theme/tribe-events/. Add the following CSS to display both the image and the content at full with:

.tribe-events-list .tribe-events-event-image {
    float: none;
    margin: 0 3% 0 0;
    width: 100%;
}

.tribe-events-list .tribe-events-event-image+div.tribe-events-content {
    float: none;
    position: relative;
    width: 100%;
}

You can, of course, edit that CSS to show the image and content in whatever proportions you want.

Specify Image Size for the List Widget

If you want to show images in your list widget, you need to edit the single-event.php file within the appropriate list widget folder (I admit I have not yet tried this for the list widget in the free version of The Events Calendar; I’ve only done it with the widget in Events Calendar Pro. But I’m pretty sure it will work with either widget.)

First, create a widgets directory in the new tribe-events directory you made for the single-event.php file. For The Events Calendar, use your-theme/tribe-events/widgets/. For Events Calendar Pro, use your-theme/tribe-events/pro/widgets/.

Copy the list-widget.php file from the appropriate plugin directory. (For The Events Calendar, it’s the-events-calendar/src/views/widgets. For Events Calendar Pro, it’s events-calendar-pro/src/views/pro/widgets.)

Open the file in your text editor and add the following at the top:

function custom_widget_featured_image() {
	global $post;

	echo tribe_event_featured_image( $post->ID, 'your-custom-image-size' );
}

add_action( 'tribe_events_list_widget_before_the_event_title', 'custom_widget_featured_image' );

Save the file and upload it and your new widgets folder to your server.

Note that if you have Events Calendar Pro installed, you MUST use the Pro list widget. It automatically supplants the list widget from The Events calendar.

Series Navigation

<< Displaying Multiple Rows of Events in Events Calendar Pro WidgetRemoving the List Date from Events Calendar Pro List Widget >>