Add the Post Thumbnail to Your Event List

Published on: May 29, 2012 | Categories: Products, Tutorial

Hi everybody! We’ve seen a fair amount of requests to show the WordPress Post Thumbnail for events in the Event List, and it seems like a common enough thing that folks would want to do…so I’m going to walk you through how to do it.

A Screenshot of What We’ll Be Doing

Making The Template Changes

Find /wp-content/plugins/the-events-calendar/views/list.php, copy it and place your copy in an ‘events’ folder in the theme directory (on your server). We’re going to be modifying this file, and instead of modifying the core plugin, we make a copy of the specific file and put it in our theme to override the core plugin template. This will preserve our changes the next time you update the plugin.

Open the file in your favorite text editor. First, find line 30 and add the following on a new line after line 30 (create some spaces between line 30/31):

<?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { ?>
	<div class="list-thumbnail">
		<?php the_post_thumbnail('thumbnail'); ?>
	</div>
<?php } ?>

This code is going to check if there is a post thumbnail attached to the event and if so, output the post thumbnail wrapped in a div with the class of .list-thumbnail.

If you want to have the image link to the event, simply wrap the thumbnail in your event link with the following:

<?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { ?>
	<div class="list-thumbnail">
		<a href="<?php echo tribe_get_event_link(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
	</div>
<?php } ?>

Next, we’re going to wrap the rest of the individual event content in another div that we’ll float next to the list-thumbnail div if there is one. So, where the beginning of the event was on line 31 (before you added the above code and spacing) – it was this line:

<?php if ( tribe_is_new_event_day() && !tribe_is_day() ) : ?>

…add the following before that line (but after the thumbnail code):

<div class="list-content <?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { ?>with-thumb<?php } ?>">

This is the start of the div we’re going to wrap each event in the list with. I’m giving it a class of .list-content and a conditional class of .with-thumb that will only be applied if the event has a thumbnail.

The only other thing we’ve got to do in list.php is close this new event wrapper div. Find what was line 108 with this code:

</div> <!-- End post -->

…and add another closing div tag right before it. So you should now have this:

</div><!-- End list-content -->
</div> <!-- End post -->

Make sure to save the file before moving on.

Adding The CSS

Finally, we just need to sprinkle in some CSS to get everything looking good. Now, note that you may have to modify this part a bit to get everything looking good in your own theme but this should give you a good base to work off of and if you need specific help, just hit me up in the comments.

Open up /wp-content/plugins/the-events-calendar/resources/events.css, make a copy and place in the ‘events’ folder you created earlier (unless you’ve already done so). Add the following to the bottom of the file:

/* Styling for Thumbnail in list.php */
.list-thumbnail {
	float: left;
	margin: 15px 15px 0 0;
	width: 150px;
}

.list-content.with-thumb {
	float: left;
	width: 630px;
}

All we’re doing here is floating the two divs together – remember the .list-thumbnail div will only be there if the event has a thumbnail and likewise the .list-content div will only get the .with-thumb class (conditionally applying the above styling).

Wrapping Up

That’s it! We could of course improve upon this or do it differently, but this is one of the easiest ways to do it. Hopefully this has been helpful. Feel free to hit me up in the comments if you have any questions :)

Source Files

Here are the list.php and events.css files with the changes I’ve made: http://cl.ly/301a3t3S0d3V1W3Y3E1j

