Basic Posts markup in Tumblr

Tumblr dashboard post options

There are a number of different post types that users can create in Tumblr, these are namely:

  1. Text
  2. Photo
  3. Photoset (accessed from the photo button, when more than one photo is added)
  4. Quote
  5. Link
  6. Chat
  7. Audio
  8. Video
  9. Answer (available in response to an ‘ask' from another Tumblr user)

The Tumblr theme system only requires developers to create one HTML document. This HTML document includes all the markup to render all the nine different post types.

At the most basic level our markup for the posts looks like this:

{block:Posts}
<article>
{block:Text}
…
{/block:Text}
{block:Photo}
…
{/block:Photo}
{block:Photoset}
…
{/block:Photoset}
{block:Quote}
…
{/block:Quote}
{block:Link}
…
{/block:Link}
{block:Chat}
…
{/block:Chat}
{block:Audio}
…
{/block:Audio}
{block:Video}
…
{/block:Video}
{block:Answer}
…
{/block:Answer}
</div>  

<footer class="metadata">

</footer>
 </article>
{/block:Posts}

This means for each post we are using the same footer, with the post-specific code rendered in their own section, with {block:post type} as the basic format.

Each post type will be held in a div with a relevant CSS class. The opening <div> tag will be rendered in the post-specific code section, whilst the closing </div> tag will be rendered iteratively for each post using {block:Posts}. For example:

{block:Text}
<div class="text inner">
<!--Code for text here-->
{/block:Text}
</div>

This section will work towards updating our example theme. At the end of this section you should have, and understand, the following code:

<!DOCTYPE html>
<html>
<head>
{block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description}
<title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>

<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}"/>
<link rel="stylesheet" href="http://static.tumblr.com/hznqxps/ivOmgjf8v/normalize.css" />

<style>

</style>

</head>

<body>
<header id="masthead">
    <img src="{PortraitURL-128}"/>
    <h1><a href="/" title="{lang:Home}">{Title}</a></h1>
</header>

<aside id="sidebar">
	<div class="item">
		<h2>Sidebar item</h2>
		<p>We'll add HTML to our sidebar later.</p>
	</div>
</aside>
 
