Embed image

plugin.css

/* Plugin CSS file */

.embedImage img {
  max-width: 100%;
}

plugin.js

app.plugins.embedImage = function(message) {
  var listener;
    
  var template = _.template(
    "<div>" +
      "<a class=\"\"><i class=\"fa fa-chevron-up <% if (settings.collapsed) { %>hide<% } %>\"></i></a>" + 
      "<a class=\"\"><i class=\"fa fa-chevron-down <% if (!settings.collapsed) { %>hide<% } %>\"></i></a>" + 
    "</div>" +
    "<div class=\"embed embedImage <% if (settings.collapsed) { %>hide<% } %>\">" +
      "<img src=\"<%= image %>\" />" +
    "</div>");
  
  // see http://daringfireball.net/2010/07/improved_regex_for_matching_urls
  var re = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi;
  var image_src = (message.match(re)) ? RegExp.$1 : false;
  
  if(image_src && (_.contains(['jpg', 'gif', 'png'], image_src.substr(-3)) ||  image_src.substr(-4) === "jpeg")) {
    // Get plugin settings
    var settings = app.plugin_data.embedImage.settings;
    message = message + template({image: image_src, settings: settings});
    
    // Add listener
    listener = function() {
      var $el = $(this.getDOMNode());
      
      // This will hide or show the content
      $el.find(".fa-chevron-up, .fa-chevron-down").click(function() {
        $el.find(".fa-chevron-up, .fa-chevron-down, .embed").toggleClass("hide");
      });
    }
  }
  
  return {text: message, listener: listener};
}

plugin.json

{
  "name": "Image Embedder",
  "author": "David Petersen",
  "description": "Embeds images posted in a message",
  "pluginId": "embedImage",
  "settings": {
    "collapsed": false
  }
}

A suggestion from here: thedjpetersen/subway#116 , is to be able to have certain channels or users images be collapsed by default.