24 Responses to Add the Post Thumbnail to Your Event List

  1. Enrico Golias says

    This is also a good way, based on your code:

    http://open-mind-akademie.de/termine/

    bye

    enrico

    • gerardo says

      I really like what you did with the calendar. How did you change the color, font size and thumb size?

  2. gerardo says

    Hello Jonah thanks for the info!
    I need to make my images smaller like 75PX. I tried changing that on the CSS but didn’t work. Can you help?
    Also, where do I modify the font size and style to match my site?
    Also, as you can see, the layout of the calendar is breaking my social icons in two rows. Why is that?
    Thank you!
    http://www.fabrikamedia.com/events/

    • Jonah says

      Hey gerardo,

      If you want to use a different thumbnail size the best thing to do would be to use the add_image_size() function (http://codex.wordpress.org/Function_Reference/add_image_size) in WordPress to add a custom image size. You’ll need to then use a plugin like http://wordpress.org/extend/plugins/regenerate-thumbnails/ to be able to regenerate your post images for all existing posts, generating thumbnails with your new custom size. Then in list.php, call the_post_thumbnail(‘your-custom-image-name’); instead!

      I hope that helps!

      Cheers,
      Jonah

      • gerardo says

        I think I’m a little more confused than yesterday! :/
        Is there a way to chat?
        You mean the thumb size of the calendar is controlled by the main sizes defined in my wordpress setup?

        • Jonah says

          Hey gerardo,

          Sorry, no way to chat… :) Basically in WordPress there are default image sizes defined but you can specify your own via add_image_size() and then use the new image size in your templates. There are tons of articles online about add_image_size and using custom image sizes in WordPress. I recommend you read up a bit and see what’s it all about.

          Cheers,
          Jonah

    • Maria Paz says

      You can also try this:
      .list-thumbnail img{
      height: 75px;
      width: 75px;
      }

      paz

  3. gerardo says

    also… where do I change font size/style?

    • Jonah says

      Hey Gerardo,

      You can change fonts and other styling in your theme’s style.css file or by editing the plugins CSS file located in /wp-content/plugins/the-events-calendar/resources/events.css – if using the plugins CSS, make a copy and place in an ‘events’ folder in your theme.

      Cheers,
      Jonah

  4. Carl says

    I want to do this same thing (wrap an image to the left) to my single event page (views/single.php) but am not sure of how to do this because of the array. Is this approach applicable to the single event page as well or will I have to do something totally different?

    • Jonah West says

      This should work fine in single events. What issues are you running into?

      - Jonah

      • Carl says

        The issue I’m having is that the thumbnail in single.php is appearing as super tiny. I’m just not sure on how to edit the .css and where to insert it after editing. Thanks for your awesome help and superb skills though!

        • Carl says

          Also, I’ve added the two files you listed in this article and the post thumbnail is appearing above my posts, not to the left with a wrap. Any thoughts? Here’s the url: http://goo.gl/0F32Y

          • Jonah West says

            Hi Carl,

            Since you have a narrower layout you will need to reduce the width of the content div to 400px:
            .list-content.with-thumb {
            float: left;
            width: 400px;
            }

            In the single.php view, you will need to use a bigger post thumbnail there. If you look at the documentation for the_post_thumbnail(), it takes paramaters for size: http://codex.wordpress.org/Function_Reference/the_post_thumbnail

            For instance you can pass in a parameter of “large” to have it use a large version instead:
            the_post_thumbnail(‘large’);

            Or, you can also pass in custom values to the function:
            the_post_thumbnail( array(400,200) );

            I hope that helps!

            - Jonah

  5. Ramona says

    I followed this tutorial and even addedthe supplied files instead of trying my own and I still don’t get a thumbnail image in my list view. I get an in the single event page, but nothing like the example you’re showing here. What am I missing? I even tried adding the image as the featured image, but still nothing. thanks.

    • Rob La Gatta says

      Hi again Ramona. That’s a good question; Jonah (who wrote this tut initially) is out on sabbatical this month so I unfortunately cannot get him to respond directly. But if you’re a PRO user would you mind posting this on the forums at http://tri.be/support/forums ? If I have a forum link I can pass that on to another dev from the team, who can review your code and confirm whether anything has changed about this.

      Thanks in advance!

      • Ramona says

        Wow, just getting back to this. Site is live now. Client is not a Pro user.

        • Rob La Gatta says

          Thanks Ramona; no problem. Jonah returns from sabbatical this week so I can get him to take a look directly here. While we generally can only provide specific integration guidance to PRO users on the forums, we’ll definitely do what we can to assist you if this is still a concern…let me know.

    • Jonah West says

      Hi Ramona,

      Sorry to hear this didn’t work for you. I’ll need some more information and examples from you before I can troubleshoot though. Can you tell me what you’ve done and provide some code samples?

      Thanks,
      Jonah

  6. Michael Patino says

    This is not working for me either. I am a PRO user. I will post on the forums as well.

    • Jonah West says

      Hi Michael,

      We’ll keep an eye out for your post in the forums.

      Thanks,
      Jonah

  7. Ellen says

    Hi.
    Thanks for this tutorial. It’s just what I need but unfortunately I can’t make it work. The thumbnail just doesn’t show and I don’t have an option to select a feature image when editing an imported event from Facebook or when creating an event. I’m making my own theme and have added the following to the functions.php. in order to have feature images for posts.

    if ( function_exists( ‘add_theme_support’ ) ) {
    add_theme_support( ‘post-thumbnails’, array(‘post’));
    set_post_thumbnail_size( 593, 450, true ); // default Post Thumbnail dimensions (cropped)
    add_image_size( ‘category-archive’, 200, 283, true );
    add_image_size( ‘category-projects’, 220, 220, true );
    }

    My event page is here
    http://www.blus.dk/test/?post_type=tribe_events

    Should I add something to the functions.php file?

    I hope you can help me.
    Ellen

    • Jonah West says

      Hi Ellen,

      Sorry to hear you can’t get this working. Can you please recreate this as a forum post? It will help us better organize things. I or someone else will help you there. I’m going to close out comments on this for everyone now.

      Thanks,
      Jonah

  8. Jonah West says

    Hey everybody, we’ve decided to close out comments on this post. If you need any help or have questions related to this, please post them to our forum: http://tri.be/support/forums/

    Thanks,
    Jonah