Thumbnails for Templates

[Robb_Barrett]

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?

[Grégoire_Miche2]

Nice one.

-Greg

[Robb_Barrett]

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="http://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;

[Robb_Barrett]

Forgot this part:

ko.applyBindings(new MyViewModel());

[Justin_Cooperm2]

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!