Visual Studio Fun: Chirpy is Awesome!

John Hoff — Fri, 20 Jan 2012 17:11:46 +0000

Managing the CSS and JavaScript files of a website can be an extremely frustrating, but rewarding experience. I've been introducing tools at work to help manage this experience such as SASS, LESS, CoffeeScript, etc, with mixed results. By themselves, each of these tools do a great job, but how to I leverage their power together? Having fifteen JS and CSS includes in a site is still extremely inefficient. Chirpy is a tool that helps to bring all of this together in one plugin in Visual Studio...but I see a lot of people completely missing the most powerful feature of Chirpy: FileGroups.

This CSS and JS on my blog is admittedly inefficient. I'm here to write about code, not spend all my time coding so that I can write about code. However, it is a great example of how NOT to keep your JavaScript and CSS files organized: 10 individual CSS requests and 15 individual JavaScript requests. If all of the JavaScript files were being called at just before the end of the body tag and if all of the CSS files are part of the same media type they can be combined into a single file. I try to follow the YSlow conventions where possible.

Chirpy allows for this to be done in a Visual Studio project at build time. If you have already gone through the tutorial and are starting to work through adding your own chirp files into Visual Studio. You need to start maching files together with Chirpy using *.chirp.config files. I've included a quick screenshot that I am using on a project to illustrate how I've organized things. This is an ASP.NET MVC3 project. I have included folders for css and javscript inside ~/Content/. The Bundle.chirp.config file is pulling everything from there and generating five virtual files...and that is all of the content required for the entire site!

I have to mention that the ~/Scripts folder has been left alone as that is where the conventions dictate that JavaScript files should go. I break this convention and say that only Library JavaScript files that are provided by NuGet reside. In my projects, NuGet loads script files into ~/Scripts/, I load script files into ~/Content/js/. I also have to note that my less files are not *.chirp.less files. As we are using the FileGroup to bundle everything together, Chirpy will parse those files when it compiles the group! You can also mix-and-match CSS, LESS and SESS files to your hearts content.

So what does my Bundle.chirp.config look like?

-->

Now i have the 5 files that I am ready to include. Why 5 files? I need to support IE 7,8,9. The labels on the bundle give some hints to the logic, but looking at the HTML in the template should clear it all up.

Header HTML:

Footer HTML:

Now I have 13 files being reduced to 5. I'm confident that I will be adding more files as I complete the project—and I am even more confident that 5 files are all that I will be including in my HTML pages.

Hijack the WordPress Media Gallery

John Hoff — Thu, 06 Aug 2009 21:05:57 +0000

I have a friend that wants to update a banner on his WordPress blog homepage without changing the template files. I tell him I'd be glad to help him out and start working on a plugin that provides a custom administration page to allow for this. As I am a firm believer in the power of a lazy coder to get things done faster and better, my first thought was: "Why don't I just see if I can hijack the 'Select Image From Gallery' page to do this?" After all, it just pops up into an Iframe page and tells post editer to insert an image. Hijacking that process for my own ends shouldn't take me but a few minutes...and a lot less time than trying to build my own media selector. Like nearly all the content on my site, if you are reading this, I wasn't able to find my answer elsewhere.

First, we will examine how the media library iframe is launched from the post editor and how we can duplicate that in our plugin. So lets crack open the page source and see what we can find:

Looks like a standard hyperlink, with some extra information in the tag. What first jumps out at me is the onclick="return false;". By having an onclick return false in a hyperlink, you ensure that a browser with javascript will never open the link when it is clicked. Sounds pretty silly until you remember that WordPress is a big user of JQuery. From there, we know to look at the class of the hyperlink, class="thickbox". This is a reference to the Thickbox 3.1 library found at /wp-includes/js/thickbox/thickbox.js. This is a library to load an iframe inside an overlay with the background greyed out. Further, it uses the href of the anchor tag to know where to pull the iframe content from.

A quick check of the source on our custom page shows that Thickbox is being loaded in the footer, so we do not have to call it directly from our custom wp-admin page. I can just call up the media library with some html code:


" width="450" height="25" />

The snippet displays an image with the source of $banner_image that can be clicked on to open the Media Gallery iframe. I have also added a hidden form input to store the resulting information passed back from the media library. Once done, I now have an image on my admin page that I can click on to call up the media library.

We're half-way there now! All we have to do next is figure out how the media library sends an image to the post editor. This part isn't as easy. Thanks to thickbox, the media library opens up in an inline-iframe. This means that we can't just view the page source and find our answer. Instead, the only clue we have to hunt for is the "Insert into Post" button. A quick file search turns that up in /wp-admin/includes/media.php. From there, we discover the onclick of the button, onclick="addExtImage.insert();", which is thankfully also in the media.php file. At the end of the function, we see exactly what we are looking for:

var win = window.dialogArguments || opener || parent || top;
win.send_to_editor(html);

The media library calls the function send_to_editor in the scope of the window that opened the media library--our admin page! We can add our own function into the admin page and collect the html that the media library sends us:

function send_to_editor(html) {
    alert(html);
    tb_remove();
}

Once done, we can open the media library from our admin page and select an image. When we hit the "Insert into Post" button, we get an alert with the following content:

All we have to do now, is strip out everything but the image source and updates the form. First, the function eliminates all of the text returned except the image source. It then updates the banner image and the hidden input value that I am using in my form:

function send_to_editor(html) {
    var source = html.match(/src=\".*\" alt/);
    source = source[0].replace(/^src=\"/, "").replace(/" alt$/, "");
    $("#banner_image").attr('src', source);
    $('#banner_image_input").attr('value', source);
    tb_remove();
}

I fire up the admin page a final time, and everything works! I now have a custom admin page that allows my friend to update a banner on his wordpress site using the media gallery.

The Braindonor Network » Javascript

Visual Studio Fun: Chirpy is Awesome!

Hijack the WordPress Media Gallery