image thumbnails now scale appropriately so there is no whitespace, also generalized some thumbnail loading code

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) {
+					if imgHeight < thumbHeight && imgWidth < thumbWidth {
-						thumbnail = resize.Resize(utils.Cfg.ImageSettings.ThumbnailWidth, utils.Cfg.ImageSettings.ThumbnailHeight, img, resize.Lanczos3)
-					} else {
 						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)

config/config.json

@@ -49,8 +49,8 @@
         "S3Region": ""
     },
     "ImageSettings": {
-        "ThumbnailWidth": 200,
+        "ThumbnailWidth": 120,
-        "ThumbnailHeight": 0,
+        "ThumbnailHeight": 100,
         "PreviewWidth": 1024,
         "PreviewHeight": 0,
         "ProfileWidth": 128,

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,

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]));
+            }
+        }
+    }
+}

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%;