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?

pastedImage_0.png

5 Comments
Grégoire_Miche2
Level 10

Nice one.

-Greg

Robb_Barrett
Marketo Employee

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

Forgot this part:

ko.applyBindings(new MyViewModel());

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

kh-lschutte
Community Manager
Status changed to: Under review