add styles

assets/javascripts/image-tag-whitelist.js

@@ -1,8 +1,9 @@
 (function () {
-  Discourse.Markdown.whiteListTag('img', 'class', 'img-left');
-  Discourse.Markdown.whiteListTag('img', 'class', 'img-right');
-  Discourse.Markdown.whiteListTag('img', 'class', 'img-center');
-  Discourse.Markdown.whiteListTag('img', 'class', 'img-custom');
-  Discourse.Markdown.whiteListTag('img', 'data-max-height', /\d+\%?$/ );
-  Discourse.Markdown.whiteListTag('img', 'data-max-width', /\d+\%?$/ );
+  Discourse.Markdown.whiteListTag('figure', 'class', 'left-half');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'right-half');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'left-third');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'right-third');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'left-quarter');
+  Discourse.Markdown.whiteListTag('figure', 'class', 'right-quarter');
+  Discourse.Markdown.whiteListTag('figure', 'data-max-width', /\d+\%?$/ );
 })();

assets/javascripts/lib/utilities.js

@@ -0,0 +1,7 @@
+Discourse.Utilities.getUploadMarkdown = function(upload) {
+    if (Discourse.Utilities.isAnImage(upload.original_filename)) {
+      return '<figure><img src="' + upload.url + '" width="' + upload.width + '" height="' + upload.height + '"></figure>';
+    } else {
+      return '<a class="attachment" href="' + upload.url + '">' + upload.original_filename + '</a> (' + I18n.toHumanSize(upload.filesize) + ')';
+    }
+  };

assets/stylesheets/aligned-images.scss

@@ -0,0 +1,74 @@
+$figure-margin: 14px;
+
+.cooked {
+  box-sizing: border-box;
+  @include clearfix;
+}
+
+.cooked *,
+.cooked *:before,
+.cooked *:after {
+  box-sizing: inherit;
+}
+
+.cooked > *:first-child {
+  margin-top: $figure-margin;
+}
+
+.cooked p {
+  padding-right: $figure-margin;
+}
+
+.cooked hr {
+  clear: both;
+}
+
+figure {
+  width: 100%;
+  margin: $figure-margin 0;
+}
+
+.post-menu-area {
+  clear: both;
+}
+
+figure img {
+  width: 100%;
+  height: auto;
+}
+
+.left-half {
+  float: left;
+  width: 50%;
+  padding-right: $figure-margin;
+}
+
+.right-half {
+  float: right;
+  width: 50%;
+  padding-right: $figure-margin;
+}
+
+.left-third {
+  float: left;
+  width: 33.3333%;
+  padding-right: $figure-margin;
+}
+
+.right-third {
+  float: right;
+  width: 33.3333%;
+  padding-right: $figure-margin;
+}
+
+.left-quarter {
+  float: left;
+  width: 25%;
+  padding-right: $figure-margin;
+}
+
+.right-quarter {
+  float: right;
+  width: 25%;
+  padding-right: $figure-margin;
+}

plugin.rb

@@ -3,4 +3,6 @@
 # version: 0.1
 # authors: scossar
 
-register_asset 'javascripts/image-tag-whitelist.js', :server_side
+register_asset 'javascripts/image-tag-whitelist.js', :server_side
+register_asset 'javascripts/lib/utilities.js', :server_side
+register_asset 'stylesheets/aligned-images.scss'