OWASP O2 Platform Blog

Testing using GitGub hosted images for WordPress.com blog posts

One of the things that has been a massive pain when writing these blog posts has been the really bad workflow that WordPress.com has to deal with image’s uploads.

The workflow that I want is one where I can take a screenshot into my local clipboard and ‘automagically’ that image is available to be inserted in the blog (I’m happy to wait a coupe seconds as long as no other action is needed).

In the past, I did come up with a ‘semi automated way’ to upload these images via WordPressweb GUI (see O2 Script to automatically upload clipboard images to WordPress.com), but it was not 100% stable and recently that O2 script stopped working since WordPress.com changed its own image uploading code .

Since I’m now heavily into Git, and GitHub, I was thinking ‘why don’t I copy the image from the clipboard into a local Git Repository, then push that repository to the web, and expose the GitHub raw link available’

And with the latest version of O2 (in .NET 4.0 + native .NET Git suport) I was able to build such Gui.

Here it is in action:


After taking a screenshot, click on the ‘Commit…’ link and eventually the image will be shown in a WebBrowser and the image URL is also placed in the clipboard (for example https://github.com/DinisCruz/Images/raw/master/images/3_18_2012_6_00_48_AM.jpg)

Now to add an image to a blog post (like this one), one can use the url in the clipboard, or just drag and drop the image from the WebBrowser:

Here is the code that creates this GUI

var topPanel = O2Gui.open("Util - Copy Clipboard Image to GitHub Repository",400,400);
//var topPanel = panel.clear().add_Panel();
var actionsPanel = topPanel.insert_Above(40, "Actions");
var url_TextBox = topPanel.insert_Above(20).add_Label("Image Url").append_TextBox("").align_Right();
var browser = topPanel.add_WebBrowser_Control();
var localRepository = @"C:\_WorkDir\O2\Images";
var nGit = new API_NGit();
actionsPanel.add_Link("Open Screenshot tool", ()=> API_Cropper.openGui())
            .append_Link("Commit image from clipboard and push",
                                var image = localRepository.pathCombine("images").createDir().saveImageFromClipboardToFolder(); 
                                if (image.notNull())
                                    var o2Timer = new O2Timer("upload to Git").start();
                                    var url = "https://github.com/DinisCruz/Images/raw/master/images/{0}".format(image.fileName());
                                    "Current Status: {0}".info(nGit.status());
                                    "Url copied to Cliboard: {0}".info(url);

return nGit;


March 18, 2012 - Posted by | .NET, GitHub

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: