closes #4650

public/src/admin/settings/general.js

@@ -14,6 +14,9 @@ define('admin/settings/general', ['admin/settings'], function(Settings) {
 		$('button[data-action="removeTouchIcon"]').on('click', function() {
 			$('input[data-field="brand:touchIcon"]').val('');
 		});
+		$('button[data-action="removeOgImage"]').on('click', function() {
+			$('input[data-field="removeOgImage"]').val('');
+		});
 	};
 
 	return Module;

src/controllers/admin/uploads.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var fs = require('fs'),
-	path = require('path'),
-	async = require('async'),
-	nconf = require('nconf'),
-	winston = require('winston'),
-	file = require('../../file'),
-	image = require('../../image'),
-	plugins = require('../../plugins');
+var fs = require('fs');
+var path = require('path');
+var async = require('async');
+var nconf = require('nconf');
+var winston = require('winston');
+var file = require('../../file');
+var image = require('../../image');
+var plugins = require('../../plugins');
 
 var allowedImageTypes = ['image/png', 'image/jpeg', 'image/pjpeg', 'image/jpg', 'image/gif', 'image/svg+xml'];
 
@@ -124,6 +124,10 @@ uploadsController.uploadDefaultAvatar = function(req, res, next) {
 	upload('avatar-default', req, res, next);
 };
 
+uploadsController.uploadOgImage = function(req, res, next) {
+	upload('og:image', req, res, next);
+};
+
 function upload(name, req, res, next) {
 	var uploadedFile = req.files.files[0];
 

src/controllers/categories.js

@@ -25,14 +25,14 @@ categoriesController.list = function(req, res, next) {
 		content: 'website'
 	}];
 
-	if (meta.config['brand:logo']) {
-		var brandLogo = meta.config['brand:logo'];
-		if (!brandLogo.startsWith('http')) {
-			brandLogo = nconf.get('url') + brandLogo;
+	var ogImage = meta.config['og:image'] || meta.config['brand:logo'] || '';
+	if (ogImage) {
+		if (!ogImage.startsWith('http')) {
+			ogImage = nconf.get('url') + ogImage;
 		}
 		res.locals.metaTags.push({
 			property: 'og:image',
-			content: brandLogo
+			content: ogImage
 		});
 	}
 

src/controllers/topics.js

@@ -172,6 +172,8 @@ topicsController.get = function(req, res, callback) {
 				ogImageUrl = topicData.thumb;
 			} else if (postAtIndex && postAtIndex.user && postAtIndex.user.picture) {
 				ogImageUrl = postAtIndex.user.picture;
+			} else if (meta.config['og:image']) {
+				ogImageUrl = meta.config['og:image'];
 			} else if (meta.config['brand:logo']) {
 				ogImageUrl = meta.config['brand:logo'];
 			} else {

src/routes/admin.js

@@ -15,6 +15,7 @@ function apiRoutes(router, middleware, controllers) {
 	router.post('/uploadfavicon', middlewares, controllers.admin.uploads.uploadFavicon);
 	router.post('/uploadTouchIcon', middlewares, controllers.admin.uploads.uploadTouchIcon);
 	router.post('/uploadlogo', middlewares, controllers.admin.uploads.uploadLogo);
+	router.post('/uploadOgImage', middlewares, controllers.admin.uploads.uploadOgImage);
 	router.post('/upload/sound', middlewares, controllers.admin.uploads.uploadSound);
 	router.post('/uploadDefaultAvatar', middlewares, controllers.admin.uploads.uploadDefaultAvatar);
 }

src/views/admin/settings/general.tpl

@@ -50,6 +50,7 @@
 				</span>
 			</div>
 		</div>
+
 		<div class="form-group">
 			<label for="brand:logo:url">URL</label>
 			<input id ="brand:logo:url" type="text" class="form-control" placeholder="The URL of the site logo" data-field="brand:logo:url" />
@@ -61,6 +62,17 @@
 			<label for="brand:logo:alt">Alt Text</label>
 			<input id ="brand:logo:alt" type="text" class="form-control" placeholder="Alternative text for accessibility" data-field="brand:logo:alt" />
 		</div>
+
+		<div class="form-group">
+			<label for="og_image">og:image</label>
+			<div class="input-group">
+				<input id="og_image" type="text" class="form-control" placeholder="" data-field="og:image" data-action="upload" data-target="og_image" data-route="{config.relative_path}/api/admin/uploadOgImage" readonly />
+				<span class="input-group-btn">
+					<input data-action="upload" data-target="og_image" data-route="{config.relative_path}/api/admin/uploadOgImage" type="button" class="btn btn-default" value="Upload"></input>
+					<button data-action="removeOgImage" type="button" class="btn btn-default btn-danger"><i class="fa fa-times"></i></button>
+				</span>
+			</div>
+		</div>
 	</div>
 </div>