index page build spritesheet of images

This commit is contained in:
mappu 2013-09-21 19:01:49 +12:00
parent 16bdbab1ab
commit 2ec4eadabe
3 changed files with 48 additions and 10 deletions

View File

@ -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>,

Binary file not shown.

Before

Width:  |  Height:  |  Size: 860 B

After

Width:  |  Height:  |  Size: 436 B

View File

@ -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 {