Articles tagged 'tumblr'

Advanced Tumblr Customization Dec 13 2009

As I hinted in my last post, I wanted to outline a few tips and tricks I used to customize this site pretty heavily when getting it up and running on Tumblr.

The documentation for building custom themes is pretty comprehensive, and covers the majority of things you’d want to do when building a customized site. I won’t rehash it here, needless to say it’s a relatively straightforward templating syntax that doesn’t take too long to get your head around.

One of the things that the current theme syntax does omit is to be able to identify when you are on a private post, or specifically, when you aren’t. Often you’ll want to drop in Disqus or another such script-based commenting system on all posts - except private posts, if like me you are using them as about or contact pages, you don’t really want to invite user comments for them!

The way I tackled this was to have the comments script embedded on all post pages, but to then hide it for specific pages. The easiest way to then choose to hide it on private pages, was to use the post IDs. If you wrap your comment code in a div similar to the below:

<div id="comments_{PostID}" class="comments">

You’ll then end up with something like this on the actual post:

<div id="comments_252690956" class="comments">

This then means that if you know the post IDs for the private posts (or any posts that you don’t want this to show on), then you can use CSS like the following to hide the comment form:

#comments_252690956 { display: none; }

To find the post ID for a private post, you can look at the URL. It will look something like this (this is the URL for my portfolio page):

http://ejdraper.com/private/252690956/tumblr_kthwgddWRp1qap2vc

In this case, the post ID is 252690956.

This isn’t the most ideal solution, as the comments form is still on the page but just not shown, however given the lack of a way to separate private posts from public posts within the Tumblr template syntax, for now this will have to do.

Using the same technique, I accomplished the exact same results with the pagination which I wanted on each public post, but not on private posts:

{block:PreviousPost}
  <a class="pagination pagination_{PostID}" href="{PreviousPost}">
    &#171; Previous post
  </a>
{/block:PreviousPost}

.pagination_252690956 { display: none; }

I used a class here to identify the pagination div, as I actually have two, one for previous post, and one for next post, and so used the same class for both.

Another little trick I had to employ, was to do with my banner image that appears only on the homepage. The syntax for identifying the index page refers to any type of index page, which also runs to both search result pages, and tag result pages. So this means that placing my header image solely within a {block:IndexPage} means it’d also show on both search and tag pages too, which I didn’t want. Seeing as how there is syntax for identifying a search page ({block:SearchPage}) and a tag page ({block:TagPage}), we can use these to specify a class that will cause the banner to be hidden in those circumstances, leaving it showing on the other remaining type of index page, the homepage. The code looks a little something like this:

{block:IndexPage}
  <div id="index"
    {block:SearchPage}class="hidden"{/block:SearchPage}
    {block:TagPage}class="hidden"{/block:TagPage}>
    <a href="/">
      <h1 id="logo">Elliott J Draper, Freelance Developer</h1>
    </a>
    <div id="headings">
      <div id="web">Web and mobile development</div>
      <div id="rails">Ruby on Rails specialist</div>
      <div id="deliver">I always deliver</div>
      <div id="bank">And I won't break the bank</div>
    </div>
    <div class="clear"></div>
  </div>
{/block:IndexPage}

And the CSS is real straightforward:

.hidden { display: none; }

Besides those couple of little tricks to get around some minor limitations in the theme templates, other customization is made relatively simple by the rest of the fairly powerful theme syntax. The only other thing to mention is custom text and images. To enable you to quickly edit certain bits of the theme, such as links or header text, or to upload images, you can use a special bit of syntax. For text:

{text:MyCustomText}

and for images (this puts the URL path to the image into the HTML):

{image:MyCustomImage}

If you then declare these in the head of your document as follows:

<meta name="text:MyCustomText" content="">
<meta name="image:MyCustomImage" content="">

then you’ll see these options now in the “Appearance” tab of the Customize Tumblr view. For images, there will be an upload option to specify the image, and for text you can simply enter the value you want to use. In this way, you can store headings and external links as text, so that you can easily change them, and you can store all images you need for your custom design as custom images which you upload.

Hopefully some of these tips and tweaks will be useful to others customizing sites on Tumblr - I find that on the whole the theming on Tumblr is very straightforward, and a lot of fun. With a bit of thought and planning, it’s simple to create a decent customized site and get it up and running on Tumblr.

Comments

Running a site on Tumblr Nov 28 2009

Following on from my last post, I figured I’d go into a bit more depth about the details of running a site on Tumblr, especially a customized one. You can do some pretty cool things with Tumblr, and especially with custom themes, but for now I’ll be focusing on some of the higher level considerations and settings, and I’ll do a separate post that will go into my experiences of building a custom theme for Tumblr.

