Getting the max height from the img files correctly (Bug #1266586)

Problem existed where the cache didn't know the height of the files as
they had not been loaded before so the getting of the hightest one was
failing.

Changed it so that mahara passes in the height of the file to allow it
to fetch that instead.

Change-Id: I765ee00bd05720e8643ee97976a097d9cf394211
Signed-off-by: Robert Lyon <robertl@catalyst.net.nz>

htdocs/artefact/file/blocktype/gallery/lib.php

@@ -368,14 +368,19 @@ class PluginBlocktypeGallery extends PluginBlocktype {
                 // If the Thumbnails are Square or not...
                 if ($style == 2) {
                     $src .= '&size=' . $width . 'x' . $width;
+                    $height = $width;
                 }
                 else {
                     $src .= '&maxwidth=' . $width;
+                    $imgwidth = $image->get('width');
+                    $imgheight = $image->get('height');
+                    $height = ($imgwidth > $width) ? intval(($width / $imgwidth) * $imgheight) : $imgheight;
                 }
 
                 $images[] = array(
                     'link' => $link,
                     'source' => $src,
+                    'height' => $height,
                     'title' => $image->get('description'),
                     'slimbox2' => $slimbox2attr
                 );

htdocs/artefact/file/blocktype/gallery/theme/raw/squarethumbs.tpl

@@ -14,7 +14,11 @@ $j(function() {
     if ($j('#thumbnails{$instanceid}')) {
         // adjust height of image + description box to align things up
         var maxHeight = Math.max.apply(null, $j('#thumbnails{$instanceid} .thumb').map(function() {
-            return $j(this).height();
+            var height = parseInt($j(this).find('img').attr('height'));
+            if ($j(this).find('.caption').length > 0) {
+                height += parseInt($j(this).find('.caption').height());
+            }
+            return (height + 3); // we will give it a little more heigth to avoid a vertical scrollbar sometimes appearing
         }).get());
         $j('#thumbnails{$instanceid} .thumb').each(function() {
             $j(this).css('height', maxHeight);

htdocs/artefact/file/blocktype/gallery/theme/raw/thumbnails.tpl

@@ -2,7 +2,7 @@
     {foreach from=$images item=image}
         <div style="float:left;{if $frame} padding: 3px;{/if}" class="thumb">
         <a rel="{$image.slimbox2}" href="{$image.link}" title="{$image.title}" target="_blank">
-            <img src="{$image.source}" alt="{$image.title}" title="{$image.title}" {if $frame}class="frame"{/if} />
+            <img src="{$image.source}" {if $image.height}height="{$image.height}"{/if} alt="{$image.title}" title="{$image.title}" {if $frame}class="frame"{/if} />
         </a>
         {if $showdescription && $image.title}<div class="caption" style="width: {$captionwidth}px;">{$image.title|safe}</div>{/if}
         </div>
@@ -14,7 +14,11 @@ $j(function() {
     if ($j('#thumbnails{$instanceid}')) {
         // adjust height of image + description box to align things up
         var maxHeight = Math.max.apply(null, $j('#thumbnails{$instanceid} .thumb').map(function() {
-            return $j(this).height();
+            var height = parseInt($j(this).find('img').attr('height'));
+            if ($j(this).find('.caption').length > 0) {
+                height += parseInt($j(this).find('.caption').height());
+            }
+            return (height + 3); // we will give it a little more heigth to avoid a vertical scrollbar sometimes appearing
         }).get());
         $j('#thumbnails{$instanceid} .thumb').each(function() {
             $j(this).css('height', maxHeight);