NSLog();

If you'd like to create your own little "Desktops" gallery similar to the one I have, here's how I did it.

Requirements

You must have some combination of:

• A server on which you can install software.
• The know-how and ability to install ImageMagick and libjpeg (with the shared libraries enabled via --enable-shared).
• Some pictures you want to offer for download.
• WordPress (or not, if you want to skip step 1).
• PHP 4.0 or later.
• MySQL (or not, if you don't want to keep stats).
• 20 minutes of free time.
• The understanding that this information is being given away freely, but that my time to help you get it running on your server is quite likely not going to be given away so freely unless you're a friend. I will, however, do my best to fix any "bugs" or to clarify any unclear directions, time willing.

Step 0: Take Good Pictures

That's not to say mine are any good…

All of the images I use I export to 2560 x 1920. I use that size because 2560 is the widest common display resolution. The 1920 height creates a 4:3 image. This script will scale in both dimensions to match the width, then crop to match the height.

Also create a watermark. Mine's a transparent TIFF file that measures 125 x 50 or so. This script will watermark the bottom right of your image. Include whatever padding (from the bottom right corner) in the TIFF file itself.

Step 1: (WordPress) Create a Desktops "Page"

I first created my own page. To do this, navigate to your WordPress theme, duplicate the "page.php" file, name it "page-desktops.php" (or something), and include this at the top:

/*
Template Name: Desktops
*/

In the WordPress admin area, create a new page named "Desktops," assign it the "Desktops" page template, and fill in some code. If you'd like to use some of mine, here's roughly what I did:

1. Removed comments, TrackBack URI, and some other fluff.
2. Added the Lightbox CSS and JavaScript libraries to the header.
3. Defined a few styles for displaying images.
4. Made a loop that displays the images from a directory on my server.

The loop assigns <a href="#">> and provides an onClick JavaScript function that changes a value in a form before submitting the form. The target of the form (the "height" and "width" fields at the top of my desktops page) is the "downloader.php" file. The full link text looks like this:

<a href="#" onClick="processDownload('');" title="Download <?=$img;?>">Download</a>

The JavaScript function currently looks like this:

<script language="javascript">
function processDownload(filename)
{
    if(downloadForm.height.value >= 600 && downloadForm.width.value >= 800)
    {
        downloadForm.image.value=filename;
        downloadForm.submit();
    }
    else
    {
        alert('Please fill out an appropriate image height and width.');
        var sizeBox = document.getElementById("size");
        sizeBox.style.border = "1px solid #f00";
        sizeBox.style.background = "#fcc";
    }
    return;
}
</script>

If you'd like to see some snippets of my code, you can find them in my Desktop Page Code Snippets.

Step 2: Storing the Desktops

I created a "_desktops" folder on my server which houses the actual files. Inside that folder, I have "src" (the original 2560 x 1920 JPEGs), a "preview" directory (400 x 300 images created via an Automator action), a "thumb" directory (a 150 x 112 small image), and a "cache" directory that's writable by the server (Apache). I also have an index.php file in here with this code to redirect people:

<? header('location: http://nslog.com/desktops'); ?>

Upload all of your images to the appropriate folders. For simplicity, I also store my scripts (see below) here. My watermark is stored in the "_desktops" folder as well.

Step 3: Create Your MySQL Database

If you want to keep stats (height, width, OS, IP, which image a user downloads), you'll want to create a MySQL database. If you don't know how to do this, tough. For those who do, this should be sufficient:

CREATE TABLE `downloads` (
`dl_id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`filename` VARCHAR( 32 ) NOT NULL ,
`width` INT( 4 ) NOT NULL ,
`height` INT( 4 ) NOT NULL ,
`dl_time` DATETIME NOT NULL ,
`ip_address` VARCHAR( 15 ) NOT NULL ,
`os_version` VARCHAR( 32 ) NOT NULL
) ENGINE = MYISAM ;

Step 4: Get, Edit, and Upload the Scripts

Both scripts are available here as ".phps" files. In other words, the server will color stuff for you, but you shouldn't mind that. Just download them and rename them or copy the text and create your own files.

• Main Downloader Script
• Stats "Plugin"

I've named my files "downloader.php" and "downloader_stats.inc" on my server. You may want to do the same. If you don't, make sure you make the appropriate changes elsewhere in your setup.

In the main script, you'll want to edit $imConvertPath, $imCompositePath, $origImageDir, $cacheImageDir, and $watermarkPath, especially if your setup is different than mine.

In the stats script, replace the fake IP address (123.45.67.890) with your IP address and edit the $server, $username, $password, and $db_name variables.

Step 5: That's It

At least, I think that's it. Everything should work pretty well. You may want to set up a cron job to clear out the /cache directory now and then, particularly if you don't have a lot of free space on your server. You'll also want to clear it when you update your watermark so images are tagged with the new watermark.

Comments are open, and again, I'll do my best to update this page and fix bugs.

Step 6: Donations?

If you'd like to donate a little cash for this (and you install it on your own), PayPal some money to Aaron Linville. His PayPal email address is his first name @ his last name .org (all lowercase). If you'd like to donate for the desktop pictures themselves, see the link here. If you'd like me to help you solve a problem, send me an IM - but again, be mindful of the requirements.

Trackback URI | Comments RSS