diff --git a/src/_h5ai/private/conf/options.json b/src/_h5ai/private/conf/options.json index a570da26f..af6cdc53b 100644 --- a/src/_h5ai/private/conf/options.json +++ b/src/_h5ai/private/conf/options.json @@ -234,11 +234,9 @@ Show an image preview on click. - types: array of strings - - size: number, sample size, or false for original size */ "preview-img": { "enabled": true, - "size": false, "types": ["img", "img-bmp", "img-gif", "img-ico", "img-jpg", "img-png", "img-raw", "img-svg"] }, @@ -355,7 +353,7 @@ - mov: array of strings - doc: array of strings - delay: number, delay in milliseconds after "dom-ready" before thumb-requesting starts - - size: number, size in pixel of the generated thumbnails + - size: number, height in pixel of the generated thumbnails - exif: boolean, use included EXIF thumbs if possible - chunksize: int, number of thumbs per request */ diff --git a/src/_h5ai/private/php/core/class-context.php b/src/_h5ai/private/php/core/class-context.php index 0a72cea54..7ced778c5 100644 --- a/src/_h5ai/private/php/core/class-context.php +++ b/src/_h5ai/private/php/core/class-context.php @@ -247,10 +247,12 @@ public function get_l10n($iso_codes) { public function get_thumbs($requests) { $hrefs = []; + $height = $this->options['thumbnails']['size'] ?? 240; + $width = floor($height * (4 / 3)); foreach ($requests as $req) { $thumb = new Thumb($this); - $hrefs[] = $thumb->thumb($req['type'], $req['href'], $req['width'], $req['height']); + $hrefs[] = $thumb->thumb($req['type'], $req['href'], $width, $height); } return $hrefs; diff --git a/src/_h5ai/public/css/lib/view/view.less b/src/_h5ai/public/css/lib/view/view.less index aef93ecbb..1be5170dc 100644 --- a/src/_h5ai/public/css/lib/view/view.less +++ b/src/_h5ai/public/css/lib/view/view.less @@ -48,6 +48,8 @@ .thumb { max-width: none; max-height: none; + object-fit: cover; + object-position: 50% 50%; } } diff --git a/src/_h5ai/public/js/lib/ext/preview/preview-img.js b/src/_h5ai/public/js/lib/ext/preview/preview-img.js index 1b4b5a5c4..bf8277f9d 100644 --- a/src/_h5ai/public/js/lib/ext/preview/preview-img.js +++ b/src/_h5ai/public/js/lib/ext/preview/preview-img.js @@ -1,11 +1,9 @@ const {dom} = require('../../util'); -const server = require('../../server'); const allsettings = require('../../core/settings'); const preview = require('./preview'); const settings = Object.assign({ enabled: false, - size: null, types: [] }, allsettings['preview-img']); const tpl = ''; @@ -19,34 +17,16 @@ const updateGui = () => { const elW = el.offsetWidth; const labels = [preview.item.label]; - if (!settings.size) { - const elNW = el.naturalWidth; - const elNH = el.naturalHeight; - labels.push(String(elNW) + 'x' + String(elNH)); - labels.push(String((100 * elW / elNW).toFixed(0)) + '%'); - } - preview.setLabels(labels); -}; + const elNW = el.naturalWidth; + const elNH = el.naturalHeight; + labels.push(String(elNW) + 'x' + String(elNH)); + labels.push(String((100 * elW / elNW).toFixed(0)) + '%'); -const requestSample = href => { - return server.request({ - action: 'get', - thumbs: [{ - type: 'img', - href, - width: settings.size, - height: 0 - }] - }).then(json => { - return json && json.thumbs && json.thumbs[0] ? json.thumbs[0] : null; - }); + preview.setLabels(labels); }; const load = item => { return Promise.resolve(item.absHref) - .then(href => { - return settings.size ? requestSample(href) : href; - }) .then(href => new Promise(resolve => { const $el = dom(tpl) .on('load', () => resolve($el)) diff --git a/src/_h5ai/public/js/lib/ext/preview/preview.js b/src/_h5ai/public/js/lib/ext/preview/preview.js index 703b2b995..d5a44fb07 100644 --- a/src/_h5ai/public/js/lib/ext/preview/preview.js +++ b/src/_h5ai/public/js/lib/ext/preview/preview.js @@ -213,7 +213,7 @@ Session.prototype = { } }); dom('#pv-container').hide().clr(); - showSpinner(true, item.thumbSquare || item.icon, 200); + showSpinner(true, item.thumbRational || item.icon, 200); }) .then(() => this.load(item)) // delay for testing diff --git a/src/_h5ai/public/js/lib/ext/thumbnails.js b/src/_h5ai/public/js/lib/ext/thumbnails.js index d71898cc2..a8ef6a614 100644 --- a/src/_h5ai/public/js/lib/ext/thumbnails.js +++ b/src/_h5ai/public/js/lib/ext/thumbnails.js @@ -13,7 +13,6 @@ const settings = Object.assign({ exif: false, chunksize: 20 }, allsettings.thumbnails); -const landscapeRatio = 4 / 3; const queueItem = (queue, item) => { @@ -29,33 +28,16 @@ const queueItem = (queue, item) => { return; } - if (item.thumbSquare) { - item.$view.find('.icon.square img').addCls('thumb').attr('src', item.thumbSquare); - } else { - queue.push({ - type, - href: item.absHref, - ratio: 1, - callback: src => { - if (src && item.$view) { - item.thumbSquare = src; - item.$view.find('.icon.square img').addCls('thumb').attr('src', src); - } - } - }); - } - if (item.thumbRational) { - item.$view.find('.icon.landscape img').addCls('thumb').attr('src', item.thumbRational); + item.$view.find('.icon img').addCls('thumb').attr('src', item.thumbRational); } else { queue.push({ type, href: item.absHref, - ratio: landscapeRatio, callback: src => { if (src && item.$view) { item.thumbRational = src; - item.$view.find('.icon.landscape img').addCls('thumb').attr('src', src); + item.$view.find('.icon img').addCls('thumb').attr('src', src); } } }); @@ -67,8 +49,6 @@ const requestQueue = queue => { return { type: req.type, href: req.href, - width: Math.round(settings.size * req.ratio), - height: settings.size }; });