Merge "Do square thumb images while preserving ratio (Bug #1397005)"

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

@@ -367,8 +367,27 @@ class PluginBlocktypeGallery extends PluginBlocktype {
 
                 // If the Thumbnails are Square or not...
                 if ($style == 2) {
-                    $src .= '&size=' . $width . 'x' . $width;
-                    $height = $width;
+                    // Determine the scaling for the fitting the image in the square of $width size
+                    // Calculate the bigger, width vs height, to work out the ratio
+                    $configwidth = $width - (get_config_plugin('blocktype', 'gallery', 'photoframe') ? 8 : 0); // $width - photo frame padding
+                    $imagewidth = $image->get('width');
+                    $imageheight = $image->get('height');
+                    if ($imagewidth > $imageheight) {
+                        $ratio = $imagewidth / $configwidth;
+                    }
+                    else {
+                        $ratio = $imageheight / $configwidth;
+                    }
+                    $ratiowidth = floor($imagewidth / $ratio);
+                    $ratioheight = floor($imageheight / $ratio);
+                    // All image dimensions need to be bigger than 15px
+                    // see function imagesize_data_to_internal_form()
+                    $ratiowidth = $ratiowidth < 16 ? 16 : $ratiowidth;
+                    $ratioheight = $ratioheight < 16 ? 16 : $ratioheight;
+
+                    $topoffset = (($configwidth - $ratioheight) / 2);
+                    $src .= '&size=' . $ratiowidth . 'x' . $ratioheight;
+                    $height = $ratioheight;
                 }
                 else {
                     $src .= '&maxwidth=' . $width;
@@ -381,8 +400,11 @@ class PluginBlocktypeGallery extends PluginBlocktype {
                     'link' => $link,
                     'source' => $src,
                     'height' => $height,
+                    'width' => (!empty($ratiowidth) ? $ratiowidth : null),
                     'title' => $image->get('description'),
-                    'slimbox2' => $slimbox2attr
+                    'slimbox2' => $slimbox2attr,
+                    'squaredimensions' => $width,
+                    'squaretop' => (!empty($topoffset) ? $topoffset : null),
                 );
             }
         }
@@ -393,7 +415,6 @@ class PluginBlocktypeGallery extends PluginBlocktype {
         $smarty->assign('images', $images);
         $smarty->assign('showdescription', (!empty($configdata['showdescription'])) ? $configdata['showdescription'] : false);
         $smarty->assign('width', $width);
-        $smarty->assign('captionwidth', (get_config_plugin('blocktype', 'gallery', 'photoframe') ? $width + 8 : $width));
         if (isset($height)) {
             $smarty->assign('height', $height);
         }

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

 <div class="thumbnails" id="thumbnails{$instanceid}">
     {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}" width="{$width}" height="{$width}" {if $frame}class="frame"{/if}/>
+        <div style="float:left;{if $frame} padding: 3px;{/if}{if $image.squaredimensions}width:{$image.squaredimensions}px;height:{$image.squaredimensions}px;{/if}" class="thumb">
+         <div class="thumbimage" style="{if $image.squaredimensions}height:{$image.squaredimensions}px;{/if}">
+        <a rel="{$image.slimbox2}" href="{$image.link}" title="{$image.title}" style="position:relative;top:{$image.squaretop}px" target="_blank">
+            <img src="{$image.source}" alt="{$image.title}" title="{$image.title}" width="{if $image.width}{$image.width}{else}{$width}{/if}" height="{if $image.height}{$image.height}{else}{$width}{/if}" {if $frame}class="frame"{/if}/>
         </a>
-        {if $showdescription && $image.title}<div class="caption" style="width: {$captionwidth}px;">{$image.title|safe}</div>{/if}
+         </div>
+         {if $showdescription && $image.title}<div class="caption" style="top: 4px;width: {$width}px;">{$image.title|safe}</div>{/if}
         </div>
     {/foreach}
     <div class="cb"></div>
@@ -14,7 +16,7 @@ $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() {
-            var height = parseInt($j(this).find('img').attr('height'), 10);
+            var height = parseInt($j(this).css('height'), 10);
             if ($j(this).find('.caption').length > 0) {
                 height += parseInt($j(this).find('.caption').height(), 10);
             }

htdocs/theme/views.css

@@ -1099,3 +1099,14 @@ td.incomplete {
     width: 680px;
     font-size: 1em !important;
 }
+.thumb {
+    display: block;
+    margin: 2px;
+}
+.thumbimage {
+    background: #F7F7F7;
+    display: block;
+}
+.caption {
+    color: #555555;
+}