Add image resizing to better fit screens
Add image resizing to better fit screens

<?php <?php
include_once("config.inc.php"); include_once("config.inc.php");
include("php-calendar.lib.php"); include("php-calendar.lib.php");
function include_header($title) { function include_header($title) {
?> ?>
<!doctype html> <!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title> <title></title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS concatenated and minified via ant build script--> <!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<!-- end CSS--> <!-- end CSS-->
<script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<header> <header>
</header> </header>
<div id="main" role="main"> <div id="main" role="main">
<?php <?php
} }
function include_footer() { function include_footer() {
?> ?>
</div> </div>
<footer> <footer>
</footer> </footer>
</div> <!--! end of #container --> </div> <!--! end of #container -->
  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
  <script type="text/javascript" src="js/jquery.imagefit.js"></script>
  <script>
  $(window).load(function(){
  $('.col1').imagefit();
  });
  </script>
</body> </body>
</html> </html>
<?php <?php
} }
function include_sidebar() { function include_sidebar() {
?> ?>
<a href="upload.php">Upload a new day</a><br> <a href="upload.php">Upload a new day</a><br>
<a href="help.php">Help/Instructions</a><br> <a href="help.php">Help/Instructions</a><br>
<hr> <hr>
<?php <?php
foreach (getCalendarMonths() as $month) { foreach (getCalendarMonths() as $month) {
echo generate_calendar($month['year'], $month['month'], getCalendarDays($month['year'], $month['month']), 3); echo generate_calendar($month['year'], $month['month'], getCalendarDays($month['year'], $month['month']), 3);
} }
} }
function getNextAvailableDate() { function getNextAvailableDate() {
if ($previousDate = getPreviousDate()) { if ($previousDate = getPreviousDate()) {
$nextDayTime = strtotime("+1 day",strtotime($previousDate)); $nextDayTime = strtotime("+1 day",strtotime($previousDate));
if (date("m",$nextDayTime) == "08" and date("d",$nextDayTime) == "24") { if (date("m",$nextDayTime) == "08" and date("d",$nextDayTime) == "24") {
// skip the 24th of August // skip the 24th of August
$nextDayTime = strtotime("+1 day",$nextDayTime); $nextDayTime = strtotime("+1 day",$nextDayTime);
} }
return date("Y-m-d",$nextDayTime); return date("Y-m-d",$nextDayTime);
} else { } else {
return START_DATE; return START_DATE;
} }
} }
function getPreviousDate() { function getPreviousDate() {
$datedFiles = scandir(DATA_DIR); // sorted descendingly by default $datedFiles = scandir(DATA_DIR); // sorted descendingly by default
if (sizeof($datedFiles) > 2) {// always at least 2 even for an empty folder because of ./ and ../ if (sizeof($datedFiles) > 2) {// always at least 2 even for an empty folder because of ./ and ../
return removeImageFileExtensions($datedFiles[sizeof($datedFiles)-1]); return removeImageFileExtensions($datedFiles[sizeof($datedFiles)-1]);
} else { } else {
return false; return false;
} }
} }
function getPhoto($displayDate) { function getPhoto($displayDate) {
$cacheFile = CACHE_DIR.$displayDate.".png"; $cacheFile = CACHE_DIR.$displayDate.".png";
if (file_exists($cacheFile)) { if (file_exists($cacheFile)) {
return $cacheFile; return $cacheFile;
} else { } else {
if (file_exists(DATA_DIR.$displayDate.".jpg")) { if (file_exists(DATA_DIR.$displayDate.".jpg")) {
$source_gd_image = imagecreatefromjpeg( DATA_DIR.$displayDate.".jpg"); $source_gd_image = imagecreatefromjpeg( DATA_DIR.$displayDate.".jpg");
} else if (file_exists(DATA_DIR.$displayDate.".png")) { } else if (file_exists(DATA_DIR.$displayDate.".png")) {
$source_gd_image = imagecreatefrompng( DATA_DIR.$displayDate.".png" ); $source_gd_image = imagecreatefrompng( DATA_DIR.$displayDate.".png" );
} else { } else {
return false; return false;
} }
if ( $source_gd_image === false ) if ( $source_gd_image === false )
{ {
return false; return false;
} }
$source_image_width = imagesx($source_gd_image); $source_image_width = imagesx($source_gd_image);
$source_image_height = imagesy($source_gd_image); $source_image_height = imagesy($source_gd_image);
$header_gd_image = imagecreatefrompng( "img/header.png" ); $header_gd_image = imagecreatefrompng( "img/header.png" );
$header_image_width = imagesx($header_gd_image); $header_image_width = imagesx($header_gd_image);
$header_image_height = imagesy($header_gd_image); $header_image_height = imagesy($header_gd_image);
$white = imagecolorallocate($source_gd_image, 255, 255, 255); $white = imagecolorallocate($source_gd_image, 255, 255, 255);
$black = imagecolorallocate($source_gd_image, 0, 0, 0); $black = imagecolorallocate($source_gd_image, 0, 0, 0);
function calculateTextBox($text,$fontFile,$fontSize) { function calculateTextBox($text,$fontFile,$fontSize) {
/************ /************
simple function that calculates the *exact* bounding box (single pixel precision). simple function that calculates the *exact* bounding box (single pixel precision).
The function returns an associative array with these keys: The function returns an associative array with these keys:
left, top: coordinates you will pass to imagettftext left, top: coordinates you will pass to imagettftext
width, height: dimension of the image you have to create width, height: dimension of the image you have to create
*************/ *************/
$rect = imagettfbbox($fontSize,0,$fontFile,$text); $rect = imagettfbbox($fontSize,0,$fontFile,$text);
$minX = min(array($rect[0],$rect[2],$rect[4],$rect[6])); $minX = min(array($rect[0],$rect[2],$rect[4],$rect[6]));
$maxX = max(array($rect[0],$rect[2],$rect[4],$rect[6])); $maxX = max(array($rect[0],$rect[2],$rect[4],$rect[6]));
$minY = min(array($rect[1],$rect[3],$rect[5],$rect[7])); $minY = min(array($rect[1],$rect[3],$rect[5],$rect[7]));
$maxY = max(array($rect[1],$rect[3],$rect[5],$rect[7])); $maxY = max(array($rect[1],$rect[3],$rect[5],$rect[7]));
return array( return array(
"left" => abs($minX) - 1, "left" => abs($minX) - 1,
"top" => abs($minY) - 1, "top" => abs($minY) - 1,
"width" => $maxX - $minX, "width" => $maxX - $minX,
"height" => $maxY - $minY, "height" => $maxY - $minY,
"box" => $rect "box" => $rect
); );
} }
$date = strtotime($displayDate); $date = strtotime($displayDate);
// First we create our bounding box for the first text // First we create our bounding box for the first text
$textDayName = date("l",$date); $textDayName = date("l",$date);
$sizeDayName = 18; $sizeDayName = 18;
$fontDayName = "./img/mplus-1p-medium.ttf"; $fontDayName = "./img/mplus-1p-medium.ttf";
$bboxDayName = calculateTextBox($textDayName,$fontDayName,$sizeDayName); $bboxDayName = calculateTextBox($textDayName,$fontDayName,$sizeDayName);
$textDate = date("jS F Y",$date); $textDate = date("jS F Y",$date);
$sizeDate = 14; $sizeDate = 14;
$fontDate = "./img/mplus-1p-regular.ttf"; $fontDate = "./img/mplus-1p-regular.ttf";
$bboxDate = calculateTextBox($textDate,$fontDate,$sizeDate); $bboxDate = calculateTextBox($textDate,$fontDate,$sizeDate);
$margin = 15; $margin = 15;
$maxX = $header_image_width + $margin*2 + max($bboxDayName['width'],$bboxDate['width']) + $margin*2; $maxX = $header_image_width + $margin*2 + max($bboxDayName['width'],$bboxDate['width']) + $margin*2;
$maxY = max($header_image_height + $margin*2 , ($bboxDayName['height']+$margin+$bboxDate['height'])); $maxY = max($header_image_height + $margin*2 , ($bboxDayName['height']+$margin+$bboxDate['height']));
// Draw a white rectangle // Draw a white rectangle
imagefilledrectangle($source_gd_image, 0, 0, $maxX, $maxY, $white); imagefilledrectangle($source_gd_image, 0, 0, $maxX, $maxY, $white);
imagecopy($source_gd_image, $header_gd_image,$margin,$margin,0,0,$header_image_width,$header_image_height); imagecopy($source_gd_image, $header_gd_image,$margin,$margin,0,0,$header_image_width,$header_image_height);
// Write it // Write it
imagettftext($source_gd_image, $sizeDayName, 0, $header_image_width+$margin*2+$bboxDayName['left'], $margin+$bboxDayName['top'], $black, $fontDayName, $textDayName); imagettftext($source_gd_image, $sizeDayName, 0, $header_image_width+$margin*2+$bboxDayName['left'], $margin+$bboxDayName['top'], $black, $fontDayName, $textDayName);
imagettftext($source_gd_image, $sizeDate, 0, $header_image_width+$margin*2+$bboxDate['left'], $margin+$bboxDayName['height']+$margin+$bboxDate['top'], $black, $fontDate, $textDate); imagettftext($source_gd_image, $sizeDate, 0, $header_image_width+$margin*2+$bboxDate['left'], $margin+$bboxDayName['height']+$margin+$bboxDate['top'], $black, $fontDate, $textDate);
imagepng( $source_gd_image, $cacheFile, 9 ); imagepng( $source_gd_image, $cacheFile, 9 );
imagedestroy( $source_gd_image ); imagedestroy( $source_gd_image );
return $cacheFile; return $cacheFile;
} }
} }
function getCalendarDays($year,$month) { function getCalendarDays($year,$month) {
$result = Array(); $result = Array();
if ($handle = opendir(DATA_DIR)) { if ($handle = opendir(DATA_DIR)) {
while (false !== ($file = readdir($handle))) { while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != ".." && startsWith($file,"$year-$month")) { if ($file != "." && $file != ".." && startsWith($file,"$year-$month")) {
$parts = explode("-",$file); $parts = explode("-",$file);
$day = removeImageFileExtensions($parts[2]); $day = removeImageFileExtensions($parts[2]);
$result[$day]=Array("index.php?date=$year-$month-$day",'linked-day'); $result[$day]=Array("index.php?date=$year-$month-$day",'linked-day');
} }
} }
} }
ksort($result); ksort($result);
return $result; return $result;
} }
function getCalendarMonths() { function getCalendarMonths() {
$months = Array(); $months = Array();
if ($handle = opendir(DATA_DIR)) { if ($handle = opendir(DATA_DIR)) {
while (false !== ($file = readdir($handle))) { while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") { if ($file != "." && $file != "..") {
$parts = explode("-",$file); $parts = explode("-",$file);
$months[$parts[0].$parts[1]]=Array("month"=>$parts[1],"year"=>$parts[0]); $months[$parts[0].$parts[1]]=Array("month"=>$parts[1],"year"=>$parts[0]);
} }
} }
} }
return $months; return $months;
} }
function startsWith($haystack, $needle) function startsWith($haystack, $needle)
{ {
// source: http://stackoverflow.com/questions/834303/php-startswith-and-endswith-functions // source: http://stackoverflow.com/questions/834303/php-startswith-and-endswith-functions
$length = strlen($needle); $length = strlen($needle);
return (substr($haystack, 0, $length) === $needle); return (substr($haystack, 0, $length) === $needle);
} }
function removeImageFileExtensions($filename) { function removeImageFileExtensions($filename) {
return str_replace(Array(".png",".jpg"),"",$filename); return str_replace(Array(".png",".jpg"),"",$filename);
} }
?> ?>
file:a/index.php -> file:b/index.php
<?php <?php
include("common.inc.php"); include("common.inc.php");
include_header("index"); include_header("index");
?> ?>
<div class="colmask rightmenu"> <div class="colmask rightmenu">
<div class="colleft"> <div class="colleft">
<div class="col1"> <div class="col1">
<?php <?php
$displayDate = (isset($_GET['date']) ? filter_var(substr($_GET['date'],0,11),FILTER_SANITIZE_URL) : date("Y-m-d")); $displayDate = (isset($_GET['date']) ? filter_var(substr($_GET['date'],0,11),FILTER_SANITIZE_URL) : date("Y-m-d"));
$photoFilename = getPhoto($displayDate); $photoFilename = getPhoto($displayDate);
if ($photoFilename == false) { if ($photoFilename == false) {
echo "Oops, no photo uploaded for this day<br>"; echo "Oops, no photo uploaded for this day<br>";
} else { } else {
echo '<img src="'.$photoFilename.'">'; echo '<img alt="Photo for '.$displayDate.'" src="'.$photoFilename.'">';
} }
?> ?>
</div> <div class="col2"> </div> <div class="col2">
<?php <?php
include_sidebar(); include_sidebar();
echo ' </div> echo ' </div>
</div> </div>
</div> '; </div> ';
include_footer(); include_footer();
?> ?>
  /* jquery.imagefit
  *
  * Version 0.2 by Oliver Boermans <http://www.ollicle.com/eg/jquery/imagefit/>
  *
  * Extends jQuery <http://jquery.com>
  *
  */
  (function($) {
  $.fn.imagefit = function(options) {
  var fit = {
  all : function(imgs){
  imgs.each(function(){
  fit.one(this);
  })
  },
  one : function(img){
  $(img)
  .width('100%').each(function()
  {
  $(this).height(Math.round(
  $(this).attr('startheight')*($(this).width()/$(this).attr('startwidth')))
  );
  })
  }
  };
 
  this.each(function(){
  var container = this;
 
  // store list of contained images (excluding those in tables)
  var imgs = $('img', container).not($("table img"));
 
  // store initial dimensions on each image
  imgs.each(function(){
  $(this).attr('startwidth', $(this).width())
  .attr('startheight', $(this).height())
  .css('max-width', $(this).attr('startwidth')+"px");
 
  fit.one(this);
  });
  // Re-adjust when window width is changed
  $(window).bind('resize', function(){
  fit.all(imgs);
  });
  });
  return this;
  };
  })(jQuery);