Developing a Tumblr Theme, some advice

Photo by

Here we are again on another occasion talking about Tumblr. Being a faithful user of this blogging platform, I already wrote something about it in a previous post: if you recall, I was showing how it's possible to backup all the written posts in one, safe txt file to keep wherever you want, and now I come back to you to bring you this little new theme developed from an original design of html5up.

Where can I see and download this theme?

As always, the project can be found on my github profile. You can also see a preview of the theme. To download, you can either follow the instruction on the repo or click here copy and paste it into your Tumblr blog.

What did you use to develop this theme?

Considering it's 2017, we can improve the development process against the past, so my build runner and package manager of choice are NPM. The goal here was to find something that could squeeze the entire theme into one single page. For those of you unfamiliar with Tumblr theming (here some documentation), you can't rely on any external file (unless you include them from some other URL, but that's convenient only when we're talking of html5shiv and other libs). So I've used CDNs for famous libs, while I've included in the bundle the rest of the code with Inliner. From there, a quick npm "script" in the package.json did the trick:

{
  "scripts": {
    "build": "rm dist/index.html && inliner --noimages --inlinemin --skip-absolute-urls index.html >> dist/index.html"
  },
  "devDependencies": {
    "inliner": "^1.12.1"
  }
}

In the build command, we remove an already existing file created by this command (rm dist/index.html) and we call the "Inliner package" to include the content of every file that we reference in the index.html like JS and CSS files (index.html >> dist/index.html). There are a few options here so to be sure it doesn't mess things up:

  1. --noimages is needed to not let him convert images into base64 elements to include directly into the page
  2. --inlinemin minify the files before it includes them into the dist/index.html file
  3. --skip-absolute-urls it doesn't pull down external files hosted on some server

We can run this script with "npm run build".

But... there is a slight problem

In the template, it's not rare to find HTML conditional commands to include specific stylesheets for compatibility with older browsers, and to my surprise, the tool we have discussed in the previous paragraph doesn't recognize them, leaving them as links. But I'm very glad I can help them some way, so as soon as possible I will make a PR to the project, coding this feature for them and reporting here on the blog how and what did I change.

And for testing the theme live?

This is the only sad problem that I couldn't solve. At the moment, there is no "emulator" for the Tumblr templating system... well, at least no one that works very well. Up to now, the only one that seems good to me (but I still have to give it a try) is this one: tumblargh

I'll keep you updated. Bye and at the next news :)