How To Show Featured Thumbnails in The Next Events Widget

Published on: November 10, 2011 | Categories: Tutorial

Recently we had a request come up in the forums which was “I would like it so that the “Next Event” widget will also show the thumbnail for that event” and I thought I’d write a tutorial up on this.

Note: this widget is only available with Events Calendar Pro and you will need to purchase a license for Pro in order to be able to take advantage of this particular tutorial although you could apply this similarly to the other widgets in the plugin.

Here is a screenshot of what we’re trying to accomplish:

Full PHP Source: http://pastebin.com/D2TWp4Qf

Create An ‘events’ Folder In Your Theme

Browse to your theme directory and create an ‘events’ folder if it doesn’t already exist. This is the foundation for overriding the default TEC/ECP events.css styles as well as the main view templates for the plugins.

Make a Copy Of The Widget View Template

The widget view templates is located in plugins/events-calendar-pro/views/widget-featured-display.php – place this in your themes ‘events’ folder. This will override the default view template and allow you to make your own customizations while retaining the core view template which will not be overwritten when you update!

Add Thumbnail Code

Around line 40 in widget-featured-display.php, inside the div with a class of ‘event’, add the code to pull in your events featured thumbnail:

<?php if(has_post_thumbnail($post->ID, 'thumbnail')):
$image_id = get_post_thumbnail_id($post->ID);
$image_url = wp_get_attachment_image_src($image_id, 'thumbnail', true); ?>
<a href="<?php echo get_permalink($post->ID) ?>" class="post-thumb"><img src="<?php echo $image_url[0]; ?>" alt="<?php echo $post->post_title ?>" /></a>
<?php endif; ?>

I’m using the ‘thumbnail’ image option but you could change this to the other default image sizes or even a custom one you’ve registered. You could also implement Timthumb into the mix for some image resizing on the fly!

Sprinkle Some Styling In

Notice in the code that I added a class of ‘post-thumb’ to the link wrapping the image. This will allow us to easily style our post images within the widget with something like:

.TribeEventsFeatureWidget .post-thumb {
	float: left;
	margin: 0 10px 0 0;
}

.TribeEventsFeatureWidget .post-thumb img {
	height: auto;
	width: 50px;
}

…which you’ll want to place in your own copy of events.css again in the ‘events’ folder you created earlier. Make sure you paste in all the default styling from the stock events.css file though!

Conclusion

That’ll do it! You should now be able to see any Featured Images that you’ve attached to your events in the widget. Of course there are a lot of other methods/techniques/ideas you could throw in here like changing the widget markup a little more or modifying the styling more to get it just the way you need. Hopefully this get’s you going in a good direction though. If you have any questions, hit me up in the comments :)

15 Responses to How To Show Featured Thumbnails in The Next Events Widget

  1. karen says

    I hate to be a pill and not search this stuff, but it is not evident how one might add a photo to the Events List t view. I see how one can add a photo to a widget. Thanks!

    • Jonah says

      Hi Karen, no problem. If you want to use a featured image in the list view you just need to add the featured image display code in /wp-content/plugins/the-events-calendar/views/list.php (make a copy and put in an ‘events’ folder in your theme). The code for displaying a featured image is:


      if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
      the_post_thumbnail();
      }

      If you want specific sizes for your featured image and for more information, you should read up on featured images here: http://codex.wordpress.org/Post_Thumbnails

      • aliseya says

        Jonah,

        Thanks for posting this. I was looking for how to customize the list display without changing the core plugin install, so thanks for explaining how to do that. Also, I checked out your website – very nice portfolio!

        • Jonah says

          Thanks Aliseya, glad I was able to help you customize the list display :)

  2. John says

    For 2.0.6, (and maybe before) this has changed.

    File is called: events-list-load-widget-display.php

    The code goes beneath the div “when”

    For the css, I’m using:

    `.when .post-thumb {
    float: left;
    margin: 0 10px 0 0;
    }

    .when .post-thumb img {
    height: auto;
    width: 50px !important;
    }`

    • Rob La Gatta says

      Thanks for the heads up, John. I’ve asked Jonah (who wrote this initially) to double check and if he can verify the code you’re using, to update the post above to reflect that. Thanks for the heads up!

    • Jonah says

      Hi John,

      widget-featured-display.php is still the correct file. This is for the Next Event Widget whereas events-list-load-widget-display.php is for the open source Events List Widget. You could use very similar code (if not the same code) in the events-list-load-widget-display.php file to modify the Events List Widget or if using Pro, the events-advanced-list-load-widget-display.php file.

      I hope that makes sense but let me know if you have any other questions.

      Thanks,
      Jonah

  3. karen says

    Jonah, I am finally getting back to adding a featured Thumbnail in my list.php . I have looked the wordpress page, tried to add “alignLeft” to it but I guess I just dont have it right. IT just sits on top of the list. Check out August 16, the Party.. The pop up is great. but the list is all wrong. I am SURE this is a no brainer for you and would appreciate the help as it will take me hours of trial and error. Thanks!

  4. Jonah says

    Hi Karen,

    Would you mind posting your questions and provide examples of what you’ve got so far in our forums? That way we can prevent mucking up the comments here and keep things more organized.

    Thanks,
    Jonah

  5. Adam says

    Um, this is lovely. As soon as I figure out how to make this work for the advanced widget I’m going to have a smiling customer. You guys make me look über pro.

    • Rob La Gatta says

      We try our best :) Thanks for the words, Adam. Always glad to be of service.

  6. Will says

    Hi Rob,

    When you say above “Sprinkle Some Styling In”, oh where oh where do you sprinkle it?

    W

  7. Will says

    The above comment wasn’t a joke, I’m just trying to figure out how to get the advanced widget images to nest better with the text. The portion of code I’d like to sprinkle is this:

    .TribeEventsFeatureWidget .post-thumb {
    float: left;
    margin: 0 10px 0 0;
    }

    .TribeEventsFeatureWidget .post-thumb img {
    height: auto;
    width: 50px;
    }

    • Rob La Gatta says

      Hey Will. Going to need to get Jonah to answer that one, as he wrote this up and it’s a bit outside my area of expertise. I’ve asked him to respond directly.

  8. Pingback: How to Completely Customize Widgets | Modern Tribe Inc.