closes #4550

public/src/client/topic/posts.js

@@ -230,7 +230,6 @@ define('forum/topic/posts', [
 		utils.addCommasToNumbers(posts.find('.formatted-number'));
 		utils.makeNumbersHumanReadable(posts.find('.human-readable-number'));
 		posts.find('.timeago').timeago();
-		Posts.wrapImagesInLinks(posts);
 
 		addBlockquoteEllipses(posts.find('[component="post/content"] > blockquote > blockquote'));
 		hidePostToolsForDeletedPosts(posts);
@@ -265,6 +264,9 @@ define('forum/topic/posts', [
 				visible = images.filter(function() {
 					return config.delayImageLoading ? utils.isElementInViewport(this) : true;
 				}),
+				posts = $.unique(visible.map(function() {
+					return $(this).parents('[component="post"]').get(0);
+				})),
 				scrollTop = $(window).scrollTop(),
 				adjusting = false,
 				adjustQueue = [],
@@ -286,6 +288,9 @@ define('forum/topic/posts', [
 						adjustQueue.pop()();
 					} else {
 						adjusting = false;
+
+						Posts.wrapImagesInLinks(posts);
+						posts.length = 0;
 					}
 				},
 				oldHeight, newHeight;
@@ -304,9 +309,6 @@ define('forum/topic/posts', [
 				});
 
 				image.attr('src', image.attr('data-src'));
-				if (image.parent().attr('href') === 'about:blank') {
-					image.parent().attr('href', image.attr('data-src'));
-				}
 				image.removeAttr('data-src');
 			});
 		}, 250);
@@ -314,9 +316,16 @@ define('forum/topic/posts', [
 
 	Posts.wrapImagesInLinks = function(posts) {
 		posts.find('[component="post/content"] img:not(.emoji)').each(function() {
-			var $this = $(this);
+			var $this = $(this),
+				src = $this.attr('src'),
+				suffixRegex = /-resized(\.[\w]+)$/;
+
+			if (utils.isRelativeUrl(src) && suffixRegex.test(src)) {
+				src = src.replace(suffixRegex, '$1');
+			}
+
 			if (!$this.parent().is('a')) {
-				$this.wrap('<a href="' + $this.attr('src') + '" target="_blank">');
+				$this.wrap('<a href="' + src + '" target="_blank">');
 			}
 		});
 	};

src/controllers/uploads.js

@@ -14,7 +14,7 @@ var image = require('../image');
 
 var uploadsController = {};
 
-uploadsController.upload = function(req, res, filesIterator, next) {
+uploadsController.upload = function(req, res, filesIterator) {
 	var files = req.files.files;
 
 	if (!req.user && meta.config.allowGuestUploads !== '1') {
@@ -63,6 +63,30 @@ uploadsController.uploadPost = function(req, res, next) {
 					return next(new Error('[[error:uploads-are-disabled]]'));
 				}
 				uploadFile(req.uid, uploadedFile, next);
+			},
+			function(fileObj, next) {
+				if (!isImage || parseInt(meta.config.maximumImageWidth, 10) === 0) {
+					// Not an image, or resizing disabled. No need to resize.
+					return next(null, fileObj);
+				}
+
+				var fullPath = path.join(nconf.get('base_dir'), nconf.get('upload_path'), '..', fileObj.url),
+					parsedPath = path.parse(fullPath);
+
+				image.resizeImage({
+					path: fullPath,
+					target: path.join(parsedPath.dir, parsedPath.name + '-resized' + parsedPath.ext),
+					extension: parsedPath.ext,
+					width: parseInt(meta.config.maximumImageWidth, 10) || 760
+				}, function(err) {
+					// Return the resized version to the composer/postData
+					var parsedUrl = path.parse(fileObj.url);
+					delete parsedUrl.base;
+					parsedUrl.name = parsedUrl.name + '-resized';
+					fileObj.url = path.format(parsedUrl);
+
+					next(err, fileObj);
+				});
 			}
 		], next);
 	}, next);

src/image.js

@@ -11,6 +11,7 @@ image.resizeImage = function(data, callback) {
 	if (plugins.hasListeners('filter:image.resize')) {
 		plugins.fireHook('filter:image.resize', {
 			path: data.path,
+			target: data.target,
 			extension: data.extension,
 			width: data.width,
 			height: data.height
@@ -26,28 +27,42 @@ image.resizeImage = function(data, callback) {
 			var w = image.bitmap.width,
 				h = image.bitmap.height,
 				origRatio = w/h,
-				desiredRatio = data.width/data.height,
+				desiredRatio = data.width && data.height ? data.width/data.height : origRatio,
 				x = 0,
 				y = 0,
 				crop;
 
-			if (desiredRatio > origRatio) {
-				desiredRatio = 1/desiredRatio;
-			}
-			if (origRatio >= 1) {
-				y = 0;	// height is the smaller dimension here
-				x = Math.floor((w/2) - (h * desiredRatio / 2));
-				crop = async.apply(image.crop.bind(image), x, y, h * desiredRatio, h);
+			if (origRatio !== desiredRatio) {
+				if (desiredRatio > origRatio) {
+					desiredRatio = 1/desiredRatio;
+				}
+				if (origRatio >= 1) {
+					y = 0;	// height is the smaller dimension here
+					x = Math.floor((w/2) - (h * desiredRatio / 2));
+					crop = async.apply(image.crop.bind(image), x, y, h * desiredRatio, h);
+				} else {
+					x = 0;	// width is the smaller dimension here
+					y = Math.floor(h/2 - (w * desiredRatio / 2));
+					crop = async.apply(image.crop.bind(image), x, y, w, w * desiredRatio);
+				}
 			} else {
-				x = 0;	// width is the smaller dimension here
-				y = Math.floor(h/2 - (w * desiredRatio / 2));
-				crop = async.apply(image.crop.bind(image), x, y, w, w * desiredRatio);
+				// Simple resize given either width, height, or both
+				crop = async.apply(setImmediate);
 			}
 
 			async.waterfall([
 				crop,
-				function(image, next) {
-					image.resize(data.width, data.height, next);
+				function(_image, next) {
+					if (typeof _image === 'function' && !next) {
+						next = _image;
+						_image = image;
+					}
+
+					if ((data.width && data.height) || (w > data.width) || (h > data.height)) {
+						_image.resize(data.width || Jimp.AUTO, data.height || Jimp.AUTO, next);
+					} else {
+						next(null, image);
+					}
 				},
 				function(image, next) {
 					image.write(data.target || data.path, next);

src/views/admin/settings/uploads.tpl

@@ -28,8 +28,19 @@
 			</div>
 			
 			<div class="form-group">
-				<label for="maximumFileSize">Maximum File Size</label>
+				<label for="maximumImageWidth">Resize images down to specified width (in pixels)</label>
+				<input type="text" class="form-control" value="760" data-field="maximumImageWidth" placeholder="760">
+				<p class="help-block">
+					(in pixels, default: 760 pixels, set to 0 to disable)
+				</p>
+			</div>
+
+			<div class="form-group">
+				<label for="maximumFileSize">Maximum File Size (in KiB)</label>
 				<input type="text" class="form-control" value="2048" data-field="maximumFileSize">
+				<p class="help-block">
+					(in kilobytes, default: 2048 KiB)
+				</p>
 			</div>
 
 			<div class="checkbox">