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):

  1. wp_enqueue_script('media-upload');
  2. wp_enqueue_script('thickbox');
  3. wp_register_script('my-upload', WP_PLUGIN_URL . '/event-espresso.3.1.15.P/scripts/media-ul.js', array('jquery','media-upload','thickbox'));
  4. wp_enqueue_script('my-upload');
  5. wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL . '/event-espresso.3.1.15.P/scripts/media-ul.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
wp_enqueue_style('thickbox');

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:

  1. jQuery(document).ready(function() {
  2.  
  3.     var formfield;
  4.  
  5.     jQuery('#upload_image_button').click(function() {
  6.         jQuery('html').addClass('Image');
  7.         formfield = jQuery('#upload_image').attr('name');
  8.         tb_show('', 'media-upload.php?type=image&TB_iframe=true');
  9.         return false;
  10.     });
  11.  
  12.         // we need to catch the output from the media uploader
  13.         // this is a nifty little workaround that allows us to leave the code for the uploader intact
  14.     window.original_send_to_editor = window.send_to_editor;
  15.     window.send_to_editor = function(html){
  16.  
  17.         if (formfield) {
  18.                         // build the fileurl var from the image src of the selected image
  19.             fileurl = jQuery('img',html).attr('src');
  20.                         // update the image path form field
  21.             jQuery('#upload_image').val(fileurl);
  22.                         // change the hidden field so we can do our db stuff when we hand
  23.                         // the form data off for processing
  24.             jQuery('#upload_image_changed').val('1');
  25.                         // reveal the div with the image in it
  26.             jQuery('#upload_image_display').show('fast');
  27.                         // update the featured image src to show the image
  28.             jQuery('#upload_image_img').attr('src', fileurl);
  29.                         // hide the thickbox we instantiated
  30.             tb_remove();
  31.             jQuery('html').removeClass('Image');
  32.         } else {
  33.             window.original_send_to_editor(html);
  34.         }
  35.     };
  36.  
  37. });
jQuery(document).ready(function() {

	var formfield;

	jQuery('#upload_image_button').click(function() {
		jQuery('html').addClass('Image');
		formfield = jQuery('#upload_image').attr('name');
		tb_show('', 'media-upload.php?type=image&TB_iframe=true');
		return false;
	});

        // we need to catch the output from the media uploader
        // this is a nifty little workaround that allows us to leave the code for the uploader intact
	window.original_send_to_editor = window.send_to_editor;
	window.send_to_editor = function(html){

		if (formfield) {
                        // build the fileurl var from the image src of the selected image
			fileurl = jQuery('img',html).attr('src');
                        // update the image path form field
			jQuery('#upload_image').val(fileurl);
                        // change the hidden field so we can do our db stuff when we hand
                        // the form data off for processing
			jQuery('#upload_image_changed').val('1');
                        // reveal the div with the image in it
			jQuery('#upload_image_display').show('fast');
                        // update the featured image src to show the image
			jQuery('#upload_image_img').attr('src', fileurl);
                        // hide the thickbox we instantiated
			tb_remove();
			jQuery('html').removeClass('Image');
		} else {
			window.original_send_to_editor(html);
		}
	};

});

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.

  1. $feat_img_sql = "SELECT * FROM wp_events_featured_img WHERE event_id = '" . $event_id . "'";
  2. $feat_img_data = $wpdb->get_row($feat_img_sql);
  3.    
  4. $feat_img_inside = "<div class='misc-pub-section'>" . __('Image File', 'event_espresso') . "";
  5. $feat_img_inside .= "<input type='text' id='upload_image' name='upload_image' value='";
  6. if (!empty($feat_img_data->img_path)){
  7.     $feat_img_inside .= $feat_img_data->img_path;
  8. } else {
  9.     $feat_img_inside .= "Click Update Image!";
  10. }
  11. $feat_img_inside .= "' style='width:100%' /></div>";
  12. $feat_img_inside .= "<div id='upload_image_display' class='misc-pub-section misc-pub-section-last'";
  13. if (empty($feat_img_data->img_path)){
  14.     $feat_img_inside .= " style='display:none'";
  15. }
  16. $feat_img_inside .= "><img id='upload_image_img' src='" . $feat_img_data->img_path . "' style='width:258px' /></div>";
  17. $feat_img_inside .= "<div style='padding:5px 10px'><input type='hidden' name='upload_image_changed' id='upload_image_changed' value='0' />";
  18. $feat_img_inside .= "<input class='button-primary' id='upload_image_button' type='button' value='Update Image' /></div>";
  19.  
  20. ?>
  21.  
  22. <!-- BEGIN Featured Image Options -->
  23. <div id="feat-img" class="postbox">
  24.     <div class="handlediv" title="Click to toggle"></div>
  25.     <h3 class="hndle"><span><?php _e('Featured Image', 'event_espresso'); ?></span></h3>
  26.     <div class="inside" style="padding:0;margin:0">
  27.         <?php echo $feat_img_inside; ?>
  28.     </div>
  29. </div>
  30. <!-- END Featured Image Options -->
$feat_img_sql = "SELECT * FROM wp_events_featured_img WHERE event_id = '" . $event_id . "'";
$feat_img_data = $wpdb->get_row($feat_img_sql);
	
$feat_img_inside = "<div class='misc-pub-section'>" . __('Image File', 'event_espresso') . "";
$feat_img_inside .= "<input type='text' id='upload_image' name='upload_image' value='";
if (!empty($feat_img_data->img_path)){
	$feat_img_inside .= $feat_img_data->img_path;
} else {
	$feat_img_inside .= "Click Update Image!";
}
$feat_img_inside .= "' style='width:100%' /></div>";
$feat_img_inside .= "<div id='upload_image_display' class='misc-pub-section misc-pub-section-last'";
if (empty($feat_img_data->img_path)){
	$feat_img_inside .= " style='display:none'";
}
$feat_img_inside .= "><img id='upload_image_img' src='" . $feat_img_data->img_path . "' style='width:258px' /></div>";
$feat_img_inside .= "<div style='padding:5px 10px'><input type='hidden' name='upload_image_changed' id='upload_image_changed' value='0' />";
$feat_img_inside .= "<input class='button-primary' id='upload_image_button' type='button' value='Update Image' /></div>";

?>

<!-- BEGIN Featured Image Options -->
<div id="feat-img" class="postbox">
    <div class="handlediv" title="Click to toggle"></div>
    <h3 class="hndle"><span><?php _e('Featured Image', 'event_espresso'); ?></span></h3>
    <div class="inside" style="padding:0;margin:0">
       	<?php echo $feat_img_inside; ?>
    </div>
</div>
<!-- END Featured Image Options -->

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
  Livefyre
Newest | Oldest
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

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.

Barbara
Barbara

A magazine theme would make ur blog look nicer :)

jonahs
jonahs

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

Austin
Austin

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

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.