After upgrading to Wordpress 2.9.1, I encountered a problem when using the media file uploader. Any attempts to upload an image would return an HTTP error:

WordPress Media File uploader

There are many solutions out there, but unfortunately none of the ones listed worked for me. I did find a very simple fix however.

HTTP error fix

The answer was right in front of me! Specifically, in the uploader popup window:

You are using the Flash uploader. Problems? Try the Browser uploader instead.

The Browser Uploader worked perfectly fine for me.

Related posts:

1. Using 2 or more different sidebars in WordPress

Update: It has been brought to my attention the following solution is buggy and may not return full results. I will update this post when a working solution is found.

There is currently a problem with Blogger’s Search Box gadget. For many users, searching with this widget will return No Results even though the search terms are present in the blog posts.

This Search Box widget is useful for several reasons. The main reason is that many users would like to place the search box in other areas of their blog. Some people have also disabled the Blogger Navbar which contains a working search box, perhaps because it appears on top of the entire blog and may pose as a design issue for some.

Here is my very simple solution if Blogger’s search function is not working for you.

The Navbar’s search

If you do a search via Blogger’s Navbar, you may notice the search results URL will look like this:

http://www.website.com/search?q=searchterm

My solution will return return the same URL and thus the same results as though you are searching via the Navbar. I actually have no idea how this works, perhaps someone can enlighten me with a comment below.

Here’s the solution:

Create a Blogger search widget

Login to your Blogger account and head over to Layout > Page Elements. Click on Add a Gadget at the bottom of the page and select HTML/Javascript.

In the Title field, enter Search or something similar. In Content, paste the following code:

<form action="search" name="input" method="get">
<input value="Search" name="q" size="20" type="text"/>
<input value="Go!" type="submit"/>
</form>

Hit Save and position the widget in the desired location. That’s it!

Related posts:

1. Prevent Blogger from resizing images

Images that are uploaded in Blogger are stored at Google’s Picasa Web Albums at its original file size and dimensions. If you login to Picasa with your Blogger account, then lo and behold, you shall see your original images!

Interestingly enough, the image code that Blogger inserts into your blog post are modified. Instead of linking (Blogger automatically links the images to itself) and displaying your original image file, Blogger links to a scaled-down, resized version instead. I believe only images wider than 800px are affected by this protocol.

Displaying/linking to full-sized images is pretty simple since we know that our original image files are stored on the server – we just need to access them! I have 2 solutions on how to display full-sized images in Blogger.

Posting images in their original sizes with Blogger

Alternative 1 – Using Blogger

The image code that Blogger returns to you when you upload and insert an image will look similar to this:

<a href=”http://1.bp.blogspot.com/a_bunch_of_random_characters/s640/image.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”>
<img border=”0″ src=”http://1.bp.blogspot.com/a_bunch_of_random_characters/s640/image.jpg” />
</a>

Note: In the above code, I removed a bunch of numbers and letters and replaced it with ‘a_bunch_of_random_characters’ for simplicity.

The important part of the code is the s followed by the number. In this example, it is s640. This variable may contain different numbers such as s400 and s800.

All you need to do is replace the original variable with s1600-h in both the link and image tags. Although I am not 100% sure, I believe this should always link to your original file size.

Alternative 2 – Using Picasa

Login to Picasa with your Blogger account. As mentioned above, all images uploaded in Blogger is actually hosted here.

At this point, you have two options. The first option doesn’t directly solve our problem per se, but it will still give users access to the full-sized image and it will give you some additional features. The second option directly solves our problem without the bells and whistles.

Option 1

First, click on the image you wish to insert into your blog post. Look to the right and you should see some image options. Click Link to this Photo.

Picasa's image options

You can either use the Link or the Embed image code generated for you. Embed image gives you the added bonus of using thumbnails which saves you the hassle of creating them yourself.

Either way is fine, but you should note that both links and embedded images will link to a scaled-down version of your image and that the image will be displayed within Picasa’s photo viewer. Of course, users can still click on the Magnify Glass icon to view the original size.

Option 2

While viewing an image in Picasa, click on the Magnify Glass icon at the top right until you are viewing the image at its original size. Right-click the image and select Copy Image Location if you are using Firefox, or select Properties to find the image location.

This will give you the direct link to the full-sized image.

And that is all there is to it. Happy blogging!

No related posts.

