Use foundation for email with thymleaf

Question

I have a inky foundation template. Here is the neccessary snippet:

<button class="large expand" href="#">Activate account</button>

I need to replace the 'href' attribute with a 'th:href' attribute, but when I do this foundation builds a html page without the th:href tag.

I'm looking for a way to change the href-link with thymleaf.

Note: I'm using the foundation-email stack.

Answer 1

You can teach Inky how to handle custom attributes, in this case one called th:href.

In your node-modules folder open inky/lib/componentFactory.js . Look for the button component and you'll find something like this:

    // <button>
case this.components.button:
  var expander = '';

  // Prepare optional target attribute for the <a> element
  var target = '';
  if (element.attr('target')) {
    target = ' target=' + element.attr('target');
  }

  // If we have the href attribute we can create an anchor for the inner of the button;
  if (element.attr('href')) {
    inner = format('<a href="%s"%s>%s</a>', element.attr('href'), target, inner);
  }


  // If the button is expanded, it needs a <center> tag around the content
  if (element.hasClass('expand') || element.hasClass('expanded')) {
    inner = format('<center>%s</center>', inner);
    expander = '\n<td class="expander"></td>';
  }

  // The .button class is always there, along with any others on the <button> element
  var classes = ['button'];
  if (element.attr('class')) {
    classes = classes.concat(element.attr('class').split(' '));
  }

  return format('<table class="%s"><tr><td><table><tr><td>%s</td></tr></table></td>%s</tr></table>', classes.join(' '), inner, expander);

Add the following block of code:

      // If we have the th:href attribute we can create an anchor for the inner of the button;
  if (element.attr('th:href')) {
    inner = format('<a th:href="%s"%s>%s</a>', element.attr('th:href'), target, inner);
  }

Hope it works!