Merge pull request #274 from mattermost/mm-1497

MM-1497 image thumbnails now scale appropriately so there is no whitespace

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,

config/config_docker.json

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

web/react/components/file_attachment.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 var utils = require('../utils/utils.jsx');
+var Constants = require('../utils/constants.jsx');
 
 module.exports = React.createClass({
     displayName: "FileAttachment",
@@ -44,6 +45,16 @@ module.exports = React.createClass({
                         $(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 re1 = new RegExp(' ', 'g');
                         var re2 = new RegExp('\\(', 'g');
                         var re3 = new RegExp('\\)', 'g');

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