Ever wanted to browse a website with multiple logins simultaneously? Perhaps you have two Gmail accounts whose inboxes you’d like to monitor at the same time. Or maybe you want to surf several Facebook accounts without having to log off one before being able to sign in another.

Here’s a simple 2-step tutorial on how to use multiple accounts for a single website using the Firefox web browser.

Opening multiple Firefox browsers

When you’re using Firefox, or any other internet browser for that matter, it is executed from a single process no matter how many new windows you open. So if you’re logged into Gmail with joe@gmail.com and then you open a new Firefox window (Ctrl+N) pointed to Gmail.com, it will still display Joe’s inbox. You won’t be able to sign in to another Gmail without first signing out of Joe. That’s where multiple Firefox processes comes into play. However, we’re first going to take a look at Firefox profiles and how it will help solve our problem.

What is a Firefox profile?

Here is Firefox’s take on profiles:

Any changes you make while using Firefox are stored in files so that they can be used the next time you run Firefox. These changes can be obvious, like your home page, or changes you’ve made to the toolbar, but also include things like your history, what sites you’ve visited, and text you’ve entered into forms like search fields. They’re all stored in the same location, called a profile folder.

From what I have learned, each Firefox profile is executed from its own process. Therefore, the question now is: how do I open multiple Firefox profiles? I’ll answer this in 2 simple steps.

The 2-step method

1. Create a Firefox profile

Firefox profile manager displaying 3 profiles.

2. Open the profiles

When you first launch your Firefox browser, it will automatically load your default profile. To open your other profiles, again click Start > Run and type:

firefox.exe -p PROFILENAME -no-remote

Be sure to change PROFILENAME to whatever you named your profile. You can repeat this step again to open any other profiles you may have created. To continue on with my example, I executed both: firefox.exe -p 1 -no-remote and firefox.exe -p 2 -no-remote

Windows Task Manager (Ctrl+Alt+Del) displaying multiple Firefox processes

The last thing I’d like to mention is that whichever profile you executed last will be the first to launch the next time you open Firefox.

Have fun browsing your multiple accounts!

No related posts.

Time to make this blog more personal so I’ll talk and empty my mind here a bit for is this not where random lies?!

I finally updated Wordpress from 2.3 (yeah, it’s been a while) to 2.8.4. Never thought Wordpress could get any better than before; the dashboard is much more pleasing to the eye and it looks like there is a bunch of useful new features like the Media library. Can’t wait to play around with the GUI and get used to everything. Unfortunately, the custom Wordpress theme I was using wouldn’t cooperate with the new upgrade so I’m going to use Thematic for now and perhaps customize it heavily over the next little while. We’ll see.

Hmm. It seems as though I haven’t done anything web-related in a while. Like web design. Kinda itching to crack open Photoshop and work off the rust. Maybe hit two birds with one stone by entering some contests at 99designs. A little extra cash wouldn’t hurt.

I brainstormed some interesting blog material on paper over the months and I’ll probably start posting some of them up here. Topics mainly on technology and the internet. Maybe I’ll even start up a little portfolio of my digital works here.

I’ve also returned to an idea I wrought up nearly 3 years ago which I’ve been planning (something I love to do) on and off (more off then on). It has to do with ‘web 2.0′ and folksonomies and the like. I hope posting about it here will motivate me to actually polish it off and shift it into development mode. Haha, who am I kidding?

There are many things that I have grown interested in over the years and one of them is hockey. Today, I assembled a hockey net which was 45-minutes of fun (I love building things, it goes back to when I played with my first Lego set). I probably took longer than normal as the weather started off uncomfortably sunny and then started to drizzle). Now, I can practice wrist shots and the like in the comfort of my backyard. I will need to buy some plywood or something so that I can handle the puck more smoothly (rubber and concrete don’t mix). Before, I have been using one of those smart hockey balls, the kind Vincent Lecavalier supposedly uses in the off-season, but I’d rather get used to a puck since nothing can mimic a puck better than a puck. Of course, I still need to learn the nuisance of skating – my new Bauer 22s are barely worn in – which I’ve done only a few times the past winter in a nearly outdoor rink, but I’ll worry about that later. On a hockey-related note, I can’t wait for the NHL season to start! Canadian football just isn’t enough in this long and boring off-season.

That’s all for now.

No related posts.

OnLive was just announced a few days ago and is already taking the gaming industry by storm. The game service has been in development for 7 years before this announcement, and silently too which is remarkable considering its potential. OnLive basically takes advantage of cloud gaming technology so that gamers can play high-end games such as Crysis on nearly any computer (PC or Mac) and TV. If you want to learn more about the “future of video games,” check out this OnLive News site!