<div id="content">
	{block:Posts}
	<article>
		{block:Text}
		<div class="text inner">
			{block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
			{Body}
		{/block:Text}

		{block:Photo}
		<div class="photo inner">
			{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
			{block:Caption}{Caption}{/block:Caption}
		{/block:Photo}

		{block:Photoset}
		<div class="photoset inner">
			{Photoset-700}
			{block:Caption}{Caption}{/block:Caption}
		{/block:Photoset}

		{block:Quote}
		<div class="quote inner">
			<blockquote>{Quote}</blockquote>
			{block:Source}<cite> {Source} </cite>{/block:Source}
		{/block:Quote}

		{block:Link}
		<div class="link inner">
			<h1 class="title"><a href="{URL}">{Name}</a></h1>
			{block:Description}{Description}{/block:Description}
		{/block:Link}

		{block:Chat}
		<div class="chat inner">
			<ul>
				{block:Lines}<li class="{Alt}"><p>{block:Label}<strong>{Label}</strong>{/block:Label} {Line} </p></li>{/block:Lines}
			</ul>
		{/block:Chat}

		{block:Audio}
		<div class="audio inner">
			{block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
			{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}
			{AudioPlayerBlack}
			{block:Caption}{Caption}{/block:Caption}
		{/block:Audio}

		{block:Video}
		<div class="video inner">
			{Video-700}
			{block:Caption}{Caption}{/block:Caption}
		{/block:Video}

		{block:Answer}
		<div class="answer inner">
			<h1 class="title">{Question}</h1>
			<div class="user"><img src="{AskerPortraitURL-96}"/><p>{Asker}</p></div>
			{Answer}
		{/block:Answer}
		</div>

		{block:Date}
		<footer class="metadata">
			<ul class="index">
				<li><a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a></li>

				{block:NoteCount}<li><a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}
				
				{block:ContentSource}
				<li><a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
				{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></li>
				{/block:ContentSource} 
			</ul>

			{block:PermalinkPage}
			{block:HasTags}
			<ul class="tags">
				{block:Tags}<li><a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
			</ul>
			{/block:HasTags}
			
			{block:PostNotes}
			<div id="notes">
				{PostNotes}
			</div>
			{/block:PostNotes} 
			{/block:PermalinkPage} 
		</footer>
		{/block:Date}
	 </article>
	{/block:Posts}
	{block:Pagination}
	<nav id="pagination">
		<ul>
			{block:NextPage}<li><a href="{NextPage}">Next page</a></li>{/block:NextPage}
			{block:PreviousPage}<li><a href="{PreviousPage}">Previous page</a></li>{/block:PreviousPage}
		</ul>
	</nav>
	{/block:Pagination}
</div>
</body>
</html>

For each post type I have included some recommended HTML markup and, where necessary, a brief explanation.

A complete list of all variables and blocks - with explanations - are found in the Tumblr theme documentation.

Text

Text post in dashboard

{block:Text}
<div class="text inner">
	{block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
	{Body}
{/block:Text}

Titles in text posts are optional, so must be wrapped with {block: Title}.

The title is linked to the permalink. A permalink points to the exact URL of a blog post, so readers can view and access a single blog post.

Later we will be styling the headings, so a class of title has been included on all major titles in posts.

{Body} is simply the content the user has added in the post section.

Photo

Upload a photo from the dashboard

Camera information

Information about the photo’s camera was introduced to Tumblr themes in 2011, and simply fetches Exif data from the photo.

We won’t be using this code in our example theme, but if you want to display the Exif data, create an unordered list with following the blocks and variables:

{block:Exif}
<ul class="exif">
<li>{block:Camera}Camera: {Camera}{/block:Camera}</li>
<li>{block:Aperture}Aperture: {Aperture}{/block:Aperture}</li>
<li>{block:Exposure}Exposure: {Exposure}{/block:Exposure}</li>
<li>{block:FocalLength}Focal Length: {FocalLength}{/block:FocalLength}</li>
</ul>{/block:Exif}

Displaying a photo

{block:Photo}
<div class="photo inner">
	{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
	{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

{LinkOpenTag} inserts <a href="http://www.example.com/"> whilst {LinkCloseTag} inserts </a>. In effect, it is the same HTML used for creating a link.

The URL will point to the click-through URL which users have set for the photo. This variable is one of the few that will also render conditionally.

{PhotoURL-HighRes} links to the web address of the photo with a maximum width of a 1280px wide image where possible (if this is not possible, then the next largest size is provided). The Tumblr server can also provide images in 500, 400, 250, 100px wide or square (75px by 75px).

Only the provided sizes can be used, anything over or below the numbers provided will not load, since there is no such copy on the Tumblr server.

Note how the caption is optional, and so had to be included in {block:Caption}.

Photoset

Adding multiple photos in dashboard

Creating a photoset is triggered when users have uploaded more than one photo in a ‘photo’ post.

{block:Photoset}
<div class="photoset inner">
	{Photoset-700}
	{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

The {Photoset-700} can also be 500, 400 or 250 in width.

Tumblr automatically applies CSS and JavaScript to the photoset to manage the layout of multiple images into rows and columns.

Quote

Quote with source in dashboard

{block:Quote}
<div class="quote inner">
	<blockquote>{Quote}</blockquote>
	{block:Source}<cite> {Source} </cite>{/block:Source}
{/block:Quote}

Link

Creating links with title and URL in dashboard

{block:Link}
<div class="link inner">
	<h1 class="title"><a href="{URL}">{Name}</a></h1>
	{block:Description}{Description}{/block:Description}
{/block:Link}

Chat

Chat post with title and dialogue in dashboard

{block:Chat}
<div class="chat inner">
	<ul>
		{block:Lines}<li class="{Alt}"><p>{block:Label}<strong>{Label}</strong>{/block:Label} {Line} </p></li>{/block:Lines}
	</ul>
{/block:Chat}

{block:Lines} is the code looped through for each line of the post. In this example, we’re creating a list item for each line of dialogue.

{Label} is the name of the speakers, Tumblr will automatically parse this from the post, and {Line} is the text automatically identified as the dialogue.

{Alt} will set the class of the line to “odd” or “even”, which is helpful for adding zebra striping, applying a shade for alternate rows (see below), with CSS.

Audio

Uploading audio in the dashboard

{block:Audio}
<div class="audio inner">
	{block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
	{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}
	{AudioPlayerBlack}
	{block:Caption}{Caption}{/block:Caption}
{/block:Audio}

Tumblr is able to get data from the audio file’s ID3 tag which contains information about the audio, much like the implementation of Exif data. Currently Tumblr supports these ID3 tags:

  • {block:AlbumArt}{AlbumArtURL}{/block:AlbumArt}
  • {block:Artist}{Artist}{/block:Artist}
  • {block:Album}{Album}{/block:Album}
  • {block:TrackName}{TrackName}{/block:TrackName}

This is useful when displaying information unique to a track. In the sample code, the title of the track ({TrackName}) will link to the post’s permalink. Additionally, we will display the album art, if available, for each song.

The audio player also can be changed by editing the color name in {AudioPlayerBlack}, other colors are “gray” and “white”.

Video

Embed or upload video in dashboard

{block:Video}
<div class="video inner">
	{Video-700}
	{block:Caption}{Caption}{/block:Caption}
{/block:Video}

Video posts are one of the most simplest post types to implement. Just use {Video-700}, the other widths are 500, 400 or 250, and Tumblr will take care of the rest.

Answer

Answering a message/ask

{block:Answer}
<div class="answer inner">
	<h1 class="title">{Question}</h1>
	<div class="user"><img src="{AskerPortraitURL-96}"/><p>{Asker}</p></div>
	{Answer}
{/block:Answer}

In this code, we are displaying the question as the title then creating a div to hold information about the asker.

{AskerPortraitURL-96}, also available as 16, 24, 30, 40, 48, 64 for the width of the asker’s portrait, is the avatar of the user. {Asker} is simply the name of the user.

In all cases if the asker is anonymous, a default image will be provided by Tumblr and the asker’s name will be shown as “anonymous”.

Adding a post footer

Adding a footer (or header) to posts is a useful way to integrate information about posts into a theme.

In the footer, we’ll display metadata about the post including:

  • Date the post was published on
  • The number of notes (likes and reblogs) a post has received
  • Source of the post
  • Tags
  • List of notes
{block:Date}
<footer class="metadata">
	<ul class="index">
		<li><a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a></li>

		{block:NoteCount}<li><a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}
		
		{block:ContentSource}
		<li><a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
		{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></li>
		{/block:ContentSource} 
	</ul>

	{block:PermalinkPage}
	{block:HasTags}
	<ul class="tags">
		{block:Tags}<li><a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
	</ul>
	{/block:HasTags}
	
	{block:PostNotes}
	<div id="notes">
		{PostNotes}
	</div>
	{/block:PostNotes} 
	{/block:PermalinkPage} 
</footer>
{/block:Date}

Footer metadata on the permalink and index pages

<ul class="index">
		<li><a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a></li>

		{block:NoteCount}<li><a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}
		
		{block:ContentSource}
		<li><a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
		{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></li>
		{/block:ContentSource} 
	</ul>

On our blog’s frontpage we’re going to only show the essential information about the post in an unordered list (we’ll style this later with CSS).

<li><a href="{Permalink}"> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </a></li>

This uses the variables {DayOfMonth}, {Month}, {Year} to format the date and links to the post’s permanent link ({Permalink}).

Since we’re using the HTML5 tag - time - we’re also following the datetime attribute specification which must be inputted in the order of year-month-day.

It is good practice to integrate a permalink for each post. If a permalink is not used, then users can’t visit the permanent link for post types such as quotes and video which have no title. Additionally, users are not forced to include a title in some post types such as text.

{block:NoteCount}<li><a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}

The note count refers to the number of likes and reblogs a post has received in Tumblr.

The permalink, this time, will then point to the section of the post with an ID of “notes”, which is found in our footer markup later on.

{block:ContentSource}
		<li><a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
		{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></li>
		{/block:ContentSource}

Content source is used to provide attribution posts come from other sources. It is good practice to attribute where the original work came from and is highly recommended for all themes.

For our code, if there is no logo for the source then the title of the website will be rendered, however if a logo is available it will use a logo of the website in black. Logos are automatically provided by Tumblr for large content providers such as BBC and the New York Times.

Footer on permalink pages

	{block:PermalinkPage}
	{block:HasTags}
	<ul class="tags">
		{block:Tags}<li><a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
	</ul>
	{/block:HasTags}
	
	{block:PostNotes}
	<div id="notes">
		{PostNotes}
	</div>
	{/block:PostNotes} 
	{/block:PermalinkPage}

When the post is delivered on a permalink page, more information will be shown. In the footer, we will render a list of tags that a post has and a link to more posts that also have the same tag.

The post’s notes will also be shown. These notes record which users liked or reblogged your post on Tumblr.

Tying up

At the end of our code we’ve included this:

</article>
{/block:Posts}
{block:Pagination}…{block:Pagination}</div>

The </article> closes off the article element for each of the posts.

The </div> seen after the end of the pagination code closes off the content div.

What you should know

  • How to markup a Tumblr blog considering the different needs for each post type
  • Adding metadata to your posts using a footer
blog comments powered by Disqus