Nothing But Words

• Eidan and I have arrived in Newport. I think he was playing "stupid zombies" for the entire drive here. Maria and Kai arrive on Saturday #fb #
• @olmillos Please give me a link to your site so I can see. The most common problem is Google Anaytics plugins messing with Highslide. in reply to olmillos #
• @olmillos I looked around and found http://t.co/9i2iWGiX and that page looks ok. Can you give me a link to the page where there's a problem? in reply to olmillos #
• A beautiful December day in Newport – Eidan and I had the playground to ourselves #fb http://t.co/2UQepEKG #
• I'm not a boat expert, but if I were, I'd tell you this is a fine example of a mid century something or other #fb http://t.co/4iYaBzha #
• The Newport Bridge on Christmas Eve http://t.co/QLCE1bIG #

Video: Kai and his fellow black belts performing at his karate graduation View at Picasa Video: Kai and his fellow black belts performing at his karate graduation

Video: Eidan performing at his karate graduation View at Picasa Video: Eidan performing at his karate graduation

Friday night the boys received their next karate belts. Kai earned his youth black belt earlier this year, and now has one with an orange stripe on it, indicating his progress towards his adult black belt. Eidan received his blue belt, which is about halfway to black belt. For the first time, Eidan did not have performance anxiety when it was time for his class’ demo, which was great to see (he’s younger than the other kids in his class, and with all the parents there, he used to just sit and stare at the floor). This was also the first time the black belts all got together to do a choreographed demo together, which was fun to see. Check out the video – it’s short, and they did a nice job.

Khai and Kai with their new belts View at Picasa Khai and Kai with their new belts16-Dec-2011 21:02, Canon Canon PowerShot SD780 IS, 3.2, 5.9mm, 0.067 sec, ISO 800

Eidan, wiping sweat on his new belt View at Picasa Eidan, wiping sweat on his new belt16-Dec-2011 20:39, Canon Canon PowerShot SD780 IS, 5.8, 17.9mm, 0.125 sec, ISO 800

• I've always wished my computer would be as easy to use as my phone. My wish has come true.I no longer know how to use my phone. B.Stroustrup #
• I just uploaded Shashin 3.0.9, to make it compatible with WP 3.3's new media menu. Beware forthcoming rant on how arcane the media menu is. #
• For Shashin users, if you're wondering where its media button went, the Shashin menus are now tabs under WP 3.3's new, unified media menu #

WordPress 3.3 introduced a new, unified media menu, where the functionality that used to be accessed through several different menus is now all in one. If you are a plugin developer, and you want to create a custom media menu, you will discover WordPress’ media menu is an arcane and fickle beast. The general reason it’s challenging to work with is that the media menu lacks a complete API. I put several hours of code archaeology work into teasing out its functionality, so this post can guide you through using it. There are two approaches.

Approach one: use ThickBox directly

The WordPress media menu is displayed using ThickBox. One approach is to simply invoke ThickBox directly from your own media button, and not rely on WordPress’ filters or hooks beyond that. This is the simplest approach, and is suitable for many purposes, but it prevents you from using WordPress’ filters and hooks for applying stylesheets to it, or using menu tabs. This is the approach used by the Gravity Forms plugin. Here is the relevant parts of the Gravity Forms code, slightly re-arranged, to show how it all fits together:

1. Add the Gravity Forms button to the media menu (“RGForms” and “GFCommon” are custom Gravity Forms classes)

   add_action('media_buttons_context', array('RGForms', 'add_form_button'));
   
   public static function add_form_button($context){
       $image_btn = GFCommon::get_base_url() . "/images/form-button.png";
       $out = '<a href="#TB_inline?width=480&inlineId=select_gravity_form" class="thickbox" id="add_gform" title="' . __("Add Gravity Form", 'gravityforms') . '"><img src="'.$image_btn.'" alt="' . __("Add Gravity Form", 'gravityform') . '" /></a>';
       return $context . $out;
   }

