dvrom.eu

Is there a nice geolocation-oriented gallery plugin for WordPress, with comment possibilities, internationalized, easy to install and easy to maintain?

Is it possible to outsource my gallery needs to an already existing site which I can simply embed here?

Probably the answer to both of these questions is yes, but I couldn’t help reinventing the wheel, and creating my own PHP i18n-friendly geolocation-oriented WordPress-integrated gallery.

The photos are displayed in a geolocated fashion, through Google Maps, and all photos have their own WordPress page, which allows to take advantage of WordPress’s comment and i18n services.

The basic process for adding photos to the gallery is quite simple:

1. Geotag and Resize photos
2. Generate SQL Script for WordPress database
3. Import SQL script

Before taking on this endeavor, Photo Geotagging, using the Google Maps API and customizing WordPress were somewhat of a mystery to me, and, needless to say, my PHP, Javascript and HTML capabilities were (and continue to be) far from what could be considered as good.

Nevertheless, the result seems to be quite close to what I set out to obtain, and could be easily adapted to any other WordPress installation.

Here are some briefly-described steps I took to create the gallery:

1. Photo Preparation: Locating and Resizing

The gallery uses several downsized versions (thumbnails) of the original photo, as well as displaying the photo on an embedded map of Google Maps.

A. Geotagging

Geotagging is the process of adding geographical identification metadata to the photo.

It is this information that allows to place the photo on the map.

If the photo was taken with a device that offers geotagging, the photo’s location is automatically stored in the photo itself.

The photo’s location will be stored as metadata in longitude-latitude format, as part of the EXIF de-facto standard.

To check if a photo already has geographical information, a EXIF viewer tool can be used such as “Simple EXIF Viewer for Mac OS X” or “ExifTool by Phil Harvey”.

In case your photo’s are lacking coordinate information, it is possible to manually geotag them with the help of Google Earth and a manual geotagging tool.

The windows version of Picasa offers manual geotagging (currently, not the Mac version), and for Mac OS, I recommend Geotagger.

(It is also possible to automatically geotag photo’s with the use of a gps tracking device and a software tool, something I will probably discuss in a future post)

B. Resizing

I use a PHP script to resize the photos, although using a macro (through scripting) with GIMP is also possible.

I organize photos in directories, and thumbnails are created in a ‘th’ directory:

• Alsace/IMG_0001.JPG
• Alsace/IMG_0002.JPG
• …
• Alghero/IMG_0004.JPG

After running the script, thumbnails are created as such:

• Alsace/th/pre_IMG_0001.JPG
• Alsace/th/bot_IMG_0001.JPG
• Alsace/th/big_IMG_0001.JPG
• …

Once the photo’s are geotagged and resized, they can be uploaded to the server.

2. WordPress Integration

I wanted to integrate my photo gallery to WordPress, and take advantage of the post and comment functionalities.

The easiest way I found to do this was to create a entry for each photo as a ‘page’ in the ‘wp-posts’ table.

I also added some fields to the “wp-posts” database table:

• photo_url: The complete URL to the original photo
• photo_date: The date and time when the photo was taken
• photo_long_dec: The decimal longitude value where the photo was taken
• photo_lat_dec: The decimal latitude value where the photo was taken
• photo_category: The category of the photo
• photo_filename: The original photo filename
• js_key: The key used for the photo in the javascript array
• photo_pre_th_url: The complete URL to the ‘pre’ thumbnail
• photo_bot_th_url: The complete URL to the ‘bot’ thumbnail
• photo_big_th_url: The complete URL to the ‘big’ thumbnail

I also created a php function to generate the SQL that injects the initial photo entry in the ‘wp-posts’ table.

The created page initially contains the filename as a title, and must be manually edited through WordPress.

The PHP code that generates the SQL script uses the EXIF PHP functions to retrieve the latitude and longitude from the EXIF metadata.

All photo related pages are created in the WordPress category “Photos” that I previously created.

(I manually edited the WordPress header to exclude these category pages)

3. Google Maps

Mike’s Google Maps tutorials and the Google Maps API documentation were extremely useful to understand what had to be done to place the photos on the map, and add a event-reactive highlight border.

4. Putting it All Together

The gallery page, simply loads from the database all the posts (of type ‘page’ and category ‘photos’) and builds a javascript array, which is processed to generate the markers on the Google Maps map.

Here are some files that make up the gallery:

• maps.js.txt: Javascript code that places the photos on the map, handles mouse events and photo category changes
• functions.php.txt: PHP code for generating the javascript image arrays, generating the SQL insert script, reading EXIF data, and other functions
• headtag.php.txt: PHP code for the head
• headertag.php.txt: PHP code for the header
• index.php.txt: Main PHP code that glues everything together

In conclusion, the WordPress, Google Maps and PHP documentation, and some googling skills were enough to build a small gallery to share and show some photos.

Related posts:

1. Multilingual Blogging with WordPress