Uploading images with a firefox extension
May 6, 2009 at 10:34 am | In FireFox Extension, Website Development | Leave a CommentTags: addon, bbcode, extension, firefox, forum, free, howto, image, lol, lolcat
I’ve blogged before about some of the technology behind the free DirtMind image gallery so here’s some more…
For a long time I’ve wanted to make uploading and using images on forums simpler. FireFox gives us the capabilities to do this since when writing a firefox extension you’ve got access to a bit more functionality than you normally do from javascript as it’s trusted code.
The mission, upload an image by right clicking on it, generating all necessary BBCode.
The solution:
1) Write a nice XUL user interface for adding right click options to the firefox browser, selecting a local picture, establishing selection of a remote picture and providing nice upload feedback
2) Using the firefox extension encode the local image, or download a remote image and encode it (without saving a local file – that would be cheating)
3) Upload to the image host, decode the image data back into a picture.
After that it’s easy because we’re just into the normal serverside image processing stuff that the image host does.
Here’s some screenshots of it in action:
Because of the other stuff I’ve blogged about before in terms of image captioning and deep site integration with phpBB you can now upload an image, caption it and post it extremely easily. Check out this HQ video of the whole process!
Or watch in in lower quality on youtubte:
Make your own lolcats, rofls and captions online
May 1, 2009 at 1:27 pm | In Blog, Website Development | Leave a CommentTags: caption, chrome, firefox, free, hosting, ie, image, javascript, lol, lolcats, online, rofl, safari
I decided I wanted to allow DirtMind site members to be able to add captions to images easily so I set about thinking how to add an Image Captioner to the free DirtMind image hosting service. I intially talked to the developer of a well known online image captioner about getting his code to work as part of my site. Unfortunately though the backend technologies of his site and DirtMind didn’t mesh so I set about writing my own.
In the end this has had a lot of advantages as the Image captioner is far more specific to my design
Server-side it’s pretty simple as I already had some image processing going on to watermark images with my site logo. Rather than make a stand alone image captioner I decided to integrate the functionality throughout the image gallery – that means all uploaded images are captionable. If you’re the owner of an image you can overwrite it with a captioned version, otherwise you can just save it as a new image (of course owners can do this too).
Of course some people will want a stand alone captioner, or at least a landing page so I created one for these people at www.dirtmind.com/captioner.php but this is really just a single file upload box that goes to the normal gallery pages
Play with it
As with everything at DirtMind it’s free and has no ads, if you want to try it out just look at any image on DirtMind! Here’s an example to play with (just click the pic).

