I finally took the time to put the plugin I wrote in the wordpress plugin repository. This makes it even easier to set it up on your Blog.

Simply go to the administration area of your blog, go to the Plugins section and click Add New. There you search for “Full screen background” and normally the first hit should be my plugin.

The next step is to activate it, and change the image you want to show. You do this by editing one line in the source of the plugin. You can do this by clicking the Edit link next to the plugin in the list of active plugins. The line you have to change is indicated with a html comment. Change the src attribute of the img element. That’s it.

Please provide feedback if it works or doesn’t work for you. Thanks!

A while ago, I wrote about my VLAN setup for the Telenet local network.

Today, Bert, the Telenet technician came in for a modem-swap, and activated Fibernet40 on my subscription. It is the same price as the older “Gold-Shake” that we had, but you get a lot more bang for your buck: 100GB limit instead of 60GB and 40Mbps instead of 10Mbps download speed. (and some other extra’s)

Another advantage is that now they installed a Modem with integrated Wireless router and wired switch. So my old-setup is now obsolete. This is the new topology:

So it eliminated the use of an extra router in my home, it is actually built into the modem itself. It supports 802.11N, so it is way faster than the one I had. The speed is really great!

In my home, I’m using 200Mbps Powerline Ethernet boxes to transmit the signal without the need for other cables. I have a switch under the tv, to get network to my XBox, I have another switch in the other corner of the room to get the network to my printer and PC. The laptops use wifi (duh) at equal speed as the wired network.

I don’t really understand yet how Telenet actually achieves this setup, because devices behind the modem get an internal IP, in the 198.168.0.* range, while the digicorder still gets an IP in the 10.166.179.* range. I should sniff my local network to really know what is going on. I will do that if I have a little bit more time. For the moment I’m just enjoying the Internet in high speed.

Note that the managment UI for the modem is reached through mijn.telenet.be, which is kind of nice. This means that they can remotely manage my modem/router. I don’t really mind doing that myself, but it’s nice to know they can help less knowledgeable users.

So don’t sit around, pick up the phone and make an appointment with Telenet today, to upgrade your internet experience for free. I didn’t have to pay activation or installation costs at all!

I was looking for a plugin that could take an image and put it fullscreen as a background on this blog. But I didn’t immediately find one, so I created one myself. I looked at the code in the google home page and started with the Hello Dolly plugin as a base template. It is just an <img> tag that is dynamically resized using jQuery. Here is the full source:

<?php
/**
 * @package Full screen background
 * @version 0.1
 */

/*
Plugin Name: Full screen background
Plugin URI: http://www.trappers.tk/share/fullbg.tar.gz
Description: Full screen background, like the google home page 
Author: Jeroen Trappers
Version: 0.1
Author URI: http://blog.trappers.tk
*/

function wp_full_bg() {
?>
   <img id="wpfullbg" src="http://www.example.org/wallpaper.png" >
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
   <script type="text/javascript" language="javascript">
     $(function() {
     	fullbg();
	    $(window).resize(fullbg);
     });
     function fullbg() {
       var imgw = $('#wpfullbg').width();
       var imgh = $('#wpfullbg').height();
       var vpw = $(window).width();
       var vph = $(window).height(); 
       
       var imgratio = imgw / imgh;
       var viewportratio = vpw / vph;

       var w = vpw;
       var h = vph;
	
       if( viewportratio > imgratio )
       {
         // screen is wider than picture -> increase the heigth of the picture;
         h = w / imgratio;  
       }	
       else 
       {
         w = h * imgratio;
       }

       $('#wpfullbg').css(
          { 
             'left': '0px',
             'width': w,
             'height': h,
             'z-index': '-2',
             'top' : '0px',
             'position' : 'fixed',
             'opacity' : '0.999999999'
          }
       );  
     }    
   </script>
<?php
}
add_action( 'wp_footer', 'wp_full_bg' )
?>

This wordpress plugin is quite simple. It defines a function wp_full_bg which will be called by the wordpress system on the action wp_footer. That’s what you can see in the final line of code. The actual code of the php-function is quite simply outputting the html and javascript.
The first thing I do is create an image with a <img> tag.
Next I import the jQuery library from the Google CDN.
Now comes the real work: I use jQuery to wait for the document to be loaded. Then I call the javascript function fullbg. I also set up a jQuery event handler to listen for changes in the size of the window with the resize function.
In the fullbg function I first find the image and get it’s height and width. I do the same for the window. Then I use the size of the window to set to size of the image using an inline css style that I apply dynamically with the jQuery css function. In between I make sure to keep the original aspect ratio of the image, and smartly resizing it to always fully fit the window.
In the style, also the position and z-index are changed, so that the image is positioned underneath the content as a wallpaper or background.

I published the plugin on wordpress.org, so it should become available directly from the wordpress admin console soon. But if you can’t wait, you can download it here or here as well.