Plugin Updates

I know that the latest WordPress update (version 3.3) broke both Widget Context and Tabbed Widgets plugins. I’ll be able to fix them only by the end of January 2012. Please check the WordPress forum for temporary fixes.

Wish you all happy holidays and don’t forget to follow us in the Dakar rally (live on dakar.com and on your TV) and see how we’re changing the perception of what electric cars can do!

Related posts

1. Suggestions for writing flexible and usable plugin
2. WhiteHouse.gov Runs Drupal

For some reason YouTube doesn’t offer a simple way to embed your YouTube channel. The only official method is to manually create a playlist with all your videos and embed that. However, it requires additional work after every upload which is not cool, especially if you’re on a mobile. Here is a simple script that creates an HTML5 (iframe) player using the YouTube API:

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no" frameborder="no">');
            ifr.addClass('player');
            if (options.playeropts)
                ifr.attr(options.playeropts);
        }
        var src = 'http://www.youtube.com/embed/' + video;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src+= k + '=' + options.playopts[k] + '&';
            }
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }

    var defoptions = {
        autoplay: false,
        user: null,
        player: createPlayer,
        playeropts: {},
        loaded: function() {},
        playopts: {
            fs: 1,
            showinfo: 1,
            modestbranding: 1
        }
    };

    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            var allopts = $.extend(true, {}, defoptions, options);
            $.getJSON('http://gdata.youtube.com/feeds/api/users/' + allopts.user + '/uploads?alt=jsonc&v=2', null, function(data) {
                var videos = [];
                var playlist = '';
                $.each(data.data.items, function(i, item) {
                    videos.push(item.id);
                    if (i > 0)
                        playlist += item.id + ',';
                });
                allopts.playopts.playlist = playlist;
                allopts.player(md, videos[0], allopts);
            });
        }
    });

})();

$(function() {
    $('#player').youTubeChannel({user:'kasparsdambis', playeropts: { width: 400, height: 280 }});
});

Related posts

1. Sunday with Beethoven
2. Pāri jumtiem lido kaijas
3. jQuery Script for Loading More Posts

One putukrejums.lv blog we use the ‘sticky’ posts to add introductory information to all category pages (see here, for example). This approach is better than using the category description field because it allows for all the usual formatting options.

Here is how to add sticky posts on top of their respective category index pages and hide them from the rest of pages and indexes:

add_action('pre_get_posts', 'alter_stickies');
function alter_stickies($query) {
	if (!$query->is_category && !$query->is_single)
		$query->set('post__not_in', get_option('sticky_posts'));
}

add_filter('posts_orderby', 'sticky_orderby');
function sticky_orderby($orderby){
	global $wpdb;
	if (is_category())
		$orderby = "Field(". $wpdb->prefix ."posts.ID," . implode(',', get_option('sticky_posts')) . ") DESC, " . $orderby;
 	return $orderby;
}

Add the is-sticky class to the post wrap for additional formatting control:

add_filter('post_class', 'add_stickies_class');
function add_stickies_class($classes) {
	if (is_sticky())
		$classes[] = 'is-sticky';
	return $classes;
}

Redirect Sticky Posts to Their Category Index Page

We don’t want the sticky posts to be available as individual posts that can be access via their permalinks because this information is already being displayed at the top of every category index page. Here is a simple filter to redirect all sticky posts to their category index pages:

add_action('template_redirect', 'redirect_stickies');
function redirect_stickies() {
	global $wp_query;

	if (!is_single())
		return;
	$stickies = get_option('sticky_posts');
	if (empty($stickies))
		return;

 	if (in_array($wp_query->post->ID, $stickies))
		if ($cats = get_the_category($wp_query->post->ID))
			if ($cat = end($cats))
				wp_redirect(get_category_link($cat->cat_ID), '302');
}

Related posts

1. How to Exclude Sticky Posts from Adjacent Post Links
2. jQuery Script for Loading More Posts
3. How to Remove “View all posts filed under” Prefix from Link Title Attribute in Category Widget

