Dynamic Multi-Page Multi-Column Newsletter Layout with Columnizer

A Columnizer Case Study

Sample Page Layout

I got an interesting email this week, asking about how to use Columnizer to help layout a multipage and multicolumn newsletter. The length of the content would vary from week to week, so the newsletter needed to be grow/shrink to as many pages as necessary. It also needed a custom header and footer for each page.

Here’s the sample page showing the solution in action.

The HTML

How does it work? Let’s take a look at the source, beginning with the HTML:

<div id="page_template">
    <div class="header">
        This is a header
        <hr>
    </div>
    <div class="content"></div>
    <div class="footer">
        <hr>
        Page: This is the footer.
    </div>
</div>
<div id="newsletterContent">Newsletter Content Goes Here</div>

We define the template for what we want each page to look like. For our case, every page will have the exact same header and footer (with the page number shown in the footer), and page content should be split into 2 columns. Beneath our template, we just print out the entire contents of the newsletter that we want columnized.

Columnizing the Content

Our basic algorithm will be:

  1. Copy the page template and append it to the bottom of the <body>
  2. Columnize what’s in #newsletterContent into that last page until it’s full
  3. Put whatever doesn’t fit back into #newsletterContent
  4. Repeat until #newsletterContent is empty

Awesome, so lets see that in real life code:

$(function() {
  // the height of the content, discluding the header/footer
  var content_height = 652;
  // the beginning page number to show in the footer
  var page = 1;
  function buildNewsletter() {
    if ($('#newsletterContent').contents().length & gt; 0) {
      // when we need to add a new page, use a jq object for a template
      // or use a long HTML string, whatever your preference
      $page = $("#page_template").clone().addClass("page").css("display", "block");
      // append the page number to the footer
      $page.find(".footer span").append(page);
      $("body").append($page);
      page++;
      // here is the columnizer magic
      $('#newsletterContent').columnize({
        columns: 2,
        target: ".page:last .content",
        overflow: {
          height: content_height,
          id: "#newsletterContent",
          doneFunc: function() {
            console.log("done with page");
            buildNewsletter();
          }
        }
      });
    }
  }
  buildNewsletter();
});

The Result

Check out the fully columnized and multi-paged newsletter sample, and be sure to check out the Columnizer project page for more samples, documentation, and of course, to download Columnizer!

It’s been really fun over the past few months to see how different people are using Columnizer. If your site uses Columnizer, give me a shout in the comments, I’d love to check it out!