Thumbnails for Templates

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!

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="knockoutjs.com/downloads/knockout-3.2.0.js"></script>

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

                                  <center>

                                   <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>

  </center>

                                      </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 () {

        $.ajax({

            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')) {

                    self.showPreview(false);

                } else {

                    self.showPreview(true);

                }

            }

        });

    };

};

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

Nice one.

-Greg