add_filter('wp_list_categories', 'remove_category_link_prefix');

function remove_category_link_prefix($output) {
	return str_replace('View all posts filed under ', '', $output);
}

Related posts

1. Remove Inline CSS and Line Breaks in WordPress Galleries
2. Use Sticky Posts as Category Description
3. How to Exclude Sticky Posts from Adjacent Post Links

http://search.twitter.com/search.rss?q=konstruktors.com

Replace konstruktors.com with your own domain.

Related posts

1. Widget Context Update — Word Count Check
2. Cite, Quote and Twitter
3. WordPress Plugins which I Use

My first real backup solution more than six years ago was a 120 GB external hard disk that needed a bulky power adopter to be plugged into the wall and turned on before it could be used. There was no software that would be able to sync only the modified files so I had to create folders such as jun_2006 and aug_2007 and copy everything again and again every time. USB transfer speeds were slow and it took only month to have reached the ultimate backup mess on that external disk.

Few years later I got a new external Maxtor disk that would use two USB wires to power the disk instead of the external adapter. It should have made it easier but it didn’t because the syncing software was still too slow and hard to configure to do any good. So I lived my life on the digital edge and presumably didn’t think about loosing all my client website source files, server access information, invoices and many other important files.

Fast Forward to 2011 — Online Backup

The fact is that I don’t buy software before I make sure that there is no way I can build it myself or find an existing open source solutions. I was surprised to discover that I couldn’t buy even the necessary disk space on any shared server for the price of most online backup solutions that were available on the market. The conclusion was simple — I had to choose from the existing online backup providers.

First I tried Carbonite because Leo Laporte had them as one of the sponsors of TWiT and I really wanted to like it. I also tried Mozy and SugarSync and many others but there were exactly two things that I didn’t like about all of them:

1. limited backup storage, and
2. complex software that slowed down computer.

None of these limitations are relevant today — bandwidth and storage are cheap and performant software is a must (just look at Apple and Google Chrome). Nobody should think about which photos or documents to backup just to avoid having unexpected payments at the end of month.

The Solution — Backblaze Online Backup

I don’t remember how I discovered Backblaze, but their offer sounded exactly how I imagined it should be — reasonably priced and without limits. It automatically created a trial account for me once I had it installed and I didn’t even have to visit their website again. In a few days I had forgotten that it was running in the background and all my important files (~ 40 GB) were backed up just before the end of the 15-day trial.

I was amazed at how fast and resource aware their software was both on my Mac and Windows machines and what a difference it made. After being their customer for two month I signed up my girlfriend’s laptop under the same account and today we both have around 150GB stored at Backblaze servers for $10/month in total.

My Backblaze Stories

Changing Computers and Transferring Files

Recently I got a new Macbook Pro as my main machine for work and I ended up using Backblaze to transfer all my documents and files from the old Windows machine just because they were already in the Backblaze cloud. Restoring files using their website is really simple — just select the folders you want and a single .zip files is prepared for direct download in minutes. I have a 100 Mbps internet connection at home, so it ended up being faster than if I had used an external hard drive.

That PowerPoint Presentation During Vacation

A month ago I went to Germany for a little weekend vacation and didn’t bring the laptop with me because I had just finished all the work and I really didn’t want to think about it for at least a weekend. On Saturday my colleague calls and asks for a little but important modification to one of the presentations that I had just finished. I had sent him a PDF version of that presentation due to some font issues so there was no way he could edit it.

It took me at least five minutes to figure out that Backblaze might have managed to sync the latest version of the original PPT file that I saved on my desktop just before shutting down the computer. And it had! So I simply download the original presentation using the online restore feature and got it fixed in no time. It felt really good considering that my laptop at home was turned off and the wireless router was unplugged to save some electricity. There is no way I could have done it without Backblaze.

Conclusion

Try Backblaze for 15 days and see if it works for you as well as it does for me. There is nothing like a comfort of knowing that all my important files, photos and podcast videos are stored securely in Backblaze datacenter and I can get them from wherever I am.

