From 2ec4eadabe05c8983bef2f0092259c2863dbc3c2 Mon Sep 17 00:00:00 2001
From: mappu <mappu04@gmail.com>
Date: Sat, 21 Sep 2013 19:01:49 +1200
Subject: [PATCH] index page build spritesheet of images

---
 rebuild.php         |  50 +++++++++++++++++++++++++++++++++++++-------
 static/no_image.png | Bin 860 -> 436 bytes
 static/style.css    |   8 +++++--
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/rebuild.php b/rebuild.php
index 11cbe4d..59b46ae 100644
--- a/rebuild.php
+++ b/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,7 +45,27 @@ function mkthumbnail($src_file, $dest_file, $width, $height) {
 		$width, $height, $box_w, $box_h		
 	);
 	
-	return imagejpeg($dest, $dest_file);
+	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);
+	}
 }
 
 /**
@@ -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>,
diff --git a/static/no_image.png b/static/no_image.png
index 76ce4618d08bf24bb90d210916cb4be073fc3e08..504b7e0fa355a1c6582db142af9d0a493c6f6bfd 100644
GIT binary patch
delta 423
zcmV;Y0a*Ur2DAf^7k?lG0{{R3U_Ww}00003b3#c}2nYz<;ZNWI000<JOjJe1#l`>s
z|L^bb*4Ebd_xI)H<;={?-rn9ybFdo#000SaNLh0L01FZT01FZU(%pXi0000ObVXQn
zQ*UN;cVTj606}DLVr3vkX>w(EZ*psMPqQCR0003GNkl<ZIDd`p(6Mg9Fc5&@QxNHF
zFtEB8P}Y>8of94P8W5<f6VaPfi}zPeLQ_awDXgf!7hC#dpA6!j;9p-S=?+bl4%XD*
zL7L8qL0Z<fx!R}Ywj*2Y)3cI#iLRF0gAl7{qU@wsC%vcG(#C#}wk^KWGkz`R3`9Cm
zAwakRzyu%z*nbO;E*E8j%3>U-b+UtKo!byW1@DDVA9Y|*m1k`$G-$v+p-~}wbr9cZ
zHO}n_d4Bx)kZUcq)0M4ktAoTE<Y_Ve>S>A5*ew{L+vIL;69K<0-dHe;u9kRd`TMTh
z>;wy$cJ&35=*0Yab8fVkx+VwF*BN5!vHhUNzI*@BlOW|lTkBy%w39r({suELiQ5wi
R=!5_O002ovPDHLkV1g+$!*T!s

delta 850
zcmV-Y1FihD1Kb9X7k?fI1^@s6tYHaw0009cNkl<ZXx{CZi%u#r5QcgG=R#CaBryU(
zG!bG%5ag!Zgr0m&{>_{{i(C%insk!Mww;~s_S@;S-HZ!z63GMv0dxQz<a=2zmu|IM
z1<=P3z<zywxy54PL5GMw0^Iq09%&Nf0D8}~K-A7=v%eI`@qcs?K<@}vQ9GSZ6BY1b
zG2Af~*oa*R*6O-c5kSX)3hHDs*-7#F_1ilJ^8Ea~b+p)NZq<S$`snxb^Yg!yK6ZVt
zRDxy@jYh*=US7K4a2QQd2Kn*v@ng#K$<wJguqYCVqSx2g#Hj4`dcK`2HZ3yvYEal7
zA0OR#JoZXiet+?H+AI+HqI@W8lfUgtHuaa}w`oUla?redp-^zw*Vpd$_STnCNwHY;
zk;*lf%lWdPS$%kT@b+%E>y<J}zbfO4svSR`FWdR~dDI8Ca=9GYxXO-A&!A0q`Z@&Q
zqk<-4kf*07m(S<jU@&mCTFsrEow>KSH#ZuM{FQpWUVry>tF-A}-B+zvy^SmNR;%Uf
z7Z(@4F5BJRoiAfo|3oO|tE;Q%8Pw%RA3&x|ir_vQAgKk-%d!A54F!ys*TC#x?cl!y
ztq)>t)NQ~0e&3Z!B@ay?xj*TnT0bHf*qVXTeHOiwfNnOMevq9`$4Alq{k<Oybq$Pm
zsX*JdxPKo?nYOr%y6qQWlwV$6yvpzW{oR)<l}hvsQUq{0i~#lK=H{O*T<Rj4=p`~3
zR5qJ+?RMLz3tK0;Dbr?cv{Scg{m>*oJp)M8DRbpRQwFN_Q{DzT3$<N8xR<g{c+^=Z
zQURJpg583qEJ_|`a111=&H_nYN?pEItshF6wtu8PSp%r^9$N4KN`wLzXcFM@Os?1k
z8o(^5Hf?NktUfAe05h$Kk|ao*l!#*51BMk}(^UTqtnRbo(^nECZ7C%J8}~hQ%Ge7u
zDT4e4tWC;&z|?Vd-GACsi6WS*AOrtYvK43`0gi}BQf=_J{gd@m!g~T&hpJObW>cDA
zdP^sPWeb;PsA-eTcexIzoSMkTI*JB45NP(5+Gg$hrz*$>(4>N0er5;x<^Q7t=pX@f
c03F23A2L>8ssZN3i~s-t07*qoM6N<$f-_d64*&oF

diff --git a/static/style.css b/static/style.css
index 16c25b0..cd11d24 100644
--- a/static/style.css
+++ b/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 {