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!

Write Your Own WXR File to Migrate Custom CMS to WordPress

I have been using a custom build CMS that’s really basic for a tiny site for some years. It has around 200 posts so it’s not a huge site but too much too migrate to a new host by hand. I have been using WordPress for some other sites and I really like it so I decided to look into migrating the data from my current custom CMS to WordPress (and host it on wordpress.com). I also wanted to replace some low resolution images with the same images but in higher quality (if possible automatically).

I decided to try to export all posts on my old site to a RSS file that I then convert to a WordPress WXR file (which is a RSS file with some extra tags). I couldn’t find any specification for the WXR file but it’s really simple so I’ll just write down some notes.

The first part is the XML specification and blog description. It should look something like this

  
http://localhost/~ola/wp
	The Car Numberplate Game
Sat, 27 Sep 2008 16:08:57 +0000
	WordpressImportFileGenerator 0.1
	en
	1.0
	http://platespotting.wordpress.com
	http://platespotting.wordpress.com
	photo< ![CDATA[photo]]>
	plate< ![CDATA[plate]]>
	uncategorized< ![CDATA[Uncategorized]]>
	photo< ![CDATA[photo]]>
	plate< ![CDATA[plate]]>

Then each blog post, page or attachment is wrapped in tags



Screenshot: Softa.nu sand pit
Sat, 16 Aug 2008 21:19:15 +0000 < ![CDATA[admin]]> < ![CDATA[photo]]> < ![CDATA[plate]]> < ![CDATA[photo]]> < ![CDATA[photo]]> < ![CDATA[plate]]> < ![CDATA[plate]]>
Screenshot: Softa.nu sand pit
< ![CDATA[ A house in our neighbourhood caught fire so we went to look and on our way I found 181. Enjoy!]]> 190 2008-08-16 23:19:15 2008-08-16 21:19:15 open open 181 publish 0 0 post location nacka, stockholm googlemapurl http://googlemapuprl.com/testurl
Tody we found a sand-pit
Sun, 21 Sep 2008 16:28:12 +0000 < ![CDATA[admin]]> < ![CDATA[Uncategorized]]> http://localhost/~ola/wp/wp-content/uploads/2008/09/181_080816.jpg < ![CDATA[]]> 191 2008-09-21 18:28:12 2008-09-21 16:28:12 open open 181_080816 inherit 190 0 attachment http://localhost/~ola/wp/wp-content/uploads/2008/09/181_080816.jpg _wp_attached_file /home/ola/public_html/wp/wp-content/uploads/2008/09/181_080816.jpg _wp_attachment_metadata a:6:{s:5:"width";i:2816;s:6:"height";i:2112;s:14:"hwstring_small";s:23:"height='96' width='128'";s:4:"file";s:66:"/home/ola/public_html/wp/wp-content/uploads/2008/09/181_080816.jpg";s:5:"sizes";a:2:{s:9:"thumbnail";a:3:{s:4:"file";s:22:"181_080816-150x150.jpg";s:5:"width";i:150;s:6:"height";i:150;}s:6:"medium";a:3:{s:4:"file";s:22:"181_080816-300x225.jpg";s:5:"width";i:300;s:6:"height";i:225;}}s:10:"image_meta";a:10:{s:8:"aperture";d:2.600000000000000088817841970012523233890533447265625;s:6:"credit";s:0:"";s:6:"camera";s:20:"Canon PowerShot A540";s:7:"caption";s:0:"";s:17:"created_timestamp";i:1218917746;s:9:"copyright";s:0:"";s:12:"focal_length";d:5.79999999999999982236431605997495353221893310546875;s:3:"iso";i:0;s:13:"shutter_speed";d:0.0166666666666666664353702032030923874117434024810791015625;s:5:"title";s:0:"";}}

Along with all item tags comes the the history for each post but since I didn’t have any history in my old CMS so I exclude it.

To create WXR XML from my standard RSS XML I decided to build a quick .NET program (download the source code) that just reads all fields from the RSS file and then converts them to their corresponding fields in WXR. You’ll need to customize the tool but the class WordPressWxrItem.cs might be a good start…

Embedding Google Maps broke my WordPress text editor

Today I tried to embed a custom Google Map to my blog and ended up with an unusable WordPress editor! It didn’t even allow me to remove the iFrame -code.

Here is how I broke it:

  1. Created a custom Google Maps -map
  2. Copied the embed-map-html code (an iFrame) to the Code field in WP
  3. Saved the post as a draft
  4. Loaded my and when I saved the blog post as a draft and discovered that I couldn’t edit the post any more