No related posts.

A playlist in Windows Media Player

I frequently turn on the Shuffle option when listening to playlists. But sometimes I don’t want it totally randomized. I’d like it if some songs were grouped together – if song 1 was played, I’d like to hear song 2 and song 3 played right after. Then after this group is played, the rest of the songs would continue to be shuffled until another group is played.

So how do we group songs in a playlist? I believe that media players can create a feature similar to the Link option found in Adobe Photoshop.

The link option in Photoshop

Photoshop layers link option

But how do we create more than one group?

Again, we can turn to the brilliant engineering of Photoshop. When you press the Link button next to a layer, it is hidden when the linked layers is unselected.

For example, if we take a look at the image above, we can see that both Layer 1 and Layer 2 are linked. However, the Link icon would not be displayed if both these layers are unselected – such as by selecting Layer 3 or 4.

This means that if we currently have an unlinked layer selected (Layer 3 or 4), then Layer 1 and Layer 2 from the first group would not be selected, and thus no Link icons would be visible.

Then, if we check the Link icon on any other layer (Layer 3, 4, etc.), the layers from group 1 are not part of this second group since their link icons are not visible.

You should note that a layer cannot be linked in more than one group.

Application to media players

Media players can adapt apply this link feature to their own playlists by allowing users to tick off songs. All the ticked songs would then be grouped together. So whenever Shuffle stumbles upon a song that is part of a group, the entire group is played before the media player continues to randomly select another song to play.

What I’ve learned from studying business plans is that what works for one thing (company, software, etc.) can successfully work for a completely different thing. But the opposite can be true too. As an innovator, I think that media players can really use this feature if it’s implemented properly.

No related posts.

Many websites today fail at providing a simple way for users to find information quickly and easily on their websites. A user will typically leave in frustration if it is difficult for them to find that specific article they read a week ago or maybe even last night if the website is updated frequently. This can cause a decrease in the average time a user browses the website or even a decline in visitor loyalty (the amount of times a past user revisits the website).

In this series (hopefully I write more than one article on this topic), I will cover several ways this problem can be rectified that does not require a whole site overhaul. One of these ways is to provide an easier-to-use page numbering system. In the following, I will provide a few examples of both good and bad page number systems and a very simple solution to rectify the usability problem.

Problematic page numbers

To start off, I’ll give examples of very popular websites whose page numbering system is not so usable.

Gmail

Gmail is one of the most popular free webmails today, and not only because of their huge storage spaces. Gmail is “built on the idea that email can be more intuitive, efficient, and useful.” But this mission statement doesn’t seem to apply to its page numbering system.

Gmail's page numbering system

Gmail uses the typical ‘next, previous’ and ‘oldest, newest’ page-numbering system, albeit with better names: Older › Oldest » and « Newest ‹ Newer. This is what most websites currently use.

Although this system really reduces the clutter of other page-numbering systems (I will discuss this in the next example), it is much too simple if you store thousands of e-mails in your inbox. This is not hard to imagine since Gmail targets those who don’t know what the delete button is (heh heh).

So what happens if I have 10,000 e-mails and I want to view e-mails 5,001 – 5,100? That is a lot of button clicking: Older ›, Older ›, Older ›, Older ›… This same idea can be applied to websites with thousands of news articles. A user doesn’t want to do all this button-clicking to find one e-mail or that one article. And they shouldn’t have to.

The only reason why this doesn’t poise too much of a problem for Gmail is because of their superior searching. If you know a bit about the e-mail you’re seeking, then you can easily Google your webmail instead of sifting through a bunch of e-mails.

Digg

Digg is a revolutionary social news site which gained enormous popularity in the past three or so years. Users submit hundreds of content to the website per day with only a small percentage making it to the frontpage (the page where articles with enough positive feedback is displayed.)

However, this small percentage translates to about 10 pages, or 150 brand-new articles per day. If you’re an avid Digg user, you might find that it takes 4-5 hours alone to just skim through all this content. A website of this size should have an intuitive page number system, because if you don’t bookmark every article you like, then you can have fun using their not-so-proficient search function.

Digg's page numbering system

Digg’s page numbering system is very common with news-oriented websites as well as free and open-source web software like content management systems, forums, and blogs. It has the typical ‘previous, next’ page-numbers and several beginning and ending page numbers in-between the first and last page numbers.

