Email 2.0: Module Thumbnails

Anonymous · ‎09-27-2016

Any way to edit/customize/control the thumbnail created in the modules tab?

One of my modules is a "spacer" module and works great, the only issue i have is it creates a thumbnail with all the modules within the email template that is so big it hides the rest of my modules above or bellow it. I know I can put it on the bottom but it would be much better if i could upload my own thumbnail or even use a description instead of a thumbnails. Any suggestions?

Nicholas_Manojl · ‎09-27-2016

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.

Anonymous · ‎09-28-2016

Do you have any code examples as to how a variable space drawn from user input works?

currently this is the code for my spacer. Using zurb's email framework.

</tr>

</tbody>

</table>

Nicholas_Manojl · ‎09-28-2016

Hey Andy,

Sure - at the top of the code you can declare variables, including numbers.

You can then reference the variable in your code:

...

...

One caveat might be how the code is ultimately inlined or compiled... might alter the amount of places you need to put the variable.

I like the Zurb framework too. Have you seen my thread on it?

Anonymous · ‎10-03-2016

Thank you very much Nicholas. This is a great option to have and am now using!
However the thumbnail of this module is still huge. So not marking it as answered.

As far as your Zurb framework thread, i haven't read it yet. Was able to find it via your profile and will give it a ready in a few.

Thanks again!

Casey_Noland · ‎12-01-2016

I have the same challenge.

We have a module that's a simple horizontal rule type element, although it's achieved through a 1px border element with margins.

Module itself works great but the auto thumbnail is the entire template which makes the module list long/confusing and makes the element itself harder to place as you need to grab the very top of the thumbnail in order to get the 'drop here' to display.

Dave_Roberts · ‎12-05-2016

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

Instead, you could try:

Enter number as text to control height:

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

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!

Anonymous · ‎01-23-2017

Thanks for the response Dave, probably easier to just show the code.

As you can now see, i am doing this on the <td>. Also I dont need any content applied on this since its only a spacer and the vertical spacing works perfectly--so no issues with that. I am only having an issue with marketo rendering the entire layout as the thumbnail for module bellow.

</td>

</tr>

</tbody>

</table>

Email 2.0: Module Thumbnails

Email 2.0: Module Thumbnails

Re: Email 2.0: Module Thumbnails

Re: Email 2.0: Module Thumbnails

Re: Email 2.0: Module Thumbnails

Re: Email 2.0: Module Thumbnails

Re: Email 2.0: Module Thumbnails

Re: Email 2.0: Module Thumbnails

Re: Email 2.0: Module Thumbnails