Email 2.0: Module Thumbnails

Have you hardcoded the pixel dimensions into the spacer?

You could make the spacer a variable that draws on user input, and you could select the default setting to be small enough that it won't blow out the thumbnail view.

Hey Andy,

I've noticed this issue as well - mostly when I've approved a template, then edit that template and made a change to some module, then go back into my email to edit / create with whatever module I just changed (The thumbnail looks like my entire layout). I've noticed that dragging and dropping that module into the canvas and approving/closing the email, then re-opening (Edit Draft) the email will trigger a "refresh" of the module thumbnails. Not sure exactly what's going on here, but my hunch is that it "holds" a thumbnail from the "last known (used)" version of that element (maybe by mktoName or ID or something?) and that deploying that cell into the canvas and approving a draft triggers whatever "last known" element it's referencing to render that thumbnail - and maybe it displays everything b/c it can't find the last version that's "supposed to be there" (the version of the code before you edited the template last).

Also, in the code you posted, I've noticed some erratic behavior in a few different email clients (and occasionally Marketo) when using the <tr> element as an editable area. Again, not exactly sure why, but I've run into this before and that stood out to me. If your goal is to be able to dynamically re-size that vertical space (height:30px > height:___px), you shouldn't need a mktoText element there at all. If you do need to keep it, consider adding that on the <td> level and using a <div> inside your <td> if you need add'l styles / classes for that section. More often than not, I use a <div> inside a <td> to declare a "mktoText" element because I've had less issues with my framework that way.

If you took the mktoText class out, and there were any other pieces of that element you wanted to change (be editable), you could use a similar process as above (to create the ${spacerSize} variable) to create another variable - i.e. ${spacerBgColor}. You might also want to consider using the ${spacerSize} variable in place of your in-line font-size and line-height attributes. This will allow a more robust selection of email clients to render this section at EXACTLY ${spacerSize} px. * Some email clients respect line-height instead of height, and vice-versa... so both agreeing is a benefit you can leverage for vertical spacers b/c the "content" is just empty space, not text (which might look wonky at the same line-height as font-size). *

@Casey-

You might consider using a similar approach for your Horizontal Rule - with a variable to control the top space (above the HR) and one to control the bottom space -or- one to control the top & bottom space [a little less flexible]. If you set the default for the ${spacerSize} to something huge, like 300px, the thumbnail will render that big. If you set it smaller in your template (the default value) it should render as a single-blank line. Otherwise, there might be something going on with your code/framework that's not so much related to the height of that cell.

BONUS:

Because the height is set as a mktoNumber variable, you've got to assign it a "unit" (in this case 'px') which will get shipped along with the actual number to the rendered CSS... i.e. 30 (input) becomes 30px. This is great, usually, but if you wanted to put this into the <tr height="____"> attribute, the 'px' is out of place (that belongs in the style section, i.e. style="height:_____;"). Note that when you use the mktoNumber in a style, you don't need to add the px after the variable. style="height:${spacerSize};" will render as style="height:30px;".

Consider using a mktoText class instead of a mktoNumber class so that you use your variables more dynamically.

Here's the example from above:

<meta class="mktoNumber" id="spacerSize" mktoName="Main Text Font Size" default="12" min="8" max="18" units="px" step="1">

<td class="spacer" height="30" valign="top" style="word-break:break-word;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;vertical-align:top;font-family:'Century Gothic', CenturyGothic, Muli, Verdana, Arial, sans-serif;font-weight:normal;padding:0;margin:0;text-align:left;font-size:14px;line-height:22px;border-collapse:collapse !important"></td>

Instead, you could try:

Enter number as text to control height:

<meta class="mktoText" id="spacerSize" mktoName="vSpacer Height" default="30" mktoModuleScope="true">

Pick from a list (to control user input) to control height:

<meta class="mktoList" id="spacerSize" mktoName="vSpacer Height" values="0,5,10,15,20,25,30">

using either of these other variables types, you could adjust your code as follows:

<td class="spacer" height=" ${spacerSize}" valign="top" style="word-break:break-word;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;vertical-align:top;font-family:'Century Gothic', CenturyGothic, Muli, Verdana, Arial, sans-serif;font-weight:normal;padding:0;margin:0;text-align:left;font-size:${spacerSize}px;line-height:${spacerSize}px;border-collapse:collapse !important"></td>

---

Cheers!