But if you’re trying to find an article buried in the depths of the website, like page 70 or something, that is a lot of Next », Next », Next »… Or what many users do, click the highest page number closest to 70 and repeat till you reach 70 (if we were to use the example from the image, this would be page 10).

Google

Google's page numbering system

Even Google.com suffers from this same problem. A search for the letter ‘a‘ returns over 12 billion results. And they don’t even have ‘oldest, newest’ page numbers, just a couple of beginning page numbers and ‘next.’

Of course, in the case of Digg and their mod rewritten links, a more experienced web surfer could just edit the link http://digg.com/page# and replace # manually. But not all websites have a demographic comprising mainly of tech-savvy users and not every website has easy-to-modify URLs.

The simple fix

I first applied my solution to the page numbering problem in the summer of ‘06. The website was wiiglobal and don’t ask me what’s up with it. I lost touch with the programmer about 6 months ago so the site has pretty much spiraled off to the internet wasteland.

Wiiglobal's page numbering system

As you can see, I don’t use the cluttered page numbering system. I use a basic ‘next, previous’ page system and a simple text field which allows the user to quickly view any page in two quick steps: 1) type in the page number 2) hit ‘enter’ or click ‘view page.’

This page number system reduces the inefficiency caused by unnecessary button-clicking by providing a user with only a few links and a single text field.

Although I’d like to take credit for this system, I’m not sure if I’m actually the first guy to use it. I have, however, seen a lot of websites and software popping up in the recent year utilizing my system (oh look, I’m taking credit already!):

Invision

Logopond

No related posts.

I’ve been using the brand-new phpBB forum software for the past few days now and I must admit I am very impressed. But that’s a post for another time! For now, I’ll discuss the optimal placement of Google ads within phpBB’s templates, the easiest method to do so, and most importantly, how to achieve all this legally under Google’s TOS.

What is allowed?

After skimming through Google’s Terms and Conditions, I have concluded that you may not place the advertisements in all areas of the forum. Here is the exact tidbit from the TOS:

5. Prohibited Uses.

You shall not, and shall not authorize or encourage any third party to:

(v) display any Ad(s), Link(s), or Referral Button(s) on any error page, on any registration or “thank you” page (e.g., a page that thanks a user after he/she has registered with the applicable Web site), on any chat page, in any email, or on any Web page or any Web site that contains any pornographic, hate-related, violent, or illegal content

What this means

In the past, you would simply insert the ad code in just two phpBB templates: overall_header.html and overall_footer.html. This would display your advertisements at the top and bottom of your entire forum. This is no longer legal now that AdSense’s TOS explicitly states that advertisements on certain pages like registration is prohibited.

So how do we display the advertisements on the header and footer of our forums without violating Adsense policy? Unfortunately, this now means editing more than two phpBB templates. Fortunately, this article will go over the easiest method in placing Google ads in your forums. I will go over exactly which template files you should edit to yield the optimal page impressions/clicks.

But first…

Editing ad code from one file

Since we need to insert the ad code in more then two templates now, how can we easily update an ad code without having to go through each and every template file? We can eliminate this problem with the following easy fix.

Open up Notepad or your favorite code editor, and paste your ad code within this file.

Save it as googleads.html.

Upload the file with your favorite FTP to: http://www.YOURWEBSITE.com/forums/styles/YOURTHEME/template/

To insert this file into phpBB templates, you will use the following ad insert code:

<!-- INCLUDE googleads.html -->

Where to place the ads

So now that you have the ad insert code, where should you place it?

As I mentioned above, we would have simply edited two template files in the past to display it in the header and footer of our forums. Now that this isn’t legally possibly anymore, we can achieve these same results by editing all the templates that don’t violate Google’s TOS.

The following guide is based on editing the prosilver theme, phpBB 3.0.0’s default theme. However, the following edits should work for most phpBB themes.

To edit the templates, login to your admin control panel and find Styles Tab > Style components > Templates. To the right, click Edit for the template you wish to update.

The index page

Let’s start off by editing the index page, the main forum page. Open up the index_body.html template file.

Step 1

Find (usually near the top) <!-- INCLUDE overall_header.html -->

Before or after, add <!-- INCLUDE googleads.html -->

Insert the ad code before if you wish the ad banner to appear above the header, or after for below the header. Most people post it after the code.

DO NOT DELETE THE ORIGINAL CODE.

Step 2

In the same file:

Find (usually near the bottom) <!-- INCLUDE overall_footer.html -->