When I first started playing with a new site design, and was thinking along the lines of no longer hosting my site on Feather, I did think about writing something quick and simple using Rails to suit just my needs exactly, and hosting it on the rather brilliant Heroku. I got as far as implementing some of the tests and code, before I explored the hosted service route. I was also reading a lot of good stuff about Tumblr, so setup an account and had a play, and was incredibly impressed. I started thinking about how what I had planned for my new site might fit within the constraints of being hosted on Tumblr.

• I wanted a different index page to the rest of the site, so that I could display a bigger banner graphic on the homepage only. This site represents my freelance business, and so I needed to make sure that was obvious from the homepage.
• I needed static pages. I didn’t want people to be able to comment on my about page, or see my contact page in the stream on the homepage whenever I updated it. I needed to link directly to those pages from the header.
• I wanted to be able to easily edit those static pages like the rest of the blog content on the site.
• I wanted to implement an easy-to-use drop in widget for comments on posts, and for the contact form.
• I needed to host the site on a custom domain (ejdraper.com), and I wanted it to redirect from www.ejdraper.com to ejdraper.com.
• I wanted to be able to easily make changes and tweaks to the layout, and to update links on the site without too much effort.

These were the most pressing initial concerns, and certainly the static pages were my first sticking point that I felt could mean that I simply couldn’t use Tumblr in the way I wanted. Then I found private posts.

Private posts are kept separate from the overall stream, and can only be found if you know the URL. Perfect for linking to them only from the places I want to link to them. They were still posts however, which meant that I could also easily edit the content if I wanted to as I would with any other type of post. This means I can run the about, contact and portfolio pages as private posts, and easily edit and tweak the content if I need to, without them showing up in the main stream of the blog.

If I want to build a new, radically different portfolio page too, I can create a brand new private post for it, build it out, and simply update the links to it when I was done, before I finally remove the old post. Tumblr works great as a CMS in this way, when you can effectively treat private posts as their own little pages.

Showing the banner graphic only on the homepage, and not on all other pages (permalink pages, tag pages, search results page) was a bit more complicated, and I’ll write more about that when I discuss custom themes. Likewise making sure that the comments aren’t shown on the about, contact and portfolio pages.

The comments use Disqus which is rigged up directly in the custom theme. For the contact form I’m using Wufoo, and I am able to drop in the required Javascript to hook that up directly into the private post to insert the form. This level of customization also means I can hook up all sorts of other external services very easily later on if I want to.

The custom domain is really easy to setup - you simply give Tumblr the domain you would like to use for the site, and then use their instructions to point the DNS for that domain to the right IP address. That’s it - once the DNS resolves your domain will start showing your Tumblr site, your username.tumblr.com address will start redirecting to your domain, and I noticed that it even auto redirects www.yourdomain.com to yourdomain.com if you’ve set the custom domain to just yourdomain.com, and vice versa if you set it to www.yourdomain.com (you’ll need to point both www.yourdomain.com and yourdomain.com to the Tumblr IP address for this to work).

Customizing the title and description of the site is simple enough, and you can then use those values in your custom theme. You can also expose other values from the theme which can be configured through a basic form, so that you don’t have to directly tweak the HTML of your custom theme to change links, text or whatever else you might want to change occasionally. We’ll cover this in more detail, and just how useful it is, in my post on theme building.

On top of all of these great customization features, you can also rig up your Tumblr account to post to Twitter and Facebook when you publish a new post, helping you further promote your content. There are options to ping Technorati and other popular blog directories, and also to promote your site on Tumblr itself. As well as all of that, you can also have Tumblr import posts and content from a number of different sources, such as RSS feeds, Twitter and Delicious, amongst others.

The only potential downside for people looking to move existing content to a new Tumblr site, is that while the API makes it incredibly easy to import posts, there isn’t a way to setup redirects from existing post permalinks to the new Tumblr URLs each post will now have. I bit the bullet and moved all of my old content over which has probably broken some older links to posts on the old permalinks, but if you are switching your domain over and have some really popular older posts that you can’t afford to have no longer working on existing permalinks, then that might be a deal breaker.

That aside, if that’s not an issue for you and you are able to move existing content over like I did, or if you are starting a fresh site, then Tumblr is seriously worth considering, even if you have extensive customization requirements for your site. I’ll discuss in more technical detail building out a Tumblr custom theme next time, if anyone has any questions about setting up a customized site on Tumblr though, please do leave a comment or drop me an e-mail.

Comments

Page 1 of 1 |