diff options
author | JoramWilander <jwawilander@gmail.com> | 2015-07-29 10:09:11 -0400 |
---|---|---|
committer | JoramWilander <jwawilander@gmail.com> | 2015-07-31 09:36:45 -0400 |
commit | a541f09380ab2adbe4d0ba7c80ff72015767bd81 (patch) | |
tree | bcf701536501e9deff006607cc8c861de7bc24ce | |
parent | d0865b78b776714139f3a6e39527e00fb05b8ea6 (diff) | |
download | chat-a541f09380ab2adbe4d0ba7c80ff72015767bd81.tar.gz chat-a541f09380ab2adbe4d0ba7c80ff72015767bd81.tar.bz2 chat-a541f09380ab2adbe4d0ba7c80ff72015767bd81.zip |
image thumbnails now scale appropriately so there is no whitespace, also generalized some thumbnail loading code
-rw-r--r-- | api/file.go | 13 | ||||
-rw-r--r-- | config/config.json | 4 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 2 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 44 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_files.scss | 7 |
5 files changed, 64 insertions, 6 deletions
diff --git a/api/file.go b/api/file.go index 219cf6103..4ec421eb9 100644 --- a/api/file.go +++ b/api/file.go @@ -140,11 +140,18 @@ func fireAndForgetHandleImages(filenames []string, fileData [][]byte, teamId, ch // Create thumbnail go func() { + thumbWidth := float64(utils.Cfg.ImageSettings.ThumbnailWidth) + thumbHeight := float64(utils.Cfg.ImageSettings.ThumbnailHeight) + imgWidth := float64(imgConfig.Width) + imgHeight := float64(imgConfig.Height) + var thumbnail image.Image - if imgConfig.Width > int(utils.Cfg.ImageSettings.ThumbnailWidth) { - thumbnail = resize.Resize(utils.Cfg.ImageSettings.ThumbnailWidth, utils.Cfg.ImageSettings.ThumbnailHeight, img, resize.Lanczos3) - } else { + if imgHeight < thumbHeight && imgWidth < thumbWidth { thumbnail = img + } else if imgHeight/imgWidth < thumbHeight/thumbWidth { + thumbnail = resize.Resize(0, utils.Cfg.ImageSettings.ThumbnailHeight, img, resize.Lanczos3) + } else { + thumbnail = resize.Resize(utils.Cfg.ImageSettings.ThumbnailWidth, 0, img, resize.Lanczos3) } buf := new(bytes.Buffer) diff --git a/config/config.json b/config/config.json index a1e73eb03..10a8b6553 100644 --- a/config/config.json +++ b/config/config.json @@ -49,8 +49,8 @@ "S3Region": "" }, "ImageSettings": { - "ThumbnailWidth": 200, - "ThumbnailHeight": 0, + "ThumbnailWidth": 120, + "ThumbnailHeight": 100, "PreviewWidth": 1024, "PreviewHeight": 0, "ProfileWidth": 128, diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 77ce19530..3509c9514 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -52,6 +52,8 @@ module.exports = { MAX_DISPLAY_FILES: 5, MAX_UPLOAD_FILES: 5, MAX_FILE_SIZE: 50000000, // 50 MB + THUMBNAIL_WIDTH: 128, + THUMBNAIL_HEIGHT: 100, DEFAULT_CHANNEL: 'town-square', OFFTOPIC_CHANNEL: 'off-topic', POST_CHUNK_SIZE: 60, diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index e51f7f3f4..942264fdb 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -913,3 +913,47 @@ module.exports.getFileName = function(path) { var split = path.split('/'); return split[split.length - 1]; }; + +module.exports.loadThumbnails = function(filenames, self) { + if (filenames) { + var re1 = new RegExp(' ', 'g'); + var re2 = new RegExp('\\(', 'g'); + var re3 = new RegExp('\\)', 'g'); + for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { + var fileInfo = module.exports.splitFileLocation(filenames[i]); + if (Object.keys(fileInfo).length === 0) continue; + + var type = module.exports.getFileType(fileInfo.ext); + + // This is a temporary patch to fix issue with old files using absolute paths + if (fileInfo.path.indexOf("/api/v1/files/get") != -1) { + fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1]; + } + fileInfo.path = module.exports.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path; + + if (type === "image") { + $('<img/>').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() { + $(this).remove(); + if (name in self.refs) { + var imgDiv = self.refs[name].getDOMNode(); + $(imgDiv).removeClass('post__load'); + $(imgDiv).addClass('post__image'); + + var width = this.width || $(this).width(); + var height = this.height || $(this).height(); + + if (width < Constants.THUMBNAIL_WIDTH + && height < Constants.THUMBNAIL_HEIGHT) { + $(imgDiv).addClass('small'); + } else { + $(imgDiv).addClass('normal'); + } + + var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); + $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)'); + } + }}(fileInfo.path, filenames[i])); + } + } + } +} diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index ea7548267..ddc5e98bb 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -129,7 +129,12 @@ height: 100%; background-color: #FFF; background-repeat: no-repeat; - background-position: top left; + &.small { + background-position: center; + } + &.normal { + background-position: top left; + } } .post-image__thumbnail { width: 50%; |