2. Add to the editor page footer the javascript and html that will be shown in the thickbox window when the media button is clicked.

   if(in_array(RG_CURRENT_PAGE, array('post.php', 'page.php', 'page-new.php', 'post-new.php'))){
       add_action('admin_footer',  array('RGForms', 'add_mce_popup'));
   }

3. In the function below I’ve removed the javascript code that reads the form inputs. The call to send_to_editor passes the resulting Gravity Forms shortcode to the editor window. After that is the html code that displays the form. The display: none style is important: the form is hidden at the bottom of the editor page, and then shown in the ThickBox window when the media button is clicked (the media button link refers to the id of this div). I’ve also removed the input form, which has all its CSS styling done inline (with this approach, there’s no straightforward way to call an external stylesheet).

   function add_mce_popup(){
       // ...not shown - javascript that reads the form inputs
   
       window.send_to_editor("[gravityform id=\"" + form_id + "\" name=\"" + form_name + "\"" + title_qs + description_qs + ajax_qs + "]");
       // ...
   
       <div id="select_gravity_form" style="display:none;">
       // ...not shown - html for the form
   }

Approach two: use WordPress’ filters and hooks

Due to a code change in WordPress 3.3, you can no longer use your own media button if you want to create a menu with custom tabs (or, at least, I couldn’t figure out how). With this approach, your menu will be accessible as a new tab in WordPress 3.3′s unified media menu. I’ll use code from my Shashin plugin as an example.

1. Register the function that will add tabs to the media menu. The function then adds tabs to the media menu array ($tabs contains the pre-defined WordPress menu tabs)

   add_filter('media_upload_tabs', array($this, 'addMediaMenuTabs'));
   
   public function addMediaMenuTabs($tabs) {
       $shashinTabs = array(
           'shashinPhotos' => __('Shashin Photos', 'shashin'),
           'shashinAlbums' => __('Shashin Albums', 'shashin')
       );
       return array_merge($tabs, $shashinTabs);
   }

2. Use the media_upload_* action to register the functions that will load the contents for the Shashin menus. It’s crucial that the last portion of the action name match the array keys added to the tabs in the previous step.

   add_action('media_upload_shashinPhotos', array($this, 'initPhotoMediaMenu'));
   add_action('media_upload_shashinAlbums', array($this, 'initAlbumMediaMenu'));

3. For the remaining steps I’ll just show the “shashinPhotos” tab, as the albums one is similar. Calling admin_print_styles with -media-upload-popup lets you pass your own css file to the media menu, for your custom tab. wp_iframe loads your html into menu.

   public function initPhotoMediaMenu() {
       add_action('admin_print_styles-media-upload-popup', array($this, 'displayMediaMenuCss'));
       return wp_iframe(array($this, 'mediaDisplayPhotoMenu'));
   }

4. Load your custom css

   public function displayMediaMenuCss() {
       $cssUrl = plugins_url('/Display/', __FILE__) .'media.css';
       wp_enqueue_style('shashinMediaMenuStyle', $cssUrl, false, $this->version);
   }

5. It’s crucial for this function name to start with the word media. WordPress uses this as a cue to load its standard css for the ThickBox window. Without it, the tabs and other aspects of the window will not get the correct layout. media_upload_header loads the menu tabs. After that, put in your javascript and html for what you want to display for this tab. Like the Gravity Forms example above, you need to call WordPress’ send_to_editor javascript function to insert the final result into the editor.

   public function mediaDisplayPhotoMenu() {
       media_upload_header();
   
       // ... not shown - javascript and html for the menu
   }

Before WordPress 3.3, the Shashin plugin had its own media button, that launched a media menu with two custom tabs. From what I can tell, there is no straightforward way to do this in WordPress 3.3. It used to be possible to have tabs that were independent of the tabs that are part of the standard WordPress media uploader. But now if you want to have custom tabs, you can’t have them as part of a custom menu – you have to add them to the existing media uploader tabs. So for Shashin, I decided to take this approach, as the only alternative would be to add two buttons to the media button bar, and have two separate media menus instead of one menu with two tabs.

