Featured Images

You might already be a lot more familiar with how the Featured Image works for The Events Calendar than you know. That's because it's built on top of the same Featured Image functionality that comes standard with WordPress.

In this post, we're going to dive into the concept of Featured Images a little deeper. We'll review how to add them to an event post, cover how to style them in CSS and, lastly, how to change the size.

Adding Featured Images to an Event Post

Let's say you have the most beautiful photo and it's perfect for the event you're about to publish on your site. How do we add that?

From the single event editing screen (Events > Add New), head down to the Featured Image box in the lower right corner of the screen. It can be easy to miss because of how small and buried it is, but this is what you're looking for:

kb-featuredimages-admin

Go ahead and click the "Set featured image" link. It will open a dialogue box that allows you to either select and existing image from your Media Library or upload a new one. Select the image you would like to use as your featured image, click the "Set featured image" button in the dialogue box, then you will be taken back to the editing screen and see the featured image in the box.

Need to remove the image and select a new one? Click the "Remove featured image" link beneath the image and repeat the steps above to select a new one.

kb-featuredimages-admin-2

It's worth noting that a Featured Image is not required for publishing an event. It's an optional feature for dressing things up a little bit.

Where Featured Images Show

Featured images pop up in a few different places. The first place is the calendar views. In list-style views like List, Day, and Map (PRO only), the image will show next to the event. In Calendar View and PRO's Week View, the image will show in the mouseover tooltip for each event. If you really want to showcase your Featured Images, you'll want to use PRO's Photo View which shows the photos prominently in a tiled view.

The other place you can expect to see a Featured Image is on a single event page. It will display at the top of the post, before the content.

Styling a Featured Image with CSS

Let's say you want to change the Featured Image so that it floats to the right instead of the left of an event in the calendar view. The Featured Image is always wrapped in the .tribe-events-event-image class, so we can use that to make the change in our CSS file.

.tribe-events-event-image {
float: right;
}

Not bad, right? You can do the same thing to round the corners, add a border and increase the margins:

.tribe-events-event-image {
border: 1px solid #333;
border-radius: 5px;
margin-right: 35px;
}

It's even possible to hide the image completely from view. For example, this will hide the image from a single event page:

.single-tribe_events .tribe-events-event-image {
display: none;
}

Please refer to our Themer's Guide for more information on how to set up a stylesheet for customizing styles plugin styles.

Customizing the Featured Image Size

One thing that comes up from time to time is how to change the size of the Featured Image. To do this, you will need to create a theme override of the template where the Featured Image you want to edit is displayed.

In that template, located where the Featured Image is called. It will look something like this:

the_post_thumbnail( 'medium' );

See the "medium" variable in there? That's the size! If your theme follows uses the standard WordPress sizing conventions for images, you can change that to any of the following:

  • thumbnail
  • medium
  • large
  • full

Need more sizes? Head over to the WordPress Codex for more info on how to register additional image sizing options.