index page build spritesheet of images

rebuild.php

@@ -11,14 +11,14 @@ define('SITE_TITLE', 'code.ivysaur.me');
 define('PAGE_THUMB_W', 60);
 define('PAGE_THUMB_H', 60);
 define('INDEX_THUMB_W', 90);
-define('INDEX_THUMB_H', 30);
+define('INDEX_THUMB_H', 32); // recommend a multiple of the jpg iDCT block size
 
 /**
  * Create a thumbnail of an image. It overscales, centers, and crops to fit the
  *   target dimensions.
  * 
  * @param string $src_file
- * @param string $dest_file
+ * @param string $dest_file   Null to return an image handle
  * @param int $width
  * @param int $height
  * @return boolean
@@ -45,8 +45,28 @@ function mkthumbnail($src_file, $dest_file, $width, $height) {
 		$width, $height, $box_w, $box_h		
 	);
 	
+	imagedestroy($im);
+	
+	if (is_null($dest_file)) {
+		return $dest;
+	} else {
 		return imagejpeg($dest, $dest_file);
 	}
+}
+
+function mkspritesheet(array $handles, $dest_file, $width, $height) {
+	$im = imagecreatetruecolor($width, $height * count($handles));
+	
+	for($i = 0, $e = count($handles); $i != $e; ++$i) {
+		imagecopy($im, $handles[$i], 0, $i * $height, 0, 0, $width, $height); 
+	}
+	
+	if (is_null($dest_file)) {
+		return $dest_file;
+	} else {
+		return imagejpeg($im, $dest_file);
+	}
+}
 
 /**
  * Remove a directory tree and all its contents.
@@ -113,7 +133,7 @@ class CProject {
 	private $images = array();
 	private $downloads = array();
 	
-	public $homeimage = 'no_image.png';
+	public $homeimage = null;
 	
 	public function __construct($dirname, $projname) {
 		$this->dir = BASEDIR.'data/'.$dirname.'/';
@@ -157,12 +177,11 @@ class CProject {
 		}
 		
 		if (count($this->images)) {
-			mkthumbnail(
+			$this->homeimage = mkthumbnail(
 				BASEDIR.'wwwroot/srv/'.$this->projname.'_0.'.str_ext($this->images[0]),
-				BASEDIR.'wwwroot/srv/'.$this->projname.'_headimg.jpg',
+				null, // raw handle
 				INDEX_THUMB_W, INDEX_THUMB_H
 			);
-			$this->homeimage = 'srv/'.$this->projname.'_headimg.jpg';
 		}
 		
 		// Copy downloads to wwwroot
@@ -286,6 +305,9 @@ function buildall() {
 	$plist = array();
 	$count = 0;
 
+	$handles = array();
+	$handle_lookup = array();
+	
 	foreach($projects as $dirname => $projectname) {
 
 		echo sprintf("[%2d/%2d] ".$projectname."...", ++$count, count($projects));
@@ -294,9 +316,21 @@ function buildall() {
 		$pr->write();
 		$plist[] = $pr;
 
+		if (is_null($pr->homeimage)) {
+			$handle_lookup[$projectname] = null;
+		} else {
+			$handle_lookup[$projectname] = count($handles);
+			$handles[] = $pr->homeimage;
+		}
+		
 		echo " done\n";
 	}	
 
+	// Build homepage spritesheet
+	
+	mkspritesheet($handles, BASEDIR.'wwwroot/logos.jpg', INDEX_THUMB_W, INDEX_THUMB_H);
+	array_map('imagedestroy', $handles); // free
+	
 	// Build index page
 
 	ob_start();
@@ -328,7 +362,7 @@ function buildall() {
 	<?php foreach ($plist as $pr) { ?> 
 			<tr>
 				<td>
-					<a href="<?=hesc(urlencode($pr->projname))?>.html"><img src="<?=hesc($pr->homeimage)?>" class="homeimage"></a>
+					<a href="<?=hesc(urlencode($pr->projname))?>.html"><?=(is_null($handle_lookup[$pr->projname]) ? '<img src="no_image.png" class="homeimage">' : '<div class="homeimage homeimage-sprite" style="background-position:0 -'.($handle_lookup[$pr->projname]*INDEX_THUMB_H).'px"></div>')?></a>
 				</td>
 				<td>
 					<strong><?=hesc($pr->projname)?></strong>,

static/style.css

@@ -54,7 +54,7 @@ html, body {
 	border-collapse: collapse;
 }
 .projtable td {
-	padding: 4px;
+	padding: 2px 4px;
 }
 .projtable small {
 	color:grey;
@@ -90,7 +90,11 @@ html, body {
 
 .homeimage {
 	width:90px;
-	height:30px;
+	height:32px;
+}
+
+.homeimage-sprite {
+	background: white url('logos.jpg') no-repeat 0 0;
 }
 
 .thumbimage {