Tuesday, April 18, 2006

Pretty URLs for SPGM

Since putting a photo gallery on my site I have always used SPGM, the Simple Picture Gallery Manager. It's a great application in that it does not require a database, is totally configurable and is very easy to manage. The latest version, 1.4.4, is mature and stable and I look forward to many more years of using it.

However, one thing that's always bugged me about it, and for that matter many other web applications, is the lack of pretty URLs. Now my favorite web framework does away with this issue entirely but web applications written in other languages such as PHP typically do not take this into account. Ugly URLs often do not get indexed by search engines, are more prone to linkrot, and just look darned ugly. So I decided to do something about it.

First, I went about upgrading my version of SPGM. Wow what a difference a year can make! Version 1.4.4 was quite a jump with newly updated themes and a really cool shadow effect that makes my pictures seem as if they are floating above the page. Aside from some minor stylesheet integration issues that I eventually fixed, the upgrade went very well.

My next task was to change the output of SPGM itself so that it would make every link a pretty URL. I started out by replacing every instance of '&', '=' and '?' with constant values named SEP_AMP, SEP_EQL and SEP_QM, respectively. I then defined a constant called PRETTY_URLS which, if set to true, would create URLs that looked like /spgm/spgmGal/gallery_name/spgmPic/picture_id. This modified version of the SPGM engine can be found on my website.

Lastly, I had to put my mod_rewrite skills to use to direct these pretty URLs to their correct locations. For instance, a link to /spgm/spgmGal/Spring_Break/spgmPic/3 would actually be a link to /spgm/index.php?spgmGal=Spring_Break&spgmPic=3. Also, because SPGM relies on relative links, mod_rewrite had to redirect image links from within the galleries in order to display the thumbnails properly. Eventually I was able to accomplish everything with just six RewriteRules in my .htaccess file.


RewriteEngine on
RewriteRule ([a-zA-Z0-9,_]+)/gal/(.*)$ /spgm/gal/$2
RewriteRule ([a-zA-Z0-9,_]+)/flavors/(.*)$ /spgm/flavors/$2
RewriteRule spgmGal/([a-zA-Z0-9,_]+)$ /spgm/index.php?spgmGal=$1
RewriteRule spgmGal/([a-zA-Z0-9,_]+)/spgmPic/([0-9]+)/spgmFilters/(.*)$ /spgm/index.php?spgmGal=$1&spgmPic=$2&spgmFilters=$3 [L,QSA]
RewriteRule spgmGal/([a-zA-Z0-9,_]+)/spgmPage/([0-9]+)/spgmFilters/(.*)$ /spgm/index.php?spgmGal=$1&spgmPage=$2&spgmFilters=$3 [L,QSA]
RewriteRule spgmFilters/$ /spgm


Both the .htaccess file and the modified version of the SPGM engine can be found bundled on my site. Please email me if you have any questions or comments on using it.

9 comments:

Anonymous said...

Vey nice work. One thing though, for people who have changed the base folder from spgm to something e.g gallery, else you need to edit the .htaccess file qand change instances of spgm to gallery, and also in the spgm.php line 254 from "/spgm" to "/gallery"

Sean said...

True, but here is another option. Instead of changing the base folder name to 'gallery', leave it as 'spgm' and put the following in the last line of your root .htaccess file.

RewriteRule gallery$ /spgm [L]

This will send all requests for site.com/gallery to the spgm folder and be completely transparent for the user.

Anonymous said...

It works nice, but the default skin gets messed up when you click on a gallery.

Sean said...

I would recommend that you take all the styles out of 'spgm/flavors/default/spgm_style.css' and 'spgm/css/style.css' and put them in the same style sheet used by the rest of your site.

rxbbx said...

Thnx, not exactly what I need, but you gave the good direction..

Greets

rxbbx said...

Thnx, nice work.. only the slideshow does not work. So you have to disable it.

Trekking Klub said...

You need to change '=1&' from spgm.php with a constant value named SEP_AMP1, in order for the First Thumbnail Page link to work. Here is the modified code:
define('PRETTY_URLS', true);
if(PRETTY_URLS) {
define('SEP_AMP', '/');
define('SEP_AMP1', '/1/');
define('SEP_QM', '/');
define('SEP_EQL', '/');
$cfg['global']['documentSelf']="/spgm";
}
else {
define('SEP_AMP', '&');
define('SEP_AMP1', '=1&');
define('SEP_QM', '?');
define('SEP_EQL', '=');
}
See a working example on my website
http://www.trekkingklub.com

Anonymous said...

Any chance you can update this to work with the latest version of SPGM? Latest version is now 1.4.7

Sean said...

What little free time I have is spent working on Ruby or Javascript. But feel free to take the code and do what you like with it.