Posted By

apaunchev on 01/26/11

Tagged

theme Framework custom tumblr

Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

karstenrowe
abbyabigale
raz
kantiano
thinkxl
lookingforsome
bgc

Tumblr Custom Theme Framework

/ Published in: HTML

Every time I start coding a new Tumblr theme I find myself writing the same Tumblr tags over and over again. That's why I decided to create a boilerplate, or a framework, that I can reuse for my next projects.

I tried to cover most of the features included in the documentation, yet provide just the bare essentials so you can build up from there.

Have fun!

(v 1.3)

Highlighted TextExpand

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">

<title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}</title>

{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}

<body>
		<header>
			<h1><a href="/">{Title}</a></h1>

{block:Description}
				<p>{Description}</p>
			{/block:Description}
		</header>

<div class="content">
			<section class="posts">
				{block:NoSearchResults}
					<h4>Sorry, nothing found for &ldquo;{SearchQuery}&rdquo;.</h4>
				{/block:NoSearchResults}

{block:TagPage}
					<h4>Posts tagged &lsquo;{Tag}&rsquo;</h4>
				{/block:TagPage}

{block:Posts}
					<article class="post {PostType}">
						{block:Text}
							{block:Title}
								<h2>{Title}</h2>
							{/block:Title}
							
							{Body}
						{/block:Text}

{block:Photo}
							{LinkOpenTag}
								<img src="{PhotoURL-500}" alt="{PhotoAlt}">
							{LinkCloseTag}

{block:HighRes}
								<a href="{PhotoURL-HighRes}">View in high-res</a>
							{/block:HighRes}

{block:Exif}
								<dl>
									{block:Camera}
										<dt>Camera:</dt>
										<dd>{Camera}</dd>
									{/block:Camera}
									
									{block:Aperture}
										<dt>Aperture:</dt>
										<dd>{Aperture}</dd>
									{/block:Aperture}
									
									{block:Exposure}
										<dt>Exposure:</dt>
										<dd>{Exposure}</dd>
									{/block:Exposure}
									
									{block:FocalLength}
										<dt>Focal Length:</dt>
										<dd>{FocalLength}</dd>
									{/block:FocalLength}
								</dl>
							{/block:Exif}
								
							{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Photo}

{block:Photoset}
							{Photoset-500}

{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Photoset}

{block:Quote}
							<blockquote>
								<p>{Quote}</p>

{block:Source}
									<b class="source">{Source}</b>
								{/block:Source}
							</blockquote>
						{/block:Quote}

{block:Link}
							<h2><a href="{URL}"{Target}>{Name}</a></h2>

{block:Description}
								{Description}
							{/block:Description}
						{/block:Link}

{block:Chat}
							{block:Title}
								<h2>{Title}</h2>
							{/block:Title}

<ul>
								{block:Lines}
									<li class="{Alt}">
										{block:Label}
										    <b>{Label}</b>
										{/block:Label}

{Line}
									</li>
								{/block:Lines}
							</ul>
						{/block:Chat}

{block:Audio}
							{block:AudioEmbed}
								{AudioEmbed-500}
							{/block:AudioEmbed}

{block:AudioPlayer}
								{block:AlbumArt}
									<img src="{AlbumArtURL}" alt="Album Art">
								{/block:AlbumArt}

{AudioPlayerBlack}

{block:ExternalAudio}
									<a href="{ExternalAudioURL}">Download</a>
								{/block:ExternalAudio}
							{/block:AudioPlayer}

{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Audio}

{block:Video}
							{Video-500}

{block:Caption}
								{Caption}
							{/block:Caption}
						{/block:Video}

{block:Answer}
							<h2>{Asker} asked: <q>{Question}</q></h2>

{Answer}
						{/block:Answer}

{block:Date}
							<footer>
								<ul>
									<li><a href="{Permalink}" title="{DayOfWeek}, {DayOfMonth} {Month} {Year}, {24Hour}:{Minutes}:{Seconds}">{TimeAgo}</a></li>
									{block:NoteCount}<li><a href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount}
									{block:HasTags}
										<li>Tags:
											<ul>
												{block:Tags}
													<li>
														<a href="{TagURL}">{Tag}</a>
													</li>
												{/block:Tags}
											</ul>
										</li>
									{/block:HasTags}
									{block:RebloggedFrom}<li>Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a></li>{/block:RebloggedFrom}
									{block:ContentSource}
										<li>Source:
											<a href="{SourceURL}">
												{block:SourceLogo}
													<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}">
												{/block:SourceLogo}

{block:NoSourceLogo}
													{SourceTitle}
												{/block:NoSourceLogo}
											</a>
										</li>
									{/block:ContentSource}
								</ul>
							</footer>
						{/block:Date}
					</article>

{block:PostNotes}
						{PostNotes}
					{/block:PostNotes}
				{/block:Posts}

{block:PermalinkPagination}
					<nav>
						{block:PreviousPost}
							<a href="{PreviousPost}">&larr; Previous Post</a>
						{/block:PreviousPost}
						
						{block:NextPost}
							<a href="{NextPost}">Next post &rarr;</a>
						{/block:NextPost}
					</nav>
				{/block:PermalinkPagination}
				
				{block:Pagination}
					<nav>
						{block:PreviousPage}
							<a href="{PreviousPage}">&larr; Previous</a>
						{/block:PreviousPage}
						
						<span>{CurrentPage}/{TotalPages}</span>
						
						{block:NextPage}
							<a href="{NextPage}">Next &rarr;</a>
						{/block:NextPage}
					</nav>
				{/block:Pagination}
			</section> 
		</div> 
		
		<footer>
			<ul>
				{block:HasPages}
					{block:Pages}
						<li><a href="{URL}">{Label}</a></li>
					{/block:Pages}
				{/block:HasPages}
				{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
				{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
				<li><a href="/archive">Archive</a></li>
				<li><a href="{RSS}">RSS feed</a></li>
			</ul>
			
			<p>Powered by <a href="http://www.tumblr.com/">Tumblr</a>.</p>
		</footer>
	</body>
</html>

Report this snippet Tweet

Comments

Subscribe to comments

Posted By: eurotransient on May 13, 2012: Thank you for this! Just what I needed. One thing, though: there's a tiny error in there. Your closing article tag for the photoset block has a misspelling: "artlcle" instead of "article".
Posted By: apaunchev on August 8, 2012: eurotransient, sorry about that. I updated the code -- it's more compact now but I also added support for more Tumblr features. Let me know if you notice any other bugs!

Comment:

You need to login to post a comment.