Before or after, add <!-- INCLUDE googleads.html -->

Most people add this before the footer.

A few more pages to edit…

The above instructions can be applied to the following templates in the exact same way:

• viewforum_body.html – Viewing a forum template
• ucp_header.html and ucp_footer.html – User control panel template
• viewtopic_body.html – Viewing a thread template
• posting_layout.html – Posting a thread or replying template*

* Before editing the posting_layout.html template, you can read the following optional step on how to optimize this specific template.

The ‘posting a thread / replying to a post’ page (optional step)

After nearly a decade of running forums, I have found that an additional template can be edited to generate greater ad impressions and clicks.

NOTE! If you are doing this optional step, do not apply the second step to posting_layout.html; in other words, carry out step 1 but skip step 2. This means not adding the ad code to the footer of posting_layout.html.

To apply this optional step, open the posting_editor.html template file.

Find (somewhere near the middle) <!-- IF S_HAS_ATTACHMENTS -->

Add before <!-- INCLUDE googleads.html -->

This time you only have one choice: add before and not after.

Why the optional step and additional template?

This optional step still displays the ad banner at the footer of the ‘posting a thread or reply’ page. The only difference is how visible the advertisement becomes.

Without the optional step, the ad banner would appear directly above or below the footer. Either way, the advertisement would not be very visible. When a user creates a new post, the page is mainly filled with the textbox and forum options such as attachments. In most instances, the advertisement from the footer isn’t visible at all when they reply to a thread – unless the user has an enormous screen resolution.

Applying the optional step to the additional template effectively solves this problem. It will display the advertisement right above the Save / Preview / Submit button meaning that a user cannot miss it! This means more clicks and more profit for your forum!

Confirm the changes

To ensure that all your forum members can view the template changes, click the General Tab in the admin control panel. To the right, find Purge the cache and click Run Now.

Also, head over to General Tab > Server configuration > Load settings.To the right, find Recompile stale style components and select Yes.

And that should do the trick! The above techniques will help you get around the legal problems of the traditional method of editing only the header and footer templates, and help you position your advertisements for maximum clickthroughs and impressions. This is the simplest phpBB modification to use. Have fun monetizing your forums!

For a live example, checkout Rakion.biz and ieatgrenades.

Related posts:

1. Using 2 or more different sidebars in WordPress

I purchased a PHP book over 6 years ago and I only got through the first 20-30 pages before putting it down and letting it gather dust. After six long years, I finally faced a problem big enough for me to actually write a piece of code:

How to display two or more different Wordpress sidebars (the column on the right) depending on the page a user is currently viewing?

The Problem

WordPress currently displays a single sidebar for all your templates (sidebar.php). My problem was that I wanted to use another sidebar (let’s call it sidebar2.php) as well. More specifically, I wanted this second sidebar to be displayed only on ‘Single Post‘ (the template that displays the full blog post; the webpage you are viewing now). Then, the first sidebar would be displayed for all the other pages.

Being the newbie programmer I am, I tried using the original sidebar include code that WordPress uses to display the sidebar in your templates:

<?php get_sidebar(); ?>

And then modified it:

<?php get_sidebar2(); ?>

Unfortunately, this did not work.

The Solution

Luckily, I stumbled upon this useful page at Wordpress about ‘Conditional Tags,’ specifically this section.

Basically, it tells us that ‘Single Post,’ the page you are currently viewing, is defined by WordPress as ‘is_single()’. This is the page where I wanted to display the second sidebar. This also means that for every other page that was not ‘is_single()’, I would simply use the original sidebar include code to display the first sidebar as mentioned earlier.

Thus, a simple PHP if and else conditional statement will do the trick. I replaced <?php get_sidebar(); ?> from header.php (or wherever this code is included in your template) with:

<?php
if (is_single())
include (TEMPLATEPATH . ‘/sidebar2.php’);
else
get_sidebar();
?>

Note: The above code assumes that you have created and uploaded a Wordpress template called sidebar2.php

In layman’s terms, if the current page you are viewing is ‘Single Post,’ then the second sidebar will be displayed. Else, the first sidebar is displayed for all other pages. This piece of code can be adapted in many different ways including displaying more than 2 sidebars and displaying sidebars for specific templates.

I guess this is a rather simple fix, but after hours of Googling for a solution, I noticed that a lot of other WordPress users experienced this same problem. Hopefully this article helps!

Related posts:

1. WordPress 2.9.1 HTTP error