Add image fetching for articles that support the og:image meta tag

controllers/resources.js

@@ -283,14 +283,16 @@ module.exports = {
         return process.env.NODE_ENV;
     },
     getURLTitle: function(url, callback) {
-
+        debug('got url in meta scraping function', url);
         (function () {
-            var result = {title: ''};
+            var result = {title: '', image: '', url: ''};
             request(url, function (error, response, body) {
                 if (!error && response.statusCode === 200) {
                     var $ = cheerio.load(body);
+                    var urlImage = $("meta[property='og:image']").attr('content') ? $("meta[property='og:image']").attr('content') : '';
                     var title = $('title').text();
                     result.title = title;
+                    result.image = urlImage;
                     callback(null, result);
                 } else {
                     callback('failed');

controllers/story.js

@@ -84,13 +84,18 @@ exports.preSubmit = function(req, res, next) {
     var data = req.params.newStory;
 
 
-    data = data.replace(/url=/gi, '').replace(/&title=/gi, ',').split(',');
+    data = data.replace(/url=/gi, ',').replace(/&title=/gi, ',').replace(/&image=/gi, ',').split(',');
+    // get rid of first blank element from shift
+    data.shift();
+    debug('data to send after splitting', data);
     var url = data[0];
     var title = data[1];
+    var image = data[2];
     res.render('stories/index', {
         page: 'storySubmission',
         storyURL: url,
-        storyTitle: title
+        storyTitle: title,
+        storyImage: image
     });
 };
 
@@ -206,13 +211,11 @@ exports.comments = function(req, res, next) {
 
 exports.newStory = function(req, res, next) {
     var url = req.body.data.url;
+    debug('this is the url', url);
     if (url.search(/^https?:\/\//g) === -1) {
         url = 'http://' + url;
     }
-    debug('In pre submit with a url', url);
-
     Story.find({'link': url}, function(err, story) {
-        debug('Attempting to find a story');
         if (err) {
             debug('oops');
             return res.status(500);
@@ -231,19 +234,20 @@ exports.newStory = function(req, res, next) {
         resources.getURLTitle(url, processResponse);
     });
 
-    function processResponse(err, storyTitle) {
+    function processResponse(err, story) {
         if (err) {
             res.json({
                 alreadyPosted: false,
                 storyURL: url,
-                storyTitle: ''
+                storyTitle: '',
+                storyImage: ''
             });
         } else {
-            storyTitle = storyTitle ? storyTitle : '';
             res.json({
                 alreadyPosted: false,
                 storyURL: url,
-                storyTitle: storyTitle.title
+                storyTitle: story.title,
+                storyImage: story.image
             });
         }
     }

views/stories/preliminary-submit.jade

@@ -38,7 +38,8 @@
                     } else {
                         window.location = '/stories/submit/url=' +
                         encodeURIComponent(data.storyURL) +
-                        '&title=' + encodeURIComponent(data.storyTitle);
+                        '&title=' + encodeURIComponent(data.storyTitle) +
+                        '&image=' + encodeURIComponent(data.storyImage)
                     }
                 });
             }

views/stories/submit-story.jade

@@ -3,6 +3,7 @@
     script.
         var storyURL = !{JSON.stringify(storyURL)};
         var storyTitle = !{JSON.stringify(storyTitle)};
+        var storyImage = !{JSON.stringify(storyImage)};
     form.form-horizontal.control-label-story-submission#story-submission-form
         .col-xs-12
             .form-group
@@ -21,12 +22,16 @@
                 .col-xs-12.col-md-11
                     input#description-box.form-control(name="comment-box", placeholder="Start off the discussion with a description of your post" maxlength='140')
                     span.pull-left#textarea_feedback
+            .row
+                img.img-center.img-responsive(src="#{storyImage}", style="max-width: 250px; max-height: 250px")
             .spacer
-            .form-group
+            .row
-                button.btn.btn-big.btn-block.btn-primary#story-submit Submit
+                .form-group
+                    button.btn.btn-big.btn-block.btn-primary#story-submit Submit
     script.
         $('#story-url').val(storyURL).attr('disabled', 'disabled');
         $('#story-title').val(storyTitle);
+        console.log(storyImage);
         var text_max = 140;
         $('#textarea_feedback').html(text_max + ' characters remaining');
         $('#description-box').keyup(function () {