Dynamic content while using modules but different number of articles per segment

Forum|Forum|4 years ago
March 12, 2021
2 replies
5776 views

Hello!
I'm developing a Marketo 2.0 email template for my client. She requires that all the content be dynamic and that we use the modules. The module we are having trouble with is a single article row. Here is the tricky part, some segments will have 3 articles, some of them will have 4. It is unpredictable what will happen, but she needs the flexibility.
Simply deleting the excess empty module deletes it from all other versions. Clearing the content leaves some graphic elements such as a separator line and empty spacers.
What are my options?
Thanks!

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

SanfordWhiteman

Level 10

Hmm, a tough — but not entirely uncommon — situation. @dave_roberts will have some suggestions.

AFAIK the only way to output absolutely nothing for certain segmentations is to use Velocity (in addition to standard Dynamic Content).

noahananAuthor

Level 2

@sanfordwhiteman

Thank you for your reply. I believe I do indeed need to use Velocity but I have never scripted for email and never learned Velocity.

Is it possible for me to do this on my own? Where would I even start?

I read the documentation and it is a lot, much of it went over my head. I'm willing to try but I need to know if there's any chance of me succeeding.

SanfordWhiteman

Level 10

I believe I do indeed need to use Velocity but I have never scripted for email and never learned Velocity.
Is it possible for me to do this on my own? Where would I even start?

I read the documentation and it is a lot, much of it went over my head. I'm willing to try but I need to know if there's any chance of me succeeding.

My blog posts on Marketo-flavored Velocity techniques are here: https://blog.teknkl.com/tag/velocity (almost all are cross-posted on the Nation Products Blog but are harder to filter there).

However, to be fair, becoming a fluent Velocity developer is far from an overnight thing. Because of its use of Java methods and types, it's an actual programming language, despite being dismissed by some as merely a "scripting" environment.

So if you don't have a coding background already, it's going to take a long time to grok VTL enough to write complex production code. (How long is a long time? Well, depends on how intensively you study/get training. Unfortunately, "real work" gets in the way of immersing yourself in this stuff.)

Dave_Roberts

Level 10

Would you be able to share the code you're working with here so I can load it up in the sandbox and test/review a few things?

I suspect this has something to do with how the modules you are segmenting are setup in the HTML. You may need to include the spacing and dividers as editable elements that could be cleared -or- move the handles for those into the module controls by adding a "padding-top, padding-bottom" string to control the height of the spacing and a "divider on/off" toggle to control the divider display (maybe off would be 0px border and on would be a 1px border).

I've got a few pictures of this in my head, it'd be great to be able to see a few screenshots and maybe get the code for that section so that I can test a few things out on my end. I think this is going to be one of those situations where you'll need to be conscious of the required behavior (segmenting, mixed # of articles per unit) in the design/layout of the email and modules. It might mean reworking the code a little to be sure that the end-user has access to things like the spacing between elements (usually just a padding-bottom on all elements inside a module is sufficient) and border stuff like border-width or even color.

Thanks,
Dave

noahananAuthor

Level 2

Thank you Dave for the thoughtful answer.
I will talk to the team about this, because they specifically asked me to develop it in such a way that the users will only be responsible for the words and the pictures and not touch anything in the layout. They told me not to give them variables for spaces and colors at all.
Ideally, I would like to know if we should use velocity here? I have never scripted for Marketo before but if they give me the green light to try I am a very good student! But I want to know if that can even work here at all.

I can share the code, but I will tell you that it's not finished yet in terms of testing it across the different email clients and for mobile yet, so don't rip me apart ha ha!

This is the specific module code:

<!-- FEATURE LIST START -->
<table class="mktoModule m_feature-list" id="feature-list" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Feature List Row">
  <tbody>
    <tr>
      <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:#ffffff" bgcolor="#ffffff" valign="top">
         <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="815">
           <tbody>
              <tr>
                 <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:20px;font-size:20px" height="20px">&nbsp;</td>
            </tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<center>
<table class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="330">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>


<!--Article image-->
<tr>
<td class="photo" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div class="mktoImg" id="list-img" mktoName="List Image">
<a>
<img style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; display: block; max-width: 100%; line-height: 100%; height: auto; width: 330px;" height="auto" width="330" src="(removed for privacy)">
</a>
</div>
</td>
</tr>
<!--Spacer-->

<!--Spacer-->
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:0x;font-size:0;" height="0">&nbsp;</td>
</tr>

<tr class="stack-tablet" style="padding-left: 0; overflow: hidden; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; float: left; margin-top: 0; margin-right: 0; margin-bottom: 0; mso-hide: all; display: none;">
   <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="stack-smartphone" style="padding-left: 0; overflow: hidden; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; float: left; margin-top: 0; margin-right: 0; margin-bottom: 0; mso-hide: all; display: none;"><td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">&nbsp;</td></tr>
</tbody>
</table>
<table class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="right" border="0" cellpadding="0" cellspacing="0" width="470">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>

<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div class="mktoText" id="feature-list-label" mktoName="Feature List Label">
<h2 class="label feature-list" >Label Text Goes Here</h2>
</div>
</td>
</tr>


<!--Spacer-->
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:12px;font-size:12px;background-color:#ffffff" height="12">&nbsp;</td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; padding-bottom: 0">
<div class="mktoText" id="feature-list-title" mktoName="Feature List Title">
<h2 class="feature-list" >Title Text Goes Here</h2>
</div>
</td>
</tr>
<!--Spacer-->
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:12px;font-size:12px;background-color:#ffffff" height="12">&nbsp;</td>
</tr>

<tr>
<td data-medium-editor-element="true" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;text-align: left;font-family:Arial, sans-serif;font-weight: 400;font-size: 17px;border-collapse: collapse;letter-spacing: 0.02em; margin:0;padding:0;line-height:25px;"><div class="mktoText" id="feature-list-body" mktoName="Feature List Text">
<p class="feature-list" style="margin: 0; padding: 0;" >Article Copy Goes Here</p>
</div></td>
</tr>

<!--Spacer-->
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:20px;font-size:20px;background-color:#ffffff" height="20">&nbsp;</td>
</tr>

<!--CTA-->

<tr style="outline: medium none;">
<td class="cta" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<center>
<table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" align="center" >
<a href="${ctaLinkFeature}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-size: 20px;font-family:Arial, sans-serif;color: #000000;padding-top: 0px;margin-right: 5px;padding-bottom: 2px;margin-left:0px;display: inline-block;border-bottom-width:2px;border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-style: solid;border-left-style: solid;border-bottom-color:#00b7b4;text-decoration: none;font-weight: 700; letter-spacing: 0.02em;margin-top: 0px;margin-bottom: 30px;">${ctaTextFeature}</a> <div style="display: inline; font-size: 20px;"> → </div>
</td>
</tr>
</tbody></table>
</center>
</td>
</tr>
<tr class="stack-tablet" style="padding-left: 0; overflow: hidden; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; float: left; margin-top: 0; margin-right: 0; margin-bottom: 0; mso-hide: all; display: none;"><td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">&nbsp;</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>

<!--horizontal line-->
<tr>
<td><hr noshade="" color="#c2becb" size="1" style="color: #c2becb; margin-top: 0;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- FEATURE LIST END -->

noahananAuthor

Level 2

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded