Webb åt Originalmedia

För ett tag sedan fick jag kontakt med Anders på Originalmedia. De är ett göteborgsbaserat film-produktionsbolag som fokuserar på att göra dokumentär och informationsfilmer. De hade haft lite otur med ombyggnaden av sin webb. Det hade blivit pannkaka helt enkelt.

Jag visste direkt att jag ville visa en stor video på förstasidan. Det är så roligt med projekt där det finns fina bra material att utgå ifrån. Vi jobbade fram och sjösatte en WordPress-lösning.

Uppdateringar för Göteborgs Stadsmission!

Nu i höst har jag arbetat som underkonsult åt byrån Spiro. Jättekul, inspirerande, och lärorikt att arbeta med nya människor och i större projekt!

Mitt första uppdrag har varit att städa upp, strukturera om och snygga till Stadsmissionens webb. Vi har pratat om att jag ska hjälpa dem mer så håll tummarna för att allt går i lås 🙂

gbg stadsmission 2015-12

Min IT-karriär började på reklambyrån DBI under IT-boomen för 15 år sedan. Jag hade en riktigt bra chef som lärde mig mycket om det mesta. Framförallt tryck och layout. Supertack för otroligt bra mentorskap Anders! På många sätt känns det att vara på byrå som att komma hem igen.

Då var det mer vilda western i IT-projekten och alla blev inte direkt färdiga. IT var ännu omognare och kunskaperna generellt var låga. Undra var man skulle landat om man hade de kunskaper man har nu då?

Nya webbar för Skolperspektiv & UGL Ledarskap

Precis innan sommaren började jag ett sammarbete med min vän Richard. Det resulterade direkt i UGL Ledarskap och Skolperspektiv. Två webbar som båda behövde lite kärlek. Både genom att byta plattform till WordPress, ett visuellt ansiktslyft och en kortare workshop i att tänka och skriva webb.

UGL Ledarskap

Jag ser ofta att en stor del av ett webb-jobb är att utbilda och inspirera till vad man kan och bör göra med sin webb. Att öppna kundernas ögon för både digitala och sociala medieplattformar.


Jag satt bland annat en eftermiddag med Christian på Skolperspektiv och det var så himla spännande och inspirerande att se honom förstå möjligheterna. Sen att han ger också mig en otrolig energi genom sin berättelse är en bra bonus 🙂

KAJOLO Games e-commerce site now live!

In february I did the logo for KAJOLO Games, today we release the web / e-commerce site!

They are currently selling their products via market places (e.g. Blocket) and this site is a pilot that will work as a complement for some products. They wanted to start out as simple and lightweight as possible and extend it once they know their needs better.


Slipstream Longboards – New web site for 2012

Last week we updated the web site for Slipstream Longboards. I made it together with Daniel Lundgren on Medium Distribution.

As previous years we have a strong product catalogue area on the web site.

In 2012 we are really growing our team with at least 3 new team-riders and we are adding a new area for the team on our web site with both a blog and rider profiles. We are also adding a new map with all our European dealers, we are lifting all artists making graphics to us and all collaborators we have worked with. Oh! And we’re also making a brand new board matrix that helps you chose the right board!

We’ve also put the first version of Slipstreams e-commerce site live!

Slipstream e-commerce

New web site for Section C!

I have just published the web site for the Swedish skateboard distributor Section C! It’s running on WordPress with a custom theme. Much black, to get the nice contrasts with all the photos.

Some screenshots

Home / first -page screenshot
An example of a brand sub page

SpecialRosteriet web site

SpecialRosteriet is a small coffee shop in Laholm. They import and roast coffee beans.

A while ago we discussed web sites. We talked back and forth and after some discussions we agreed to start with a small, tight and easy to use web site. Based on a system where they themselves could update everything. And focus on getting used to put up information on the web. Just keeping it simple.

I have been using WordPress for several web sites. It’s a fantastic software package. The right balance between complexity and limitations with a high finish and great usability. In the past I have recommended to buy a web host and install WordPress there. This time we are using WordPress.com and letting them host the site.

It’s easy to set up. You register an account and a blog name on WordPress.com. The default URL was http://specialrosteriet.wordpress.com/ in our case. We started to build the web site with this address to get a feel for it. We created a custom top banner image with their logo and pointed their own URL, http://specialrosteriet.se/, to WordPress.com.

