basanta in a box   life, thoughts and work

Back in my hardcoding PHP days, I built a homepage for the honorary consulate of Nepal for my father.

Looking back, I can’t really agree with my concept of good webdesign back then (just look at that old page). However, one idea still strikes me as good for a consular homepage: Showing random images from the country you’re representing.

For the new, Wordpress-powered homepage, I wanted a similar thing. And because I didn’t want to spend hours collecting worthy pictures of Nepal from the family photo stock, I followed the latest trend in laziness: crowdsourcing.

The Idea

Just use flickr as a easy to use photo stock. My first idea was to embed a slideshow with images from flickr that have the tag “Nepal”. Alternatively, using the Nepal Images group image pool to have some standard of quality, avoiding nasty “Look at my frozen off fingers at the Everest!” or “Look at my rotting feet in the Terai swamps!” photos.

Additionally, it has to be autostart and without much clutter in the in the slideshow box (like size sliders, company logos and the like).

The Execution

While the idea is simple, realizing it took some hours of googling and trying out different possible solutions. Here is how I ended up doing it:

Get the slideshow

While there are a number of flickr slideshow plugins for Wordpress, you don’t really need one. Flickr offers its own embeddable slideshows. Here is the iframe-tag:

1
2
3
4

<iframe
style="margin-top:10px;margin-left:-20px;"
src="http://www.flickr.com/slideShow/index.gne?&amp;tags=Nepal&amp;group_id=&amp;user_id=&amp;set_id=&amp;text="
frameBorder=0 width=275 height=275 scrolling=no>

This will embed a slideshow of photos with the tag “Nepal” (see yellow highlight) in your page.

This iframe can be integrated as an HTML widget on its own and works perfectly. The drawback is that it starts again and again from the same photo when the user changes page on your blog.

Make it look random

Unfortunately, flickr doesn’t offer a way to make the slideshow start with a random image. So, instead of a real shuffle function, I emulated it.

The idea is to randomly feed the flickr iframe with different tags (instead of the standard “Nepal” in the snippet above).

1
2
3
4
5
6
7
8
9
10
11

<?php
$array=array("nepal", "kathmandu", "pokhara", "bhaktapur", "nepal,himalaya", "nepal,sherpa", "lumbini", "swayambunath", "bodhnat", "nepal,temple", "nepal,guru", "nepal,mountains", "nepal,hindu", "chitwan", "lukla", "nepal,children", "nepal,everest", "nepal, trekking", "patan", "bharatpur", "nepal,terai", "tharu", "newar, nepal", "birganj", "jomsom");
?>
 
<iframe style="margin-top:10px;margin-left:-20px;" src="http://www.flickr.com/slideShow/index.gne?&tags=
<?php
$rand=array_rand($array);
echo $array[$rand];
?>
&group_id=&user_id=&set_id=&text=" frameBorder=0 width=275 height=275 scrolling=no>
</iframe>

This snippet first initializes an array $array with a number of tags that will return Nepal-related photos from flickr.

The values of this array are then called randomly by the PHP standard function array_rand() and inserted into the flickr iframe code.

As this code is run every time the user changes page on your blog, the illusion of random photos can be kept up if the array contains enough different tags.

Make it run as a widget

The above snippet will not work in your vanilla Wordpress installation because unlike HTML, PHP code isn’t by default executed in a widget.

The simple solution is, of course, a plugin:

• PHP Code Widget

This plugin enables a “PHP Code” widget where PHP code is executed. Just paste your iframe-plus-php-code there and see if it works.

See the result

You can see a running example at www.konsulatnepal.de.

Let me know if this trick worked for you!

Posted from Karlsruhe, Baden-Wurttemberg, Germany.

While replacing the terribly outdated homepage of the honorary consulate of Nepal in Cologne for my father with a easy to maintain Wordpress installation, I stumbled upon a useful little trick at TechCounter for running Wordpress from a subdirectory while keeping your URLs uncluttered.

Here is the gist:

1. In Wordpress’ General Options, keep your Wordpress address, but change Blog address to
   http://www.YourDomain.com/YourWordpressSubdirectory
