Commit a3f12ab1 authored by aceMa's avatar aceMa Committed by Gerrit Code Review
Browse files

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



I've taken what aceMa provided in bug report and made it a replacement
for the square thumbs option rather than a new option as we don't need
two square thumb options.

I've tweaked it a bit more and hopefully have got the padding/ratio
stuff more consistent and not using hardcoded numbers so much

And getting it to show descriptions/captions below frame

Change-Id: Iafc0ec8a8132d1bef5401b3ebd49e3df013fddc3
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent 393e1608
......@@ -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);
}
......
<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);
}
......
......@@ -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;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment