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

[noahanan]

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!

[SanfordWhiteman]

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).

[noahanan]

@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]

---

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.)

[noahanan]

I appreciate your candor. I will read the article anyway, but probably will not attempt. I have a clunky idea in mind already brewing as a last resort, just to use one big old fashioned table and paste in the free text box. Not elegant but it will solve it. 

[Dave_Roberts]

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

[noahanan]

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

[noahanan]

[Dave_Roberts]

Hey Noa, thanks for sharing the code and some previews, and for commenting it to make it easier to read 🙂

Given the requirements that you're working with here, Velocity might be the best route to go down b/c without scripting the actions, Im fairly certain it takes some level of user-input (variables) to adjust the layout for this kind of situation. I'll throw in a good word for Marketo's Email 2.0 editor - compared to other email tools I've used, it's worth getting to know and use rather than "automating around or thru" - which sometimes takes a little (re)organizational thinking to accomplish. 

I found an article that @SanfordWhiteman wrote here: https://nation.marketo.com/t5/Product-Discussions/Velocity-multiple-sessions-remove-session-dynamica... that looks like a similar solution to what you're after to remove a section using Velocity.

I also don't know the first thing about Velocity scripting, I applaud your ambition to dive right in, that's awesome! I had a look around the Marketo docs for some add'l info - here's a link to the Email Scripting page for references: 

https://developers.marketo.com/email-scripting/. ...might be something I could check out a little more myself 😉

[noahanan]

Thanks! I will reply again after trying that article and the Docs!