Event Espresso Featured Images

Posted by on March 28, 2012 in WordPress Development | 6 comments

Event Espresso Featured Images

(or: Zen and the Art of Pseudo-Meta-Boxes) Here’s the account of my four-hour, non-billable ordeal teaching myself about WordPress meta boxes and then being forced to do something almost completely different. “What is a meta box,” you’re asking? Well, you’d be forgiven for not knowing, but I wouldn’t as it turns out.

Upload a Featured Image Using a WordPress Meta Box

This process seemed pretty straight-forward on its face. My original mission was to add the ability for a client to upload a featured image attached to an event in a heavily customized version of the Event Espresso plugin. Without engaging in what would be a completely exhaustive account of the idiosyncrasies inherent in Event Espresso itself, here is what finally worked for me.

I totally got bailed out by Matt at Webmaster-Source and by Austin Passy. A ton of people online have created tutorials for doing something similar, but Event Espresso posed inherent challenges by not relying on WordPress-standard implementations of things like meta boxes (or of most things I encountered for that matter).

The Code

This is the code I needed to insert at the top of my administrative edit action page (edit_event.php):

The media-upload script allows us to call the WordPress media uploader functionality. This is roughly the dialog you see when you set the featured image on a post or page. Also, we want to incorporate the thickbox functionality to enable us to call the media uploader in a nifty popup.

Here’s the content of the media-ul.js file we’re calling above:

This script fires at document load and attaches the functionality we need to the ‘Update Image’ button and handles the form events handed off by the media uploader.

Further down, inside the edit action page (edit_event.php), I had to write a pseudo-meta-box from scratch to display all of this stuff.

Not my most elegant product, but it works just fine. Now I can treat the basic Event Espresso events a bit more like posts. This gives me the flexibility to incorporate featured images into my templates, which are increasingly taking advantage of the featured image.

Astute readers may also note that I had to create another table for the featured image in the database. It’s a simple table with two columns (event_id, and img_path). This means modifying my database queries to include a JOIN or adding an outboard query anywhere I need to implement the featured image, but I’ve done my best to leave Event Espresso’s original code intact as I consider it to be a museum-grade object lesson in how not to structure a commercial WordPress plugin.

6 comments
SethShoultes
SethShoultes

Hi Jonahs,

 

Just ran across this post while searching for something else. Sorry to hear that adding the metabox and image upload script was such a pain. We have added a featured image upload tool to the Event Espresso admin. The featured images are actually stored in the event meta and can be retrieved in the event query.

 

Just wanted to let you know. Take care :)

 

Seth Shoultes

Event Espresso

Barbara
Barbara

A magazine theme would make ur blog look nicer :)

Austin
Austin

didnt know where i should place the last portion of the edit_even.php stuff?

jonahs
jonahs moderator

 @SethShoultes Outstanding! Excellent to hear, Seth!

 

I'll be the first to admit that there are tons of challenges to be overcome in developing any piece of software. It's commendable that you've taken the time here to update my readership on the current state of your product. I'll be happy to review the latest version of Event Espresso whenever a project comes along which presents such an opportunity.

jonahs
jonahs

I'll bite. :) Any designs you like particularly that you could recommend?

jonahs
jonahs

It just needs to be in the sidebar, which is toward the top of the file. I'd recommend placing it after the compulsory update stuff. Search for the '/submitdiv' HTML comment tag. Insert the code right after that.