Add template thumbnail generation and display

assets/css/src/box.styl

@@ -18,6 +18,17 @@
   height: 150px
   margin-right: 15px
   float: left
+  overflow: hidden
+
+  img
+    min-width: 150px
+    min-height: 150px
+    height: 100%
+    width: auto
+    position: relative
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
 
 .mailpoet_boxes .mailpoet_description
   float:left

assets/js/src/newsletter_editor/components/save.js

@@ -6,8 +6,9 @@ define([
     'backbone.marionette',
     'jquery',
     'blob',
-    'filesaver'
+    'filesaver',
-  ], function(App, MailPoet, Notice, Backbone, Marionette, jQuery, Blob, FileSaver) {
+    'html2canvas'
+  ], function(App, MailPoet, Notice, Backbone, Marionette, jQuery, Blob, FileSaver, html2canvas) {
 
   "use strict";
 
@@ -56,8 +57,17 @@ define([
     });
   };
 
+  Module.getThumbnail = function(element, options) {
+    return html2canvas(element, options || {});
+  };
+
   Module.exportTemplate = function(options) {
+    var that = this;
+    return Module.getThumbnail(
+      jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
+    ).then(function(thumbnail) {
       var data = _.extend(options || {}, {
+        thumbnail: thumbnail.toDataURL(),
         body: App.getBody(),
       });
       var blob = new Blob(
@@ -66,6 +76,7 @@ define([
       );
 
       FileSaver.saveAs(blob, 'template.json');
+    });
   };
 
   Module.SaveView = Marionette.LayoutView.extend({

assets/js/src/newsletter_editor/components/wordpress.js

@@ -56,7 +56,7 @@ define([
   };
 
   Module.getTransformedPosts = function(options) {
-    return Module._query({
+    return Module._cachedQuery({
       action: 'getTransformedPosts',
       options: options,
     });

assets/js/src/newsletters/templates.jsx

@@ -164,11 +164,19 @@ define(
                 Delete
               </a>
             </div>
+          ), thumbnail = '';
+
+          if (typeof template.thumbnail === 'string'
+              && template.thumbnail.length > 0) {
+            thumbnail = (
+              <img src={ template.thumbnail } />
             );
+          }
 
           return (
             <li key={ 'template-'+index }>
               <div className="mailpoet_thumbnail">
+                { thumbnail }
               </div>
 
               <div className="mailpoet_description">

lib/Config/Migrator.php

@@ -97,6 +97,7 @@ class Migrator {
       'name varchar(250) NOT NULL,',
       'description varchar(250) NOT NULL,',
       'body longtext,',
+      'thumbnail longtext,',
       'created_at TIMESTAMP NOT NULL DEFAULT 0,',
       'updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,',
       'PRIMARY KEY  (id)'

webpack.config.js

@@ -29,7 +29,8 @@ baseConfig = {
       'blob$': 'blob/Blob.js',
       'filesaver$': 'filesaver/FileSaver.js',
       'papaparse': 'papaparse/papaparse.min.js',
-      'helpscout': 'helpscout.js'
+      'helpscout': 'helpscout.js',
+      'html2canvas': 'html2canvas/dist/html2canvas.js'
     },
   },
   node: {
@@ -73,6 +74,10 @@ baseConfig = {
         include: /helpscout.js$/,
         loader: 'exports-loader?window.HS',
       },
+      {
+        include: /html2canvas.js$/,
+        loader: 'expose-loader?html2canvas',
+      },
     ]
   }
 };