Creating a CMS with Tumblr
It’s not just for GIFs anymore
Yes, believe it or not, Tumblr can be the backbone of a serious blog. You may not have noticed because it’s super easy to hide their branding and use a custom domain. Keep reading to see why Tumblr should be in your arsenal.
The Project
For my first big project at StyleSeat back in 2014, I was given the task of creating a community section comprised of three pages — testimonials, press, and videos. These pages were to be easily manageable by our Marketing team without any ongoing dev effort. Plus, they had to reflect our new brand and be responsive across all devices. In this post, I’ll skip over all the design details and instead discuss the implementation of a dynamic Tumblr theme for content management.
Why I Chose Tumblr
It’s great for developers because the Tumblr API and Developer Guide make it easy to customize your page in any way. You don’t need to deal with deleting Wordpress categories from your layout, comment spam, ongoing software/plugin updates, sprawling theme code, or the inherent security problems that plague PHP-based blogging software, a relic of the old internet.
From the blogger’s point of view, Tumblr’s interface is very simple and easy to navigate. Plus, many marketing teams already use Tumblr for blogging, so the switching cost is zero. There is also the benefit of Tumblr’s community, meaning that content can be discovered by hash tag, reblogged, commented on, and liked.
Tumblr is definitely the underdog in the CMS arena, but it can easily be hacked to provide just as much customizability as Wordpress, if not more.
How to think about Tumblr
Tumblr is a home for content. In addition to pages (like WordPress), there are also 7 different post formats. Each has unique form fields that can be formatted differently within your theme.
By default, the Tumblr index page shows all blog posts in chronological order. For the Press page, however, I needed to figure out a way to feature certain content higher up on the page.
Content Arrangement
The solution was to utilize hash tags. So long as a post has a hash tag, you can link to a static page with all posts of that tag, much like a category in WordPress. When you want to display these posts in a dynamic page, like the “Featured Press” box in the mockup below, simply utilize the Tumblr API to get raw JSON data.
Pulling posts by hash tag
If a post has hash tag #featured, it will be shown in the “Featured Press” section using the following code:
$.ajax({
type: 'GET',
url: 'http://api.tumblr.com/v2/blog/styleseatpress.tumblr.com/posts?api_key={API-KEY}&tag=featured&limit=2',
data: {get_param: 'value'},
dataType: 'jsonp',
success: function (data) {
for (i = 0; i <= 19; i++) {
console.log(data.response.posts[i]);
if (data.response.posts[i]) {
$('#results').append('<div class="featured-post">' + data.response.posts[i].description + '<a href="' + data.response.posts[i].url + '">Read More</a></div>');
}
}
}
});What this does is pull posts from this blog (styleseatpress.tumblr.com) with hash tag of featured, with a limit of 2 posts. Since each post is a link post, there is a description and a URL field.
Styling featured posts
Link posts are generated like this:
<img src="{Logo URL}" />
<blockquote>
{Most quoteworthy paragraph in the article}
</blockquote>I wanted to show quotation marks around the blockquote in the featured section only. In the CSS, I added the following lines:
#results blockquote:before {
content:"\201C";
} #results blockquote:after {
content:"\201D";
}
This way, the blockquotes are omitted from the “Recent Mentions” section at the bottom of the page.
Pulling data for press releases
I used a similar AJAX request for the hashtag #pr, with the addition of a few more data types.
if (data.response.posts[i]) {
var date = data.response.posts[i].date;
$('#press-releases').append('<div class="pr"><a href="' + data.response.posts[i].url + '">’ + data.response.posts[i].title + '</a><br /><span class="small-date">' + moment(date).format("MMM D, YYYY") + '| </span><a href="' + data.response.posts[i].url + '" class="small-link">' + data.response.posts[i].description + '</a></div>');
}This shows the title of the link, properly formatted date, and a link to the publication.
The publication link was tricky, since the API only returned a domain value like prnewswire.com. In order to show the name, I asked content creators to include the following line of code in each PR post:
<p>{Name of publication}</p>This tag only shows up in the PR section. All other tags (img, blockquote) are hidden so that the name of publication can make a nice clean link.
Styling Tricks
Vertically Aligning Images
I didn’t want the content manager to have to resize photos. Ideally, I wanted them to search Google Images, save a logo, and post it without thinking twice. Therefore, it was important for the code to do the heavy lifting when resizing & centering logo images.
How the f*$& do you vertically align images of varying heights and widths??
The following code is one of my favorite hacks ever because it works. No matter the width or height of the image, the flex display and translateY ensure that it will fill the container and be perfectly centered.
.side-thumb img {
width:100%;
margin:0 auto;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
position:relative;
margin-top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
background-color:#fff;
padding:2rem;
}Simply tweak the parent div (.side-thumb) to give the image the proper dimensions and padding.
What if there is no image?
Of course, I realized that sometimes a logo may not be available. In that case, I made sure to create a fallback case.
In the Tumblr theme, I added this section to each post:
<div class="host">
{block:Host}
<a href="{URL}" target="blank">
{Host}
</a>
{/block:Host}
</div>{Host} generates the hostname of each link pasted in the post body. For example, a link to a fortune.com article will generate the hostname in two places:
- The white box on the left
- The blue link next to the date
To make sure that a logo image is always shown above this fallback text, I employed some z-index styling:
.host {
display:block;
visibility:visible;
position:absolute;
margin:0 auto;
width:175px;
height:175px;
z-index:-1;
line-height:175px;
text-align:center
}The line-height trick is a simple way to vertically center a single line of text in a container with fixed height.
Keep it Simple
Make your code do the heavy lifting. If you can’t find any other way to solve something, that’s when you ask the person running the blog to add some minimal HTML code.
Use tools that are familiar to edit placement on the page. For example, using hash tags serves a dual purpose of content discovery on Tumblr’s platform and categorizing posts on your blog.
Utilize the meta description in the theme content so it’s easy for content managers to edit.
You can also add custom fields to the theme editor for background images, fonts, and any other customizable variable you please. That way, they can be edited with no knowledge of HTML whatsoever!
Remember, you’re building something sustainable that can be used without asking you for help. So make your code do the heavy lifting.
Refer to the developer guide and make cool stuff!