To recover from this it would have been possible to discard the draft but since I had put some time in editing I didn’t want to do that. Instead I fired up my MySQL editor and tried to locate the html text in the database for manual removal. All of a sudden it struck me. The easy solution! The good solution! I disabled JavaScript in Firefox, loaded the web page and viola! I got the simple WordPress text editor back and could remove the iFrame-code from Google Maps.

Firefox disable javascript

I have now attached a post-it with the text ”Keep It Simple Stupid” on my monitor (again). Simon has got one as well.

WordPress 2.1

I have just done the upgrade from WordPress 2.04 to WordPress 2.1 on this blog. I love to do these upgrades since that’s the only time I upgrade all plugins, themes etc!

The editor in WordPress 2.1 is beautiful! I LOVE that WordPress now includes spell checker and auto save of your posts as drafts!

Well, try it out!

New Manticore Skateboards Web Site!

Manticore Skateboard - BannerAt last! The new Manticore Skateboards web site is launched. I have been working on this for some weeks now and it feels great to release it!

All content is created and will be administrated with the wonderful WordPress software.

Screenshots

Screenshot: Manticore Skateboards #3 - News page Screenshot: Manticore Skateboards #3 - Team page Screenshot: Manticore Skateboards #3 - Team page: Jim Augustsson Screenshot: Manticore Skateboards #3 - Product page: Flylite series Screenshot: Manticore Skateboards #3 - Contact page

Using WordPress as news column

When building my latest web site (Slipstream Longboards) I figured that I should use some existing tools for the news column. Since I had some knowledge about WordPress I decided to go with that. What I wanted was to use the nice WYSIWG editor WordPress and also to have a nice way to generate the RSS Feeds.

I started reading on the WordPress web site and found that there is a nice API for this type of sites (See the Codex pages).

Basically, this is what I did:

  1. Installed WordPress
  2. Moved and transformed the old data
  3. Outputed the data from WordPress to a non WordPress page
  4. Outputed the data from WordPress to a RSS Feed

I will describe how I did step two, tree and four below. For more information about installing WordPress see the WordPress web site.

Move and transform the old data

Since the old data was a limited amount of data (about 10 news posts) I figured that I should just output the data and then do some text manipulation which made it compliant to the MovableType format and then import it into WordPress. This turned out to work well and I had the data inserted into WordPress in less than an hour.

Output the data to a page outside of WordPress

To get the data from WordPress I used the WordPress loop which is a way to query the database and output the data. It is realy easy to use.

First you include a file from WordPress using:

define('WP_USE_THEMES', false);
require('./news/wp-blog-header.php');

Then you can use the WordPress Loop.

if ( have_posts() ) : while ( have_posts() ) : the_post();
// Output your data here
endwhile;

To output for example the title and the body for your posts you use:

if ( have_posts() ) : while ( have_posts() ) : the_post();
the_title();
the_content();
endwhile;

It is possible to restrict the data to only output for example posts with a different author or to only output posts in a specific category. See the Codex page for more information about this.

Output the data from WordPress to a RSS Feed

To customize the RSS Feed for this web site I simply copied the wp-rss2.php from WordPress and changed;

  1. the URL to the web site to point to the first page for the web site instead of the first page for the blog
  2. the URLs to each item to be displayed on the web site instead of the blog
  3. I also had to include the wp-blog-header.php file (all as done above) and remove the include for the wp-config.php and delete the the call to the wp(feed=rss2)

And that produced a nice feed.

Anti-spam for comments in WordPress

I have some problems with spam in the comment area in WordPress (this blog). So I started to look for a plugin that could handle this. I have seen that people use captcha (images with letters that you should insert when submitting a post) plugins but since I think that some people might have problems reading the letters I don’t want to use it.

So I looked at another plugin called Did You Pass Math?. It works but has some issues. For example if you write a comment and forgets to fill in the field for the answer you will lose the data.

Then I found out that WorPress actually have created a technique where they will match comments against a database. The plugin is called Akismet and is installed by default in WordPress. All you have to do is to register on WordPress.com to get an API Key.

I hope this will solve the problems!

New anti spam filter!

Since I got complaints about that people must create an account to comment I added a plug-in called Did You Pass Math?

Be careful not to forget to answer the question, unfortunately it does loose your comment if you miss the quiz!

Hope it works. Please tell me otherwise!