Hacking tumblr into Becoming a CMS
Well, tumblr can’t be extended like Wordpress to become a very general-purpose CMS, but with a few little hacks at least custom layouts for projects or images are possible.
We are not going to create a Custom Page™ (like bio, contact, etc), since we want to use our tumblr content from the dashboard. Instead we will use tag pages, like /tagged/tagname, which list all posts of a given tag. Normally those will use your blog’s default layout, however we can force it to use a our own layout so that it looks more like a portfolio or a gallery.
The central “hack” is this:
{block:TagPage}
<div id="tag-{Tag}">
{/block:TagPage}
{block:Posts}
<!-- other stuff -->
With this little trick we can wrap a div around all posts. The id of the div depends on the tag, allowing us to create individual layouts.
We have to close the div tag again after the closing block tag:
{/block:Posts}
{block:TagPage}
</div>
{/block:TagPage}
This will be helpful in two ways:
- We can target everything inside with custom CSS
- If CSS is not sufficient for our needs, we can target the content with JavaScript as well, giving us almost unlimited possibilities for the structure and style of the posts.
Ad 1.
We have to prefix all styles accordingly. In this case everything should apply to the projects page.
#tag-project article p .preview {
height: 220px;
background-position: top center;
background-size: cover;
}
Note that these rules only apply if you are at the tag page. That’s the case when the URL looks like this: /tagged/project. You can create an entry in the menu via a tumblr page that redirects to that particular path.
Ad 2.
When CSS is not enough you can do even wilder things using JavaScript. Here I am wrapping every first image of a post in a div (while hiding everything else) and setting the background-image of that div to the source of the image, so that the CSS rules from earlier apply.
$(function() {
$('#tag-project article').each(function() {
$(this).find('p').hide()
var src = $(this).find('img').attr('src')
$(this).find('img').first().hide().wrap('<div class="preview" style="background-image: url(\''+src+'\')"></div>').parents('p').show()
})
})
