New plugin for balanced height thumbnails

plugins/balanced/before_content.php

@@ -0,0 +1 @@
+<div id="thumbsize" style="visibility:hidden"><?php echo THUMB_SIZE ?></div>

plugins/balanced/functions.php

@@ -0,0 +1,64 @@
+<?php
+
+function getPreview($imgFile, $maxSize = THUMB_SIZE)
+{
+        # example: data/myalbum/100.mypic.jpg
+        $newImgFile = DATA_DIR."/".dirname($imgFile)."/".$maxSize.".".basename($imgFile);
+
+        # if the preview is a symlink, image is already good sized
+        if (is_link($newImgFile)) return $imgFile;
+
+        if (! is_file($newImgFile))
+        {
+                # this tels the template to flush output after displaying previews
+                $GLOBALS["generating"] = true;
+
+                # reset script time limit to 20s (wont work in safe mode)
+                set_time_limit(20);
+
+                $ext = strtolower(substr($imgFile, -4));
+                if ($ext == ".jpg")
+                        $img = imagecreatefromjpeg($imgFile);
+                else
+                        $img = imagecreatefrompng($imgFile);
+
+                $w = imagesx($img);
+                $h = imagesy($img);
+                # if the image is already small, make a symlink, and return it
+                if ($w <= $maxSize and $h <= $maxSize) {
+                        imagedestroy($img);
+                        symlink($imgFile, $newImgFile);
+                        return $imgFile;
+                }
+
+                # config to allow group writable files
+                umask(DATA_UMASK);
+                # create the thumbs directory recursively
+                if (! is_dir(dirname($newImgFile))) mkdir(dirname($newImgFile), 0777, true);
+
+                //if ($w > $h) {
+                //      $newW = $maxSize;
+                //      $newH = $h/($w/$maxSize);
+                //} else {
+                        $newW = $w/($h/$maxSize);
+                        $newH = $maxSize;
+                //}
+
+                $newImg = imagecreatetruecolor($newW, $newH);
+
+                imagecopyresampled($newImg, $img, 0, 0, 0, 0, $newW, $newH, $w, $h);
+
+                if ($ext == ".jpg")
+                        imagejpeg($newImg, $newImgFile);
+                else
+                        imagepng($newImg, $newImgFile);
+
+                imagedestroy($img);
+                imagedestroy($newImg);
+        }
+
+        return $newImgFile;
+}
+
+
+?>

plugins/balanced/head.php

@@ -0,0 +1,9 @@
+<script language="javascript" src="../plugins/balanced/scripts.js"></script> 
+<script language="javascript">
+        window.onload = function(event) {
+                applyOptimalImagesSize();
+        }
+        window.onresize = function(event) {
+                applyOptimalImagesSize();
+        }
+</script>

plugins/balanced/scripts.js

@@ -0,0 +1,129 @@
+function applyOptimalImagesSize()
+{
+	var divimages = document.getElementsByClassName("image");
+	var images = new Array();
+	for(var i = 0 ; i < divimages.length ; ++i)
+	{
+		images.push(divimages[i].children[0].children[0]);
+	}
+	var bestHeight = parseInt(document.getElementById("thumbsize").textContent);
+	var newHList = getOptimalHeights(images, bestHeight);
+	for( var i = 0 ; i < images.length ; ++i)
+	{
+		images[i].height = newHList[i];
+	}
+}
+
+//Renvoi un tuple (with,height) de la taille de la surface d'affichage du navigateur
+function getClientWindowSize()
+{
+	var w = 0;
+	var h = 0;
+	
+	 if (document.body)
+	{
+		w = (document.body.clientWidth);
+		h = (document.body.clientHeight);
+	}
+	else
+	{
+		w = (window.innerWidth);
+		h = (window.innerHeight);
+	}
+	
+	return [w,h];
+}
+
+//renvoie la hauteur optimal de chaque image pour occuper toute la largeur de la surface d'affichage
+function getOptimalHeights(images, bestHeight)
+{
+	var imageHeight = bestHeight;
+	var originalSizes = getAllImageSizesForHeight(images, imageHeight);
+	var clientSize = getClientWindowSize();
+	var newHeights = new Array();
+	var allWidth = new Array();
+	for(var i = 0 ; i < originalSizes.length ; ++i)
+	{
+		allWidth.push(originalSizes[i][0]);
+	}
+	
+	var splittedWidth = splitTab(allWidth, clientSize[0]);
+	for(var i = 0 ; i < splittedWidth.length ; ++i)
+	{
+		var sum = 15;
+		var ratiosum = 0.0;
+		for(var j=0 ; j< splittedWidth[i].length ; ++j)
+		{ 
+			sum += splittedWidth[i][j] + 5; 
+			ratiosum += parseFloat(splittedWidth[i][j]) / parseFloat(imageHeight);
+		}
+		var deltaHeight = parseInt((clientSize[0] - sum) / parseFloat(ratiosum));
+		
+		var lastandtoobig = i == (splittedWidth.length-1) && sum < clientSize[0]/2;
+
+		for(var j=0 ; j< splittedWidth[i].length ; ++j)
+		{ 
+			if(lastandtoobig)
+			{
+				newHeights.push(bestHeight);
+			}
+			else
+			{
+				newHeights.push(imageHeight + deltaHeight);
+			}
+		}
+	}
+	return newHeights;
+}
+
+//donne la taille de toutes les images affichées
+function getAllImageSizes(images)
+{
+	var sizes = new Array();
+	for (var i = 0; i < images.length; i++) {
+		sizes.push([images[i].width, images[i].height]);
+	}
+	return sizes;
+}
+
+//donne la taille de toutes les images affichées, redimensionnées pour une hauteur donnée
+function getAllImageSizesForHeight(images, height)
+{
+	var sizes = new Array();
+	for (var i = 0; i < images.length; i++) {
+		sizes.push([images[i].width / (images[i].height / height) , height]);
+	}
+	return sizes;
+}
+
+
+
+
+//Renvoi un tableau de tableau, correspondant au découpage du tableau d'entrée découpé par tranche de MAX
+function splitTab(tab, max)
+{
+	var splitedTabs = [new Array()];
+	var sumSize = 15;
+	for (var i = 0; i < tab.length; i++)
+	{
+		element = tab[i];
+		
+		var total = sumSize + element + 5;
+		//regles arbirtaire de découpage en plus de total > max
+		//(parce que ca rend mieux visuellement)
+		//=> on ajoute la suite l'élement qui dépasse si sa taille fait moins d'1/4 de max
+		//=> ou si l'écart restant représente plus de la moitié de l'élément à ajouter
+		if((total > max && (sumSize > max ||(max - sumSize) > (element / 2) || element > max / 4)) || element >= max)
+		{
+			splitedTabs.push(new Array());
+			splitedTabs[splitedTabs.length - 1].push(element);
+			sumSize = 16 + element + 4;
+		}
+		else
+		{
+			splitedTabs[splitedTabs.length - 1].push(element);
+			sumSize = total;
+		}
+	}	
+	return splitedTabs;
+}

plugins/balanced/style.css

@@ -0,0 +1,5 @@
+.image {
+        display: block;
+        width: auto;
+        height: auto;
+}