Using Inky (Foundation for Emails) and using custom attributes

Question

I need to add some custom attributes into my compiled Foundation for Emails code:

<div class="row" customAttribute="value" customAttributeName="value" customAttributeId="value">

When I use Inky, I can write code like this:

<row class="xyz" customAttribute="value">

But it is stripped out of the final compilation. Is there a hint I can add to the code so that it is added back into the dist code?

Answer 1

In the latest release of Foundation for Email (2.2) this should be possible.

HTML attributes can now be passed to rows and columns thanks to Brandon Barringer - commit

Referenced from here: http://zurb.com/article/1439/foundation-for-emails-2-2-what-a-ruby-gem

The background to the pull request is explained by Brandon in this discussion with a good example for adding bgcolor attribute.

in node_modules/inky/lib/componentFactory.js, towards the bottom you'll see this:

// <wrapper>
case this.components.wrapper:
 var classes = ['wrapper'];
      if (element.attr('class')) {
   classes = classes.concat(element.attr('class').split(' '));
 }
 return format('<table class="%s" align="center" ><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), inner);

That builds the tables structure when it sees

Adding in some code to also look for the attribute bgcolor="#XXXXXX". If it finds it, it adds the value into the HTML that it outputs. If it does not find a value, it reverts to the default value from the var, which is bgcolor="". You could also put a value in there if you have a default color.

// <wrapper>
case this.components.wrapper:
 var classes = ['wrapper'];
 var bgcolor = ""; // corey add this line
 if (element.attr('class')) {
   classes = classes.concat(element.attr('class').split(' '));
 }
 // corey added the following statement
 if (element.attr('bgcolor')) {
   bgcolor = (element.attr('bgcolor'));
 } // stop new statement

 return format('<table class="%s" align="center" bgcolor="'+bgcolor+'"><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), inner);

The inky markdown can then be written like so:

<wrapper bgcolor="#b9cd98">