There are some main advantages. You don’t need to make the security updates to the WordPress software yourself, it’s cheap, you get 3 GB of storage and unlimited bandwidth usage. Tying your domain name to WordPress.com costs you about $10 per (+ the name fee to your registrar, about $10 per year).

The greatest disadvantage is that you loose flexibility. You cannot install your own plugins and you are more limited in theme design. Currently that’s not a problem but when it is I’m sure it will be a fairly easy process to migrate the data to another system.

It’s easy to take small steps using this technique. They could do most of it themselves. Just having me to ask and explain. So far I have only good things to say about using WordPress.com for these types of web sites.

WordPress development environment – Aptana, Virtualbox and Google Code

At work we always have a pretty hefty development environment. At home I’ve never had any dedicated environment for my web development. It’s both a relief and something I miss.

Today I’ll try to set up a WordPress development environment that’s a bit more robust than my old setup where I download the file I need to change from my website to my desktop, change it, upload it and refresh the browser.

The idea is to:

Setup Google Code

I registered mypersonalblog on Google Code. For now I’ll probably mostly use the SVN features so you can swap out Google Code for any other repository.

I created a wp-themes folder in trunk where I’ll put one folder for each theme I use.

I download the theme I want to use from WordPress Themes. I add -ol to the end of the theme folder to not confuse the themes with the original folder names. Then I check it in. This is done to easily be able to track my changes compared to the version I started out from later. Both to be able to see what I have done but also to easily be able to merge updated theme versions further down the road.

I change the styles.css file and add some information. Here is an example from the  Simplr-ol style.css file.

