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

WordPress on OSX (10.6.8), Apache, PHP & htaccess

I’ve just managed to get OSX 10.6.8 to work with mod_rewrite and .htaccess to be able to let WordPress rewrite it’s URLs. Here is what I did.

I installed WordPress to my homefolder so I’ll access it using http://localhost/~ola/wordpress. Apache is configured to use a split config in OSX so to change the directives for the home folder you change the file /private/etc/apache2/users/Ola.conf. I changed AllowOverride None to AllowOverride All and restarted Apache.

I got a 403 Permission denied message. I checked the Apache error log /var/log/apache2/error_log. It said: [Mon Nov 28 16:30:47 2011] [error] [client 127.0.0.1] Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden: /Users/Ola/Sites/slipstream/wp-admin/options-permalink.php, referer: http://localhost/~ola/slipstream/wp-admin/options-permalink.php

I added the Options directive FollowSymLinks to /private/etc/apache2/users/Ola.conf, restarted Apache and it worked fine.

I’m only using this config as a development box so I’m not sure if it has any security implications. If you have any knowledge about this just let me know.

Slipstream Longboards – Web flyers summer 2011

Some web flyers, banners and ads I made for Slipstream Longboards this summer. I have also taken all photos except the ones for NDO and the NSM ad.

Web flyer for a longboard trick competition 2011.
Web flyer for Slipstream demo at Junkyard
Web flyer for Slipstream demo at Junkyard
Web flyer for Slipstream Slidejam, Oslo 2011
Web flyer for Slipstream Slidejam, Oslo 2011
Näckrosdammen Open, poster 2011. Based on last years poster. Made with lots of feedback from Patrik at Madrid Skateboards.
Ad for Nordic Surfers Mag

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.

One.com allowed image upload max image size

I’ve had some problems uploading images to my one.com hosted WordPress (v 2.9.2) blog. It seems like they have increased the allowed upload sizes / allowed memory so I’ll make a test with some different images.

If I’m not wrong these results are better than the last time I tried but I can’t remember any details. This time I’ll save the results here so I can compare them later.

300 kb – 3000 x 1281 px – works

800 kb – 2000 x 2000 px – works

1 mb – 2200 x 2200 – fails – The image is uploaded but it fails to scale it.

1,1 mb – 2500 x 2500 – fails – The image is uploaded but it fails to scale it.

1,5 mb – 3000 x 3000 – fails – The image is uploaded but it fails to scale it.

If fails with the following error

Fatal error: Out of memory (allocated 44564480) (tried to allocate 4096 bytes) in
/xxx/xxx/xxx/httpd.www/blog/wp-includes/media.php  on line 913

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'] . '/';

with:

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

And it worked.

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 {
  background-color:#fce94f;
}
.nktagcloud-9 {
  background-color:#edd400;
}
.nktagcloud-10 {
  background-color:#fcaf3e;
}
.nktagcloud-11 {
  background-color:#f57900;
}
.nktagcloud-12 {
  background-color:#ce5c00;
}
.nktagcloud-13 {
  background-color:#e9b96e;
}
.nktagcloud-14 {
  background-color:#8ae234;
}
.nktagcloud-15 {
  background-color:#73d216;
}
.nktagcloud-16 {
  background-color:#4e9a06;
}
.nktagcloud-17 {
  background-color:#729fcf;
}
.nktagcloud-18 {
  background-color:#3465a4;
}
.nktagcloud-19 {
  background-color:#204a87;
}
.nktagcloud-20 {
  background-color:#ad7fa8;
}
.nktagcloud-21 {
  background-color:#ef2929;
}
.nktagcloud-22 {
  background-color:#cc0000;
}

Enjoy!

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.

Wordpress-AutoFocus-Issue

To fix it I installed the Additional image sizes plugin.

Wordpress-AdditionalImageSizes

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) {
                                the_post_image_url("800x300Crop");
                                return;
                        }

//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!