Image upload directly into your post
A feature that has always been needed on ubb.threads is a simple way to upload images directly into a new post without having to either upload to a gallery forum first or a popular picture sharing site, then link to it.
There are other methods too, including having a companion photopost installation that links the board members together, but in the end, you can’t beat, just clicking on a button in the editor toolbar, selecting a number of images and uploading them right into a post.
Furthermore, it would be nice for all the bbcode markup to be auto-generated without thinking.
Bottom line: Click, browse and Save!
Well, this now exists as a custom modification. The difference with this modification is that I won’t be posting all the files to change here, because they aren’t trivial. I will instead describe how it works, then make it available as a paid modification by me for your board.
Here is how it works:
First of all the modification adds the editor buttons to the quick reply area. This is logical, since those images are cached once the images are loaded the first time. No speed issues really apply. The new and improved quick reply is shown below:
There is a new kid on the block, which initiates the image up-loader.
It’s the 5th icon over from the left
The blue up arrow over the image is the symbol for uploading the image into a post.
Clicking this image pops up a nifty shadowbox dialog that guides the user through the process of uploading one or more images into the post.
The dialog is shown below:
When first used, there is a fairly lengthy help text to guide the user through what is really an easy and painless process. You simply browse to your computer and “Add file from your PC” or alternatively can paste a URL from a remote picture (ie: imageshack, tinypix or photobucket) and the up-loader will send it to the server.
Since the process is so easy, you will find that the help text is no longer needed and that can be hidden (cookie based to remember your preference) by clicking the [ Hide help ] button on the upper right corner.
Uploading is all ajax driven and you will get feed back as the file uploads with a loading icon ( ). Once complete, the dialog shows a thumbnail for each image on the left. An example of two images is shown below:
If for some reason, you change your mind after seeing a particular thumbnail, just click on the [ Remove ] button to the right of the specific thumbnail and it won’t be included in the batch to be inserted into the post.
When ready, you have two options to save into the post and they are “Lightbox” or “Standard”
Lightbox would normally be used if you are uploading very large pictures, that you want to expand as a lightbox effect when clicked. I actually use a free library called “Shadowbox“, which is based upon the Lightbox idea.
Standard is for normal or smaller images that don’t need to be clicked on at all to see their full potential.
There are admin settings to set the maximum width of an image when it appears in a post, so as to not interfere with the board display as well as a maximum physical width of the expanded image in lightbox mode.
For this example, I saved the images as a Lightbox to see how this effect works:
The IMG tags are auto generated, with an additional set of parameters (gal and a hash value) to specify that they are to be treated as a lightbox gallery.
Clicking either image, brings up the lightbox and you can click on all the images to cycle through them:
I’ve installed this on quite a few sites now and they simply love it, since it’s all in one place.
One satisfied customer even went as far as to write an article on it here