Thumbnails for Templates

Thumbnails for Templates

So you have this graphic taking up space on the landing page folder, how about letting us thumbnail the template so we know what we're talking about?


Level 10

Nice one.


Level 10

This code will actually create a thumbnail off of a URL. If they just put this in that place, the thumbnail would be autogenerated for them.

.thumbnail {

    height: 300px !important;

    background: rgb(248,248,248);

    overflow: hidden;

          bottom: 0;

          position: relative;


.link-preview {

    width: 1028px;

    height: 800px;

    border: none;

    pointer-events: none;

    -webkit-transform: scale(0.5);

    -moz-transform: scale(0.5);

    -ms-transform: scale(0.5);

    transform: scale(0.5);

    -webkit-transform-origin: 0 0;

    -moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

<script src=""></script>

<div id="thumbnaildiv" class="thumbnail">


                                   <iframe class="link-preview" data-bind="attr: {target: '_top', src: myURL}" scrolling="no"></iframe>

                                  <a href="{{my.Destination-URL}}" style="position:absolute; top:0; left:0; display:inline-block; width:500px; height:350px; z-index:5;"></a>


                                      </div> <!--thumbnail-->

var MyViewModel = function MyViewModel() {

    var self = this;

    if (checkForDoc("{{my.Destination-URL}}") == true) {

    self.myURL = "";     

    } else {

      self.myURL = '{{my.Destination-URL}}';


    self.showPreview = ko.observable();

    self.initLinkPreview = function () {


            type: "POST",

            url: "/echo/json/",

            data: {

                json: '{"headers":{"x-frame-options":"ALLOW"}}'


            success: function (data) {

                var headers = data.headers;

                if (headers['x-frame-options'] && (headers['x-frame-options'].toUpperCase() == 'DENY' || headers['x-frame-options'].toUpperCase() == 'SAMEORIGIN')) {


                } else {







document.getElementById("thumbnaildiv").innerHTML = document.getElementById("iframe-thumb").innerHTML;

Level 10

Forgot this part:

ko.applyBindings(new MyViewModel());

Level 10

With Q2, we are rolling out an updated Email Experience, including Template Picker and Email Editor. The picker will include live, dynamic thumbnails for templates. We will then be rolling it out to the Template Details page as you have shown. Stay tuned for these changes!

Community Manager
Status changed to: Under review