{"id":1896468,"date":"2019-10-18T13:19:11","date_gmt":"2019-10-18T17:19:11","guid":{"rendered":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/featured-images-2\/"},"modified":"2022-11-28T12:17:39","modified_gmt":"2022-11-28T17:17:39","slug":"featured-images","status":"publish","type":"post","link":"https:\/\/dev.theeventscalendar.com\/knowledgebase\/featured-images\/","title":{"rendered":"Using Featured Images in Events"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Adding featured images to an event<\/h2>\n\n\n\n

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?<\/p>\n\n\n\n

From the single event editing screen (Events \u2192 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:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Need to remove the image and select a new one? Click the “Replace Image” button beneath the image and select a new one.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Where featured images are displayed<\/h2>\n\n\n\n

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 month 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 fmages, you’ll want to use Pro’s photo view which shows the photos prominently in a tiled view.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

In the Block Editor, you can place a featured image block.<\/p>\n\n\n\n

\"\"
Inserting a Featured Image in Block Editor<\/figcaption><\/figure>\n\n\n\n

Styling a featured image with CSS<\/h2>\n\n\n\n

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<\/code> class, so we can use that to make the change in our CSS file.<\/p>\n\n\n

\n.tribe-events-event-image {\n  float: right;\n}\n<\/pre><\/div>\n\n\n
Not bad, right? You can do the same thing to round the corners, add a border and increase the margins:<\/p>\n\n\n
\n.tribe-events-event-image {\n  border: 1px solid #333;\n  border-radius: 5px;\n  margin-right: 35px;\n}\n<\/pre><\/div>\n\n\n
It’s even possible to hide the image completely from view. For example, this will hide the image from a single event page:<\/p>\n\n\n
\n.single-tribe_events .tribe-events-event-image {\n  display: none;\n}\n<\/pre><\/div>\n\n\n
? Interested in knowing more about customizing calendar styles? Check out our CSS guide<\/a>.<\/p>\n\n\n\n
Customizing the featured image size<\/h2>\n\n\n\n
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<\/a> of the template where the Featured Image you want to edit is displayed.<\/p>\n\n\n\n
In that template, located where the featured image is called. It will look something like this:<\/p>\n\n\n
\nthe_post_thumbnail( 'medium' );\n<\/pre><\/div>\n\n\n
See the “medium” variable in there? That’s the size! If your theme follows uses the standard WordPress sizing conventions for images<\/a>, you can change that to any of the following:<\/p>\n\n\n\n