An Introduction to Treesaver

The CS Forum TimesIn my Content Strategy Forum workshop, we created a short, online magazine called The CS Forum TimesThe magazine used Treesaver to quickly layout the articles and images and make them work well on a variety of browsers and devices.  This is an overview of how we built The CS Forum Times and how you can do something similar very quickly and easily.  The before and after files we used are located here for you to download.


To create your own online publication, the simple steps are as follows:

  1. 1) Source your content
  2. 2) Source your art/imagery
  3. 3) Create a new HTML file for each article & paste in the content
  4. 4) Style using an HTML editor
  5. 5) Resize images if necessary & add in image tags
  6. 6) Edit the TOC file & make sure you’ve included each article
  7. 7) Upload to your server



With The CS Forum Times, I chose published articles from well-known speakers and organizers of CS Forum 2011.  Using content that is on the web makes it much easier as converting content from a PDF or Word document into HTML can be a pain.

NOTE: As this is just a short, proof-of-concept tutorial, I am not covering rights management, copyright, asset management, etc.  It is your responsibility to make sure you have the right permissions to reuse and publish material that is not yours or not original.



I was lucky with the articles I found in that most of them already had relevant artwork in the articles.  For a couple of the longer articles, I also added things like company and conference logos as well as headshots.

I wanted to have a cover, but it may or may not be necessary for your title.  I did this simply by creating a few full-page sized images in an image editor using logos and text from the event.



Now here I’ve helped you out by creating a small boilerplate zip file.  Inside the WorkshopBegin folder you’ll find everything you need for a simple Treesaver magazine.  Index.html is a sample cover page.  Page1.html is a sample article page.

The best thing to do is duplicate page1.html for each article you have.  So if you have four articles, copy it three times and rename them so you have page1.html, page2.html, etc. Or use better names that make more sense to you. 

Inside page1.html I’ve added two comment tags that look like this:
Inside those two lines is where you want to paste the content of the article.  What are you actually pasting? Lets say we’re including my last blog post:  I can copy & paste from the browser, starting with “Last week…” and ending with “…excellent places to start.”  Alternately, I can do a “View page source” from my browser to take all the HTML styling with me and save me some time later.  So instead I would be starting with whatever comes after “<div class=”entry-content”>”, which is how WordPress tells you the blog post text is starting.  That would have me copying starting with “<p>Last week I …” and ending with “…</a> are excellent places to start.</p>”



If you copied HTML content including the tags, you may not have to style it.  However it’s more likely that you’ll want to do a bit of styling to create paragraph breaks, make headings stand out, etc.  If you use any HTML editor such as CoffeeCup, BBEdit or something similar, then go ahead and open your new HTML files there and give them some style.  Take it slow at first and check frequently to make sure it’s looking the way you’d expect.

Due to browser security restrictions, the files will appear most accurate if you view Treesaver content running in a local web server.  A free app like XAMPP (works on Windows, OS X, Linux) is easy-to-use and adequate for viewing the files on a local server and checking to make sure they look and work right.



As you may notice if you resize your browser, Treesaver will adjust the image used for your content.  This has some great benefits, including mobile devices will not try to download an enormous image and then resize it and differently sized images don’t have to be of the same thing.

But those benefits do mean that you will need to resize and save your images at a few different sizes.  I’d recommend going for at least two, one for a mobile device (width of 280 or so) and one for a desktop browser (width of 600-ish), but you can create more depending on your style.  For the cover page, as an example, I created three to make sure the full-size image fit well for the viewer.

Any image editor will work fine, you just need to resize the image (keep the proportions intact) and save it with a different name.  I typically add the width to the end of the image file name to keep them straight.  So if my initial image was headshot.jpg, I resize and end up with headshot-280.jpg & headshot-600.jpg.

Editing the image tags can be tricky so be careful.  Each set of resized images must be enclosed in a <figure> tag.   The image tags themselves should have their height & weight attributes set.  So as an example, the two images above might look like this at the end of the html file:

    <img data-sizes=”single” src=”
width=”280″ height=”130″ />
    <img data-sizes=”double” data-src=”headshot-600.jpg”
width=”600″ height=”280″ />

The image tags are to be placed in the corresponding article’s HTML file.



The last thing you need to do before you upload is edit the Table of Contents file.  The TOC file specifies the order of the articles and which ones are included so it’s very important.

For each article to be included, you’ll need a hyperlink to the article with the attribute “itemprop=url”.  A typical article might look like this:

<div class=”keeptogether” itemscope>
<h5 itemprop=”title”><a itemprop=”url” href=”
article1.html“>My First Article</a></h5>

The TOC file can get more complex including things like advertisements, an actual page for the TOC (the one included keeps itself hidden) with titles, bylines & thumbnails, etc.  We’re keeping it as a simple list of article titles here.



Once you have everything ready to go and you’ve checked it out in XAMPP or another local file server, you’re ready to upload everything onto your server.  You’ll need to include everything that was in the .zip file including resources.html, style.css and your edited article and TOC files.  You’ll also need the image files you resized, whether they’re in the same folder or a subfolder.  Upload all of that to your webserver and navigate to it in a browser.  Voila!  Your brand new publication is online and live.



treesaver logoYes, this is a very short overview.  Treesaver is quite powerful in terms of what it can do and I’ve tried to minimize as much complexity as I could to make it a fast tool to get started with. To learn more, check out the discussion on Google Groups and walk through the tutorial on GitHub.  To do more with Treesaver you’ll need to start to understand how the resources.html & style.css files depend on each other to define the layout and customize content further.  There’s a bit about this in the GitHub tutorial, but it takes some time to get your head around it.



I know, I know, cut-and-paste is not a valid tool or method of publishing.  Treesaver is new and still building its community.  I hear there are folks working on plug-ins for a few popular CMSs like Expression Engine, WordPress and Drupal.  Your best bet for the latest news on those is the Google Group.  If you are working in an organization with a custom CMS, your tech team can look at Treesaver to see if it’s an option for them to build a plug-in for it.



If you give it a shot, please be sure to let me know how it goes.  If you get stuck or confused, e-mail me or check the Google Group discussions for more information.  If there are additional pieces that are tricky or could use some more clear instructions, let me know and I’ll do a more in-depth piece on specific sections.  Good luck and publish away.


  1. Thank you for the information and resource files. I have a question, I notice if I want an image to stay in a specific spot I have to put a div inside the figure tag. What I can’t figure out is once I do that the image will only be one column wide. What am I missing? Thanks in advance

  2. Hi Tyus, thanks for your comment. I’m not sure how your grids are laid out, but if you want to send me a link to the code I’d be happy to take a look.

    Exact image placement is almost impossible to do with Treesaver since it can change so much depending on the user’s device dimensions. There is a github ticket open on this here: if you want to stay up-to-date with the progress on this issue.

Comments are closed.