• I'm hoping the Japanese government approves the budget for this, so I can sign up! http://t.co/JIdhQXja #fb #
• A great story of reverse corporate espionage. For programmers, it'll make you want to write clean,self-documenting code http://t.co/8Yt4sowo #
• Great, now I need to build a 2nd kitchen, for preparing inadvertently stimulating vegetables – thanks @CatWarr http://t.co/CpNdaOGe #fb #
• Too bad the Republican candidate with the most sensible economic ideas is the least likely to get the nomination http://t.co/M4zedNpO #fb #
• "The test of a vocation is the love of the drudgery it involves." Logan Pearsall Smith #fb #

Cracked sewer pipe in the basement View at Picasa Cracked sewer pipe in the basement08-Nov-2011 10:07, Canon Canon PowerShot SD780 IS, 3.2, 5.9mm, 0.067 sec, ISO 500

Cutting the sewer pipe View at Picasa Cutting the sewer pipe08-Nov-2011 11:09, Canon Canon PowerShot SD780 IS, 4.5, 10.551mm, 0.067 sec, ISO 640

I replaced the cracked section with PVC View at Picasa I replaced the cracked section with PVC08-Nov-2011 18:34, Canon Canon PowerShot SD780 IS, 3.2, 5.9mm, 0.067 sec, ISO 640

These pictures are from about a month ago. The sewer pipe in our basement cracked, allowing lovely sewage water to flow across the basement floor. It’s old iron pipe, and decades of noxious gases in the pipe had finally eaten their way through it, causing a long crack across the top. A different section of the pipe failed a couple years ago, and I had to rip open the living room wall and bathroom floor to fix it. This repair was easier, as it was a horizontal section of pipe running along the floor. And since it wasn’t bearing any weight, I could replace the damaged section with PVC instead of iron pipe, which also made it easier.

But it still wasn’t fun. I enjoy home improvement projects, but not emergency, foul smelling ones like this. The hardest part was making the join on the final section of PVC, as I had no wiggle room at that point. That last joint ended up having a very small leak when I was done, but I applied a few extra coats of PVC glue over several days, and that took care of it.

I’m dreading when the next section of iron pipe inevitably fails, and which section it might be.

• Good article on iCow (a mobile app used by Kenyans to manage their herds) and iHub, Kenya's high-tech incubator http://t.co/2k7YLg1o #
• hmm… @williamsba is it your code that's awesome, or the beer you're drinking while writing it? in reply to williamsba #
• If, after sitting on the toilet a bit too long, your 6 year old shouts "I must focus!", you'll know good things are not about to happen #fb #

Update 12/13: the Shashin media menu is not working in WordPress 3.3. I’ll see how they’ve changed the media menu and try to have a fix in the next few days. In the meantime, you can still add shortcodes by hand (you can see the album ids and photo ids in the Shashin Tools menu).

Update 12/14: ….And I just uploaded a fix – version 3.0.9. Note that the Shashin media menus are now available as tabs within WordPress 3.3′s new, unified media menu. So Shashin no longer has it’s own media button. I’ll explain why in an upcoming post.

Last night I uploaded Shashin 3.0.8. If you were browsing photos in one album after another, in some circumstances you’d get spurious Highslide navbars stacking up on the top left side of the page. It’s fixed now. It had to do with the complexities of having different kinds of photo groupings going on at the same time in Shashin – there can be multiple groups of albums on a page, groups of photos within albums, photo-by-photo navigation within Highslide, and “page-by-page” navigation using the Shashin “next” and “previous” links. Getting all of them working together seamlessly has proven to be the most challenging (and therefore rewarding!) part of working on Shashin.

I expect this to be the last maintenance release for Shashin 3.0 (knocking on wood, crossing fingers…). For 3.1 I am planning to add support for Highslide thumbstrips and introduce lazy loading of the photos. I had done some initial work on adding Flickr support, but the Flickr API is fairly complex, so I’m going to put off Flickr to version 3.2, as I’ve been getting a lot of requests for the thumbstrips feature.

Please use the comments section for any support questions.