Photo credit added automatically to every photo with a caption (via putukrejums.lv)

Crediting and linking the source of any republished photo or illustration on the web is one of the most important best practices of web publishing. Unfortunately, there isn’t a standard way of doing it in WordPress and authors are left with their own decision on how and where to credit the original author or website.

I decided to add a simple “Source URL” input field to every image that is uploaded. Adding credit with a link to the source of that image now becomes as easy as adding a title or caption for an image:

Implementation

You need to add the following snippet of PHP to your theme’s functions.php:

Add the source URL input field to image upload screen

add_filter("attachment_fields_to_edit", "add_image_source_url", 10, 2);
function add_image_source_url($form_fields, $post) {
	$form_fields["source_url"] = array(
		"label" => __("Source URL"),
		"input" => "text",
		"value" => get_post_meta($post->ID, "source_url", true),
                "helps" => __("Add the URL where the original image was posted"),
	);
 	return $form_fields;
}

add_filter("attachment_fields_to_save", "save_image_source_url", 10 , 2);
function save_image_source_url($post, $attachment) {
	if (isset($attachment['source_url']))
		update_post_meta($post['ID'], 'source_url', trim($attachment['source_url']));
	return $post;
}

Automatically append the source URL to image captions

add_filter('img_caption_shortcode', 'caption_shortcode_with_credits', 10, 3);
function caption_shortcode_with_credits($empty, $attr, $content) {
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));

	// Extract attachment $post->ID
	preg_match('/\d+/', $id, $att_id);
	if (is_numeric($att_id[0]) && $source_url = get_post_meta($att_id[0], 'source_url', true)) {
		if (!strstr($source_url, 'http://'))
			$source_url = 'http://' . $source_url;
		$parts = parse_url($source_url);
		$caption .= ' ('. __('via') .' <a href="'. $source_url .'">'. $parts['host'] .'</a>)';
	}

	if (1 > (int) $width || empty($caption))
		return $content;

	if ($id)
		$id = 'id="' . esc_attr($id) . '" ';

	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
		. do_shortcode($content) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

Please note that the source URL will be visible only if you specify image caption upon inserting the image.

Related posts

1. Automatically Escape HTML Entities of Code Fragments in Comments
2. Add rel Attribute to Image Links in WordPress Galleries
3. Use Sticky Posts as Category Description

I noticed this bug on this page — the heading “Kāzu ABC” was rendered aliased despite having the main menu in between that heading and the logo which had font-size:1px; applied. The only way to fix this is by avoiding aliased text directly before elements that use @font-face.

Here is a live demo of the bug.

Related posts

1. We’re back with a free font suggestion — Liberation Sans
2. No Font Embedding, Please
3. Replace WordPress Login Logo With Your Site’s Name and Link

Related posts

1. Use Sticky Posts as Category Description
2. How to Remove “View all posts filed under” Prefix from Link Title Attribute in Category Widget
3. Enable WordPress Plugin, Theme Updates and Pretty Permalinks on Nginx

Here is the second iteration of the UX update for the Widget Context plugin. Please check out the live demo and let me know what you think! 

The Concept

The number of locations where you might want to show or hide a widget can vary significantly — having “Related Posts” widget on all blog entries except on posts that are tagged “twitter” (many); or showing the “About Me” widget only on the front page of a blog (few). However, the combinations are endless.

Therefore, I realized that the most important feature should be the ability to find those groups of locations very fast. So there will be only two ways to sort through the content: (1) search, or (2) choose one of the core locations such as homepage, blog index, all pages/(custom)posts or their indices (archives).

Once you have found and selected the sections, it is only a matter of ordering (or chaining) them according to their “power” — low power locations sink to the bottom and are overwritten by the ones floating above them. This is done via drag-and-drop.

The question is — can you think of a combination of locations that can’t be covered using this approach?

Related posts

1. Request for Feedback: Widget Context UI Update 2011, v1
2. Widget Context Update — Word Count Check
3. Widget Context Update for WordPress 2.8