IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JoramWilander
2015-07-29 10:09:11 -04:00
parent d0865b78b7
commit a541f09380
5 changed files with 64 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
api/file.go
View File

@@ -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)

4
config/config.json
View File

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

2
web/react/utils/constants.jsx
View File

@@ -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,

44
web/react/utils/utils.jsx
View File

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

7
web/sass-files/sass/partials/_files.scss
View File

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