You need to have a registered DM account to save your pic, or upload new ones, but you can play about with the captions without registering!
Technically the most challenging thing about doing this was the client side javascript. It seems that if you write something that works in FireFox then it pretty much works in Safari and Chrome. IE however has it’s own plans, and needs entirely different code. I spent a lot of time getting it to work in each platform. If you use another browser I’d appreciate you giving it a test run!
How to sent a message to twitter using php
February 9, 2009 at 11:51 am | In Blog, Website Development | 3 CommentsTags: anonymous, code, parser, php, twitter, xml
As part of the Integration of DirtMind with twitter I needed to send tweets to twitter from php to the anonymous @dirtythoughts account. Here’s how I did it
$username = 'dirtythoughts';
$password = 'yeahlikeimdumbenoughtoincludethathere';
// The message you want to send
$tweet = 'message that has been filtered for html and stuff';
// The twitter API address
$url = 'http://twitter.com/statuses/update.xml';
// Set up and execute the curl process
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$tweet");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
// check for success or failure
if ((!empty($buffer)) && (!$buffer))
{
$error[] = "There was an error while trying to talk to twitter";
$error[] = "Twitter said: $buffer";
$error[] = "Try again later!";
}
else if ($buffer)
{
$p = xml_parser_create();
xml_parse_into_struct($p, $buffer, $vals, $index);
$tweetid = $vals[3]["value"];
}
This last bit about the xml parser reads the return xml from twitter, when there hasn’t been an error and gets the tweetid. This is used to link to individual tweets on a twitter account like so “http://twitter.com/dirtythoughts/status/ + tweetid” so that once a user had tweeted using the DirtyThoughts anonymous account I could give them a link to their tweet.
How to submit a post to phpbb3 by a different user
February 9, 2009 at 11:51 am | In Blog, Website Development | Leave a CommentTags: anonymous, code, php, phpbb3
As part of the Integration of DirtMind with twitter I needed to be able to submit posts into my phpbb3 forum using a bot account to protect anonymity of my users when they’re tweeting their DirtyThoughts anonymously, and I didn’t want to use the anonymous/guest account because I wanted to generate hit counts etc. Here’s how I did it
$poll = $uid = $bitfield = $options = '';
generate_text_for_storage($twitter_status, $uid, $bitfield, $options, true, true, true);
$data = array(
'forum_id' => 11, //the subforum that my DirtyThoughts thread is in
'icon_id' => false,
'topic_id' => 435, //the thread to reply to
'poster_id' => 146, //the id of the DirtyThoughts user
'enable_bbcode' => true,
'enable_smilies' => true,
'enable_urls' => true,
'enable_sig' => true,
'message' => $twitter_status,
'message_md5' => md5($twitter_status),
'bbcode_bitfield' => $bitfield,
'bbcode_uid' => $uid,
'post_edit_locked' => 0,
'topic_title' => '',
'notify_set' => false,
'notify' => false,
'post_time' => 0,
'forum_name' => '',
'enable_indexing' => true,
);
//store current user
$old_user_id=$user->data['user_id'];
$old_username=$user->data['username'];
$old_usercol=$user->data['user_colour'];
//change to bot
$user->data['username']='DirtyThoughts';
$user->data['user_id']= 146;
$user->data['user_colour']= '';
//make post
submit_post('reply', 'Dirty Thought', 'DirtyThoughts', POST_NORMAL, $poll, $data, '');
//restore user
$user->data['username']=$old_username;
$user->data['user_id']= $old_user_id;
$user->data['user_colour'] = $old_usercol;
Interestingly the submit_post function always uses the current user object to make a post, regardless of the settings in $data. To get around this I store the current userid, name and colour in variables and switch to the bot values to make the post before returning the current users settings to their normal values.
Integrating a website with twitter
February 9, 2009 at 11:51 am | In Blog, Website Development | 2 CommentsTags: anonymous, api, Blog, dirtythoughts, forum, icq, integration, modification, msn, php, phpbb, phpbb3, rss, secrets, twitter, twitterfeed, uncensored
As part of the continuing campaign to take over the internet I’ve been looking at twitter integration for DirtMind.com. I’m a big fan of twitter (follow me @dirtmind) so I’ve been wanting to do something with it for a while.
There are a number of natural touchpoints with twitter that I looked at:
- Tweeting DirtMind top stories
- Allowing registered members to list their twitter account in their profile
- DirtyThoughts – anonymous, uncencensored tweeting to the @dirtythoughts account
I’ve now achieved all of these. Tweeting top stories wa the easiest and is done using twitterfeed which lets you tweet from an RSS feed. Using twitter feed I can send out both new entries on this blog (or at least those tagged with the “blog” tag like this one) and also the top stories from the DirtMind RSS feed (a custom feed I built on my top stories database entries).
Allowing registered members to list their twitter account was on the surface quite easy. I wanted to let people enter their twitter username in their profile info and then show up a little blue “t” next to their posts and in their public profile view that links to their twitter feed. Just the way the site already does for msn, icq etc. Once I started looking into this though it quickly became apparent that it was quite a bit of work, so in normal style I thought that someone else must have already done this fairly obvious site modification. The advantage of using a popular system as your base architecture is that you can make use of the cool modifications everyone else has done. I found and implemented RMcGirr83’s phpbb3 twitter mod with no modifications (other than changing the icon) which is a first for me as I normally modify modifications and then modify those until I’m recursing into a black hole. Anyway, it’s excellent and does exactly what I wanted. You can see an example on my public profile listing at DirtMind.
Finally, DirtyThoughts… I liked the idea of anonymous tweeting as a way of people getting something off their chest, expressing themselves or saying something they wouldn’t normally say, and the ability to comment on these dirty thoughts and discuss them. Well forum software is built for commenting and discussing so a cool thing to do would be to have a setup whereby people could enter in a comment and it would get sent to both the forum and twitter. Using the twitter API was simple enough, so I designed a twitter page for @dirtythoughts, then created a DirtyThoughts user on the DirtMind site. Now I just needed a way to show the latest thoughts. To do this I butchered the standard viewtopic page (sorted by latest first) and customised it to have the dirtythoughts posting form at the top. It works really well
I also edited the forum and thread navigation pages to automatically redirect to this special viewing and posting page rather than the normal phpbb3 pages. You can see the result here. It works really well and is already attracting some interesting and disgusting anonymous tweets! Please stop by and add one yourself
The hardest part of all of this was getting the visual confirmation stuff to work on my new page as I’d not gone anywhere near that stuff before. Some of the interesting bits I came accross were:
Blogger writes sensationalist nonsense about phpBB3
February 3, 2009 at 2:00 am | In Blog, Website Development | Leave a CommentTags: dimwit, forum, ip, php, phpbb3, security
I was searching for help on a specific issue and came across a blog entry called phpBB3 IP issue where the fella is saying that there’s a problem with phpBB broadcasting users IP addresses to all and sundry. He then says you should delete a line of code from your forum to stop it happening.
I thought I should point out that Anthony is a dimwit who can’t understand what he’s posting about. The line of code he quotes specifically only shows IP addresses to admins:
'USER_IP' => ($auth->acl_get('a_')) ? (($mode == 'lookup' && $session_id == $row['session_id']) ? gethostbyaddr($row['session_ip']) : $row['session_ip']) : '',
I realise that this is a complex(ish) nested shortcut if statement but even so the dude is just wrong, he’s more web 0.2 than web 2.0. Let me break it down:
IP Display => User Is an Admin ? (Is Lookup Mode ? Show Hostname : Show IP) : ShowNothing,
So that’s what the code means, now if we explode the shortcut syntax into pseudo-code that even the dimwitted Anthony could understand we get:
If User is an Admin
{
If in host lookup mode
{
Show HostName
}
ELSE
{
Show IP Address
}
}
ELSE
{
Show Nothing
}
Not really anything to worry about other than a bloke that can’t understand simple code scaremongering from an ignorant position.
Can we have a test before people are allowed to blog about stuff?
RSS Aggregation and Post to Forum links
January 28, 2009 at 12:43 pm | In Blog, Website Development | Leave a CommentTags: aggregation, bookmarklet, forum, magpierss, php, phpbb, rss, template, website
Since I dumped Drupal I didn’t have an RSS aggregator anymore. Drupal has some good RSS aggegation features which I wanted to duplicate – I needed:
- Getting and aggregating feeds by arbitrary tags (defined by me)
- Consistent display on the DirtMind site
- The ability to feed DirtMind feeds into the system
- RSS caching so that the homepage would still show something relevant if a feed was down
- A way to auto-post to the forum for discussion on a story
I knew I didn’t want to write an RSS parser myself. It would be possible but surely someone else, in fact several someone esles, must have wanted to do this and make their super solution open source. Enter MagpieRSS which is an excellent open source RSS parser in PHP. Then it’s just a matter of tagging and sticking the stuff in a database for display on the homepage. Each “RSS Box” on the hompage is generated as simply as
$tag = "news";
$num_stories = "15";
$rss_box = dm_generateRSS($tag, $num_stories);
Which is then fed through into a phpbb3 HTML template in the normal way. Finally I wanted a “comment now” button or similar so that people could quickly post rss stories into the forum, for this I wanted a generic approach that could also be used from a Bookmarklet so I hacked away at the forum software a bit more to add a way of making posts through a specially formed URL (no details here to avoid the spam!).
In the future I’m thinking about maybe having which RSS feeds are shown as preferences in a user’s profile. That way people can choose the boxes most appropriate for them – and maybe also have them able to add RSS feeds into the aggregator system (although maybe with admin approval!)
Creating an image gallery for phpBB
January 27, 2009 at 3:37 pm | In Blog, Website Development | 6 CommentsTags: architecture, avatar, bbcode, coppermine, emoticon, extension, firefox, forum, free, gif, host, image, jpg, php, phpbb, png, refactor, rss, thumbnail, website
As part of the dirtmind site I wanted to provide a gallery for users to uploads pics, emoticons etc. for posting in the dirtmind forum and so we could start building some content. With the general philosophy of don’t pay for things when there’s so much great open source about I looked at the Coppermine image gallery. Ok, so there’s some not so great open source about too. All of the galleries I looked at were ok, but didn’t integrate deeply into my site (which was now based on the phpBB architecture) so I set about (armed with no php skill but a bit of general programming skills) to write my own.
Key Features
- Users can upload images into their sfw or nsfw galleries
- Users can delete images they’ve uploaded
- Site admins can delete other people’s images
- Very large images are automatically scaled down
- Images are tagged intelligently (large image get a big tag, medium images get a smaller less obtrusive tag, tiny images get no tag at all so that thinks like emoticons or avatars can be uploaded)
- Images should be exposed as RSS so that latest uploads can be shown
- JPG, GIF and PNG (static, transparent and animated) to be supported
- Thumbnails are automatically created
- Multiple files can be uploaded at once
- BBCode is automatically generated for both single images and multiple selection
The Gallery
Should be fairly easy right? Actually, it was fairly easy – there’s a lot out there on how to upload files, watermark and resize images so it was quite straightforward to manage the uploading into user directories. At first I thought “I don’t need a database” since I was using a user and gallery based directory structure to store the files. This was mind numbingly stupid as it caused performance issues once the image number got large and made things like images RSS very hard to do.
So I bit the bullet and refactored the gallery into using a database to record images. This was actually pretty simple and didn’t affect my code much, I do a DB insert when an image is uploaded, a DB delete when it’s removed and then there’s just a bunch of selects instead of directory scanning.
I’m really happy with the multiple file upload capability, this was based on the stick man’s idea of making multiple file uploads look like they’re using a single file input element. Once uploaded the files are presented back to the user as a grid of thumbnails which can then be selected/unselected and with each change in selection the BBCode is automatically generated using javascript. Good stuff
Of course since all the pages on my site are in the phpBB architecture I’ve got things like login, user rights etc. done for me but even so the result is I think an extremely clean and elegant image host – it’s got none of the complexity that the old Coppermine System used to have galleries are automatically created for users when they upload their first image. Due to the tight integration into the forum software it’s incredibly simple to post uploaded images (single or multiple) into the forum, in fact it’s a single click!
You can checkout the gallery here including the bbcode generation features but you can’t upload images unless you’ve registered an account (this is to prevent abuses and spam) but registering is free like everything else at DirtMind so feel free to register and upload some images if you want to try it out.
Related to this I’ve also launched a FireFox Extension for BBCode to make BBCode as simple as right clicking on images and links
Extending phpBB3
January 27, 2009 at 2:36 pm | In Blog, Website Development | 4 CommentsTags: architecture, drupal, error, forum, php, phpbb, phpbb3, rss, template, website
Introduction
Following my dumping of drupal I had to go back to the drawing board in terms of managing the content for my homepage. I wanted to have my own stories and aggregated RSS feeds displayed, integrated into the phpBB forum on the site.
Armed with no knowledge of php but some of html, sql and general programming skills (I was a professional developer about 10 years ago) I decided to look into extending phpBB to be the architecture of my entire site! This idea was further encouraged by my analysis of the available image galleries that were available off the shelf (for free obviously I didn’t want to actually pay for anything).
Extending phpBB
It is possible to create a blank phpBB page very simply and because of phpBB’s templating system it’s really easy to setup pages with the same header, look and feel as the main site. And you get to take advantage of loads of cool phpBB features like user and session management, security, caching etc. In fact I soon came to realise that I could use it for Content Management as well…
To make a new page on your website that extends phpBB you do the following:
Create a new php file with the following content, the first bit sets it up as part of phpBB and so needs to know where the forum is. On my site the custom page as at the root of www.dirtmind.com and the forum lives in www.dirtmind.com/forum if you have a different structure you’ll have to edit the second proper line of code to tell if your PHPBB_ROOT_PATH.
<?php
/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ?
PHPBB_ROOT_PATH : './forum/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
// Start session
$user->session_begin();
$auth->acl($user->data);
$user->setup();
page_header($user->lang['PAGE_TITLE']);
//Custom code goes here
//Tell phpBB which template to use for the output:
$template->set_filenames(array(
'body' => 'output_template.html'
));
page_footer();
?>
One of what I soon came to realise was one of the most common mistakes with doing this (and was my most common mistake) was to accidentally include blank lines before or after the tags this leads an error similar to:
[phpBB Debug] PHP Notice: in file /includes/session.php on line 990: Cannot modify header information - headers already sent by (output started at /includes/auth.php:1040)
So this php page doesn’t actually have any output or display stuff in it, it’s just doing functional things so here I could do my RSS processing or whatever. To link up the page to an ouput template you can see a line that maps “body” to “output_template.html” and this file lives in your forum templates directory which in my case would be “./forum/styles/mystyle/template/output_template.html“. Here’s what a very simple output template could look like:
<!-- INCLUDE overall_header.html --> <p>Your HTML goes here</p> <!-- INCLUDE overall_footer.html -->
That’s it! So now you’ve got a new page on your website that’s hooked into the phpBB system.
To see this in action just look at any page on DirtMind that isn’t part of the forum like the homepage
Conclusion
Even with no php knowledge it’s really easy to make pages of your website have the same look and feel as your forum, and the amount of functionality that phpBB provides means that it’s an excellent architecture for making a web app.
Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.

