tumblr Stack

tumblr Stack

This is the first of a set of Stacks to be released in the near future. tumblr Stack is for all RapidWeaver fans not satisfied with managing blogs inside RapidWeaver, the only way right now supported by RapidWeaver out-of-the-box.

tumblr Stack allows you to setup a blog on tumblr.com for free, manage it online via tumblr.com or even an iPhone app and finally pull the blog content from your tumblr blog and render it through your website based on your website theme used in RapidWeaver.

The cool thing about this, tumblr Stack doesn't require PHP or any other scripting language on your hosting environment. It basically uses Javascript only.

Disclaimer: As tumblr Stack is using the tumblr API for retrieving any blog content, your blog might be not accessible during API maintenance. This is an tumblr issue and not caused by the tumblr Stack

1. Main features


  • Quickstart using clever default settings
  • Flexible setup & configuration using Stacks HUD editor and Stack config editor
  • Post type icons that that can be selected from three sets and can be configured using different colors and border radius
  • Page navigator & custom number of posts per page
  • Custom text messages supporting different languages
  • Tweet this button support
  • Powerful comments system using Disqus

2. Example


Check out my blog on designdisorder.com which is actually based on designdisorder.tumblr.com

3. Download


tumblr Stack.dmg

Version 2.6 - 6/05/2011
Two releases on the same day :) Just fixed an issue with MP4 videos not playing correctly due to the fact that the tumblr specific player code was not included. It is now :)

Version 2.5 - 6/05/2011
This is a minor bug fix that focuses on the way photo posts are rendered in the blog. So far the tumblr Stack didn't consider a click-through url if it was present. This release changes this behavior: when there is a link-through url available, clicking on the photo opens the respective url, if not, a larger version of the photo gets displayed.

Version 2.4 - 5/22/2011
This release fixes a couple of minor (?) issues that have been present since day one.
  • video posts will no longer show 3 videos instead of one
  • using the tweet button the user now has to actually enter a tweet for posts of type quote, photo, video and audio
  • the stack is no longer using a default value for the tag filter which caused a lot of empty blogs - sorry for that

Version 2.3 - 4/3/2011
You can now edit a blog post directly by clicking the Edit button, which opens the tumblr editor and brings you right back to where you came from after being done. Pls keep in mind: you have to update the stack settings as we introduced a new parameter in the settings page. Sorry about that, but there is no way to avoid this ...

Version 2.2 - 3/27/2011
tumblr Stack got a new option that allows for preview posts on the blog page. You can cut down your posts to 1-1000 characters or still show the full posts (using 0) like in previous versions

Version 2.1 - 1/2/2011
Redesign of the settings code. Resembles the look & feel of the standard configuration HUD

Version 2.0.2 - 10/3/2010
Weird quote bug: i mixed up the actual quote and source from tumblr.
I also fixed another bug re. quotes when used with the twitter button.

Version 2.0.1 - 9/13/2010
Tag display bug fixed

Version 2.0 - 9/12/2010
Initial public release

Version 1.0 - 1/10/2010
Internal release

4. Installation


The installation of new Stacks is pretty straight forward. Just mount the downloaded Stack (which is usually done by the Mac already) and double click the Stack bundle inside the disk image.

5. How to get started?


tumblr Stack is useable right by pulling it off the toolbar into your Stacks page. It has some reasonable defaults that make it work immediately. Here are the setup steps ...

  • As a start, setup your own blog at tumblr.com
  • Pull the tumblr Stack onto the new blog page in RapidWeaver
  • Open the HUD by clicking on the Info button on the new stack
  • Use the name of your tumblr blog as the Blog ID
Those are the minimum required settings to get you going. Now go to preview and test your first tumblr Stack

6. Support


All of my Stacks are provided as is. In other words I am not providing any professional level support for those Stacks. Nevertheless, feel free to contact me in case you have any questions or feature requests. Depending on my available time I will get back to you ...

7. Detailed Configuration


In order to tweak your new Stack a little more, there are several more detailed settings and configurations that can change the behavior as well as the look of your Stack.

The complete stack settings are actually split into two different sections: the HUD (head-up display) settings and the extended config that is actually shown and modified within the Stack editor.
The tumblr Stack HUD contains the following settings:

Blog ID (default: designdisorder)
Your tumblr blog name that has selected by you while setting up your tumblr blog. Your Blog ID is typically part of your blog URL
Example: designdisorder as in http://designdisorder.tumblr.com

Post/Page (default: 5)
This setting determines how many posts will be shown per page. If the number of blog posts exceed this value, tumblr Stack displays a page navigator at the bottom of the blog which allows you to move back and forth.

Preview Size (default: 200)
Want to have just a preview of your post on the blog overview? Then use this setting to cut down the post size. If you want to see the full article on the blog overview, use 0 as the preview size.

Show Post Icons (default: false)
As tumblr supports different type of blog posts, tumblr Stacks renders posts differently depending on its type. In addition to that, you can attach an type specific icon with each blog posts which allows your reader to immediately identify the respective post type. the following post types are supported: text, link, quote, chat, photo, video, audio.

Icon Radius (default: 25)
You can adjust the border radius of the post type icon between 0 and 25 px, which renders as a square or a perfect circle. Check out different values to find the most appropriate setting for your site.

Post Type Icon Colors
This is a set of 7 color choosers that can be used to color each post type icon individually.

Beside those stack specific settings, all standard Stacks settings are supported in the HUD. Using Stacks version >1.3 you can easily get access to this help page by clicking on the ? button.

In addition to the settings that can be accessed via the standard Stacks HUD, there are a couple of more specific settings that will be edited right in the Stacks editor. I tried to make the settings editor look very similar to the standard HUD. I decided for this rather unconventional approach due to the fact that Stacks currently supports only 12-15 settings in the HUD display, depending on your screen size. I hope you like it ...

Show Header (default: false)
By default, the tumblr blog title and slogan will not be displayed using the tumblr Stack. Nevertheless, you can always change that by changing this setting to true.

Icon Set (default: white)
Right now tumblr Stack supports 3 different post type icon sets that differ in terms of their color. Depending on your website theme, choose between white, black and grey. Keep in mind that you can always change the background color of those icons as well using the Stacks HUD.

Filter by Tag (default: -)
Use a specific tag in order to filter for posts that are tagged with this tag. This way you can have one source blog at tumbler that can be rendered differently depending on the used tag.

Various localization strings
The next set of config settings are all used to customize any text being generated by the tumblr Stack. Either you don't like my default texts or you simply wanna change the locale of the messages to match your sites locale. This is all possible by simply changing the default texts to your requirements.

"Powered by" Footer (true)
Generate a Powered by tumblr footer

Twitter account (default: )
This is used to as the via twitter account used by the tweet this button.

disqus_ID (default: )
Use your disqus shortname here that you have selected while registering for disqus.

disqus Devel Mode (fault: false)
While developing your website on your local environment, disqus is obviously not able to access this environment from outside. In order to test the functionality even in local development mode set this setting to true. Remember to switch disqus_develmode back to false before deploying your website onto your production environment
This concludes the settings for the tumblr Stack.