• 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

Defining Event Image Size in The Events Calendar by Modern Tribe

December 13, 2015 by Sallie Goetsch 3 Comments

This entry is part 5 of 13 in the series Modern Tribe Tutorials
code for adding featured images to Modern Tribe event list

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 );

Genesis theme settings for featured images

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.
Events Calendar Pro photo view with cropped images

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:

default display of list view for The Events Calendar

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%;
}

Events Calendar list view showing image and content at full width

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.

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

Related Items

  • Events Calendar Pro list widget showing list date and featured image
    Removing the List Date from Events Calendar Pro List Widget
  • featured events widget on the home page of KiaMiller.com
    Creating a Horizontal List Widget with Featured Images in Events Calendar Pro
  • screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir
    Horizontal Output for Events Calendar Pro Shortcode

Share this post:

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

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

Reader Interactions

Comments

  1. Bryan says

    August 26, 2016 at 10:43 am

    Any idea how to add the featured image to the “This Week Single Event” pro template file? I’ve tried using your logic, and I can’t get it to display.

    I’ve created my own template file in [your-theme]/tribe-events/pro/widgets/this-week/single-event.php’.

    = no luck

    Thanks,
    Bryan

    Reply
    • Sallie Goetsch says

      August 26, 2016 at 12:51 pm

      I’m afraid I can’t help you with that one–I have not worked with that particular widget.

      Reply
      • Amanda Hawkins says

        June 22, 2017 at 3:54 pm

        A little late but I came across this post doing a search for the same thing… to add an image to the week widget add this to single-event.php:

        echo tribe_event_featured_image( $event->ID, 'medium' );

        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

Follow Sallie on Twitter

    Sorry, no Tweets were found.

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