THEME NAME: Simplr-ol
THEME URI: http://code.google.com/p/mypersonalblog/ (Simplr http://www.plaintxt.org/themes/simplr/)
DESCRIPTION: My customizations to Simplr; "The original minimalist one-column, content-centered theme for WordPress. A different type of theme. For WordPress 2.6.x."
VERSION: 4.6.1-0.1
AUTHOR: Ola Lindberg (Simplr by Scott Allan Wallick)
AUTHOR URI: /wp/ (Simplr http://scottwallick.com/)
TAGS: variable width, fixed width, one column, widgets, theme options, options page, white, orange, blue, microformats, hatom, hcard

If any theme diverges a lot from the original theme I’ll maybe come up with a new name and upload it to WordPress Themes. For now I think it’s good enough to have them all in one Google Code repository.

Setup VirtualBox, Ubuntu, Apache and WordPress

I installed VirtualBox, created an Ubuntu appliance and installed Ubuntu 9.10 desktop. I installed the guest add-ons and Apache. I changed the VirtualBox network to Bridge mode so it get’s its own IP address.

Screenshot from the Network Adapters in VirtualBox. Open it from Devices / Network Adapters...

Update 101118: I recently wanted to make this setup on another computer (using a wireless network card) where I couldn’t get the Bridged Adapter to work. I searched around a bit and it and it seemed like some people had similar issues. Instead I configured VirtualBox to use two network cards. One using NAT (giving internet access) and one using Host-only Adapter.

2 nic setup. The first using NAT providing internet access from my guest
2 nic setup. The second card using Host-only Adapter to be accessible through my Host system.

With this setup you should access you guest os from your host os with the IP address your 2nd network card gets (in Windows).

I created an Apache Virtual Host and installed WordPress to that folder. The production URL is /wp/ and for the local URL I use http://o/blog. I added the IP for my virtual Ubuntu to the name o i my hosts file. Now I can surf to http://o/blog.

My virtual host is configured like this

	ServerName o
	DocumentRoot /home/ola/shared/web/ola
	#Only put the log file like this in the web root on a local server
	CustomLog /home/ola/shared/web/ola/ola-access.log combined

Share files between my workstation and the virtual Ubuntu server

To share files in VirtualBox I use SharedFolders. The folder on my Windows workstation where I checked out the repository is D:CodingMyPersonalBlog and it’s mapped to the name MyPersonalBlog in Ubuntu.

The VirtualBox Shared Folder dialog. Open it via Devices / Shared Folders...

To mount the folder MyPersonalBlog to /home/ola/MyPersonalBlog in Ubuntu you run the following from an Ubuntu terminal

sudo mount -t vboxsf mypersonalblog /home/ola/MyPersonalBlog

Make sure that the files are visible in you Ubuntu server by running ls -la in the folder.

Note! You need to run this every time you login or you can create a script and make it auto run.

ola@ubuntudevserver:~/MyPersonalBlog/wp-themes$ ls -la
total 28
drwxrwxrwx 1 root root 4096 2010-03-27 11:08 .
drwxrwxrwx 1 root root 4096 2010-01-01 19:09 ..
drwxrwxrwx 1 root root 4096 2009-12-29 11:45 AutoFocus-ol
drwxrwxrwx 1 root root 4096 2010-03-27 11:12 room-34-baseline-ol
drwxrwxrwx 1 root root 4096 2009-12-29 11:13 Simplr-ol
drwxrwxrwx 1 root root 4096 2010-03-27 11:13 .svn
drwxrwxrwx 1 root root 4096 2009-12-29 10:58 veryplaintxt-ol

The last thing to do is to tell WordPress that the themes exists. I do that by creating soft links in the theme folders

ola@ubuntudevserver:~/www/olalindberg.com/wp/wp-content/themes$ ls -la
total 24
drwxrwxrwx 5 www-data www-data 4096 2010-03-27 11:48 .
drwxrwxrwx 6 www-data www-data 4096 2010-03-27 11:20 ..
drwxrwxrwx 2 www-data www-data 4096 2009-12-19 00:22 classic
drwxrwxrwx 3 www-data www-data 4096 2009-12-19 00:22 default
-rw-r--r-- 1 www-data www-data   30 2010-03-27 11:01 index.php
lrwxrwxrwx 1 ola      ola        55 2010-03-27 11:48 room-34-baseline-ol -> /home/ola/MyPersonalBlog/wp-themes/room-34-baseline-ol/
drwxr-xr-x 3 www-data www-data 4096 2009-12-29 10:42 simplr
lrwxrwxrwx 1 ola      ola        45 2010-03-27 11:06 Simplr-ol -> /home/ola/MyPersonalBlog/wp-themes/Simplr-ol/

Now I can enable the themes in the WordPress admin panel.

The WordPress theme administration page

Note! If WordPress can’t see the themes look at the permissions for the shared folder. I set mine to 0777 since it’s a local setup.

Import all posts from the production setup

I use the build in WordPress feature to export all posts and pages to an XML-file. I import that file to my local setup. I include all attachments. Some minutes later I have all my posts in my local development environment.

If I need to re-import all posts I use the plugin Bulk Delete to empty my current local database. Then I empty the Media Library in the WordPress admin panel. One tip is to increase the number Media items per page via the Screen Options.

Setup Aptana

I installed Aptana, created a project file and added all my theme files to it. I have never used Aptana before so it’s a test. We’ll see how it goes.

Upload with Uploadify running in public_html folder

Just to try it out I tried to get Uploadify to work in my public_html folder. I set it up according to the guidelines in the docs/example and ran. It returned success but the file wasn’t uploaded.

My first debug idea was to add an alert to the onError event. It wasn’t triggered.

My second idea was to try and print the response in the onComplete event. I added:

'onComplete': function(event, queueID, fileObj, response, data) {
    alert('onComplete: ' + response)

and it returned:

Warning: move_uploaded_file(/var/www/home/ola/public_html/uploadify/uploads-folder/test-image.jpg) [function.move-uploaded-file]: failed to open stream: No such file or directory in /home/ola/public_html/uploadify/_lib/uploadify.php on line 40

Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move '/tmp/php1rJUsg' to '/var/www/home/ola/public_html/uploadify/uploads-folder/test-image.jpg' in /home/ola/public_html/uploadify/_lib/uploadify.php on line 40

I guess it’s some rewrite issues when Apache rewrites the /home/ola/public_html folder to /~ola.

I opened uploadify.php (the ”server side code” for Uploadify) and replaced:

$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';


$targetPath = $_REQUEST['folder'] . '/';

And it worked.

Start and stop Selenium Server with NUnit

I want to have our Selenium tests to run automatically the same way as our other NUnit tests does. This means that I want to have the Selenium Server started automatically before running the test cases.

  1. I started by downloading the Selenium RC and unzipped it to C:SeleniumSelenium-RC
  2. I created a .NET project where I referenced the ThoughtWorks DLLs in C:SeleniumSelenium-RCselenium-dotnet-client-driver-1.0.1
  3. I added a new class to where I copied the Selenium getting started C# class
  4. I added my own TestFixtureSetup and a TestFixtureTeardown to this class. TestFixtureSetup launches the Selenium Server and TestFixtureTeardown closes it

Here is the class for starting the Selenium Server and the example Selenium test.

using System;
using System.Diagnostics;
using System.Text;
using NUnit.Framework;
using Selenium;

namespace Test.UI.Web.Selenium
	public class SeleniumGoogleTest
		private ISelenium selenium;
		private StringBuilder verificationErrors;

		private Process seleniumServer;
		private readonly ProcessStartInfo seleniumServerProcessStartInfo = new ProcessStartInfo("java", @"-jar C:SeleniumSelenium-RCselenium-server-1.0.1selenium-server.jar");

		public void TestFixtureSetup() {
			seleniumServer = Process.Start(seleniumServerProcessStartInfo);

		public void TestFixtureTearDown() {

		public void SetupTest()
			selenium = new DefaultSelenium("localhost", 4444, "*iexplore", "http://localhost:4444");
			verificationErrors = new StringBuilder();

		public void TeardownTest()
			} catch (Exception)
				//Ignore errors if unable to close the browser
			Assert.AreEqual("", verificationErrors.ToString());

		public void OpenGoogleWebSite()


Wider panoramas on my photo blog!

I’ve just updated my custom version of the AutoFocus WordPress theme to support wider panoramas. Before the update it could handle 800 px wide panoramas and now it works with 1024 px wide!

I also removed one feature of AutoFocus that automatically embeds the last attached image instead of the complete post content. It’s a nice feature but not what I want. One drawback is that I’m getting the title above the image instead of below, so I think I’ll have to make some adjustments to it but that’s for another day!

Old version did only support 800 px wide panoramas
Updated to support 1024 px wide panoramas

Add colors to your tag cloud for readability

I’m using the A better tag cloud WordPress widget to be able to configure the tag cloud on my blog. It’s a nice widget that I really recommend!

I wanted to make it easier (and prettier) to use by adding colors to the tags. A darker color means a more used tag, a lighter means that the tag is less used. I based my colors on the Tango palette.

The tag cloud with the original CSS to the left and my customized to the right

All different sizes in A better tag cloud already had their different CSS classes so adding colors were easy. All I had to do was to add the following CSS to the bottom of my styles.css file.

/* Add colors to A better tag cloud */
.nktagcloud-8 {
.nktagcloud-9 {
.nktagcloud-10 {
.nktagcloud-11 {
.nktagcloud-12 {
.nktagcloud-13 {
.nktagcloud-14 {
.nktagcloud-15 {
.nktagcloud-16 {
.nktagcloud-17 {
.nktagcloud-18 {
.nktagcloud-19 {
.nktagcloud-20 {
.nktagcloud-21 {
.nktagcloud-22 {


Fix for WordPress, AutoFocus and wide images problem

Update: I uploaded my version of AutoFocus to Google Code.

I’m building a photo blog to show mostly panoramas using WordPress with the AutoFocus plugin. It works fine but I had one issue.

My panoramas are often in 8:1 (width-height) proportions. When I scale the images it means that I get images that are about 100 px high at 800 px width. It makes the images wrap around the div on the first page in the AutoFocus theme.


To fix it I installed the Additional image sizes plugin.


I configured it to make 800 x 300 images with cropping. I called them 800x300Crop.

Then I added three lines to the function the_post_image_url($size=large) in the functions.php file in AutoFocus. See the code on Google Code.

// Post Attachment image function. Image URL for CSS Background.
function the_post_image_url($size=large) {

        global $post;
        $linkedimgurl = get_post_meta ($post->ID, 'image_url', true);

        if ( $images = get_children(array(
                'post_parent' => get_the_ID(),
                'post_type' => 'attachment',
                'numberposts' => 1,
                'post_mime_type' => 'image',)))
                foreach( $images as $image ) {
                        $attachmenturl=wp_get_attachment_image_src($image->ID, $size);

                        // Added for panoramas
                        // Use the Additional image sizes plugin to generate images that
                        // are 800 x 300 px (cropped) that can be used if the original image
                        // isn't big enough (width or height) when downscaled
                        if($attachmenturl[2] < 300 || $attachmenturl[1] < 800) {

//Keep the rest of the function

It seems to work. Enjoy!

Robots.txt file to allow only one folder

I have only one folder (/blog/*) on my web site that I want search engines to index. To restrict all folders but the /blog/* folder I added the following to a text file named robots.txt that I put in the root folder of my web site.

User-agent: *
Disallow: /
Allow: /blog/
Allow: /index.php
Allow: /favicon.ico
Allow: /robots.txt
Allow: /sitemap.xml
Allow: /sitemap.xml.gz

Tested it with Google Webmaster Tools and it seems to work. Easy as that!