2. Move Wordpress’ index.php to the root directory.
3. Edit index.php:
   require(’./wp-blog-header.php’);
   is changed to
require(’./YourWordpressSubdirectory/wp-blog-header.php’);
4. If you have a .htaccess file in your Wordpress directory, move this to the root directory too and remember to check whether you have to make any adjustments in the file (maybe some old redirects?).

Worked like a charm for me!

For a more detailed guide, check the original post at TechCounter.

To connect my desktop PC to a local wireless network, I use an wireless USB adapter. This happens to be the Philips SNU5600 (not the catchiest name, btw), for no special reason but rather because it was on sale when I was looking for this solution.

One thing that annoys me about my SNU5600 is the software that comes with it. I really do not need a special software to connect to my wi-fi, especially when it does not offer any additional (useful) functionalities in comparison to Windows and even fails at setting up more sophisticated networks.

However, Philips driver website does not offer any standalone drivers, just a software-driver bundle. And when you deinstall the software, the drivers magically vanish, too.

A short hunting trip on google did not yield any results, so I took matters into my own hands. Luckily, I found the drivers on the CD which can be downloaded from the support website, hidden in the software folders.

As this CD package is about 200 MB, I though I might save some of you the wait and offer the driver files by themselves, as they are only about 350 kb.

Download drivers for Philips SNU5600 here

(If I somehow violate any rights of Philips over this driver, please tell me!)

As a newbie to Drupal, implementing a simple embedded Google map is more than confusing. More than a dozen modules claim to offer mapping functionality, but I just couldn’t get any of them to do what I needed. So I just did it myself.

What do I seek to accomplish?

I want to set up a directory with adresses and when viewing those nodes, I’d like to have a small embedded map that pinpoints the address. Very basic, really.

Why didn’t I just use a module?

I tried to get the job done with a couple of modules (Location, GMap and the like) but either no map showed up, if it did, it failed to fetch the address data and I generally became frustrated with the complexity of these modules that unfortunately coincides with a lack of documentation.

One module that was easy to use and worked just out of the box was embed google maps field, which lets you create a CCK field that turns into an embedded map. The only drawback is that it does not fetch address data from other fields but the user has to enter the address again into the embedded map field, which does not seem very user friendly when the user just entered the same data into special “street”, “town” and “zip code” fields a few lines above.

Hijacking this module’s iframe tag from the HTML code, I set out myself to feed the iframe dynamically with the address data.

What did I start from?

I’m in a Drupal 6.13 environment (I suppose any 6.x will do) and my little solution utilises the following modules:

• CCK (Content Construktion Kit) 6.x-2.5
• Dynamic Field 6.x-1.0

Dynamic Field lets you create CCK fields that can be filled with PHP code and thus dynamically fills the field in view mode with computed data.

I also already have a custom content type with the CCK fields “street” and “town”.

What did I do?

1) Add a CCK field to your content type under admin/content/node-type/yourcontentype/fields

2) Choose “Dynamic Field” from the field type droplist

3) In the text field titled “PHP-Code”, add this code:

$street = $node->field_street[0]['value'];
$town = $node->field_town[0]['value'];
return "";

The first two lines just fetch the values of the current node’s town and street fields into more handy variables. The rest returns the Google maps iframe I hijacked from the Emded Google Maps Field module and inserts street and town in the right places.

In my experience, street and town are sufficient for Google to pinpoint the right spot on the map, but following the pattern above, you could of course also add more fields, like country or zip code.

Also, feel free to tinker with the settings in the iframe tag, that’s just plain HTML and can probably also be extended with further settings.

4) Create a test node for your content type, fill the address fields with an existing address and see if it all works.

As a plus, it doesn’t even clutter the edit view with ugly code, because the dynamic field does not show up here.

Update: Changing the zoom level

To change the zoom level of the embedded map is not straightforward, so I add this hint.
In the iframe tag, just change the z-value, right here: …&ie=UTF8&z=16&output=embed…
The lower the value, the farther out you zoom.

Update: Turn the info balloon on/off

Lazyburners figured this out by himself in the comments, but I was also looking for this functionality and I guess some others might be, too. Just add &iwloc=near to your iframe src and the balloon should vanish.

Leave me a comment if it worked for you!