Skip to content

Instantly share code, notes, and snippets.

@jordanskole

jordanskole/tumblr-framework

Created May 1, 2012 03:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jordanskole/2564665 to your computer and use it in GitHub Desktop.
Save jordanskole/2564665 to your computer and use it in GitHub Desktop.
Download ZIP
A basic framework used to kickstart tumblr themes
Raw
tumblr-framework
<!--
______ ______ ______ ______ ______
/\ == \ /\ __ \ /\ == \ /\ __ \ /\__ _\
\ \ __< \ \ \/\ \ \ \ __< \ \ \/\ \ \/_/\ \/
\ \_\ \_\ \ \_____\ \ \_____\ \ \_____\ \ \_\
\/_/ /_/ \/_____/ \/_____/ \/_____/ \/_/
______ ______ __ __ ______ __ __ ______ ______
/\ ___\ /\ __ \ /\ \/\ \ /\__ _\ /\ \/\ \ /\ == \ /\ ___\
\ \ \____ \ \ \/\ \ \ \ \_\ \ \/_/\ \/ \ \ \_\ \ \ \ __< \ \ __\
\ \_____\ \ \_____\ \ \_____\ \ \_\ \ \_____\ \ \_\ \_\ \ \_____\
\/_____/ \/_____/ \/_____/ \/_/ \/_____/ \/_/ /_/ \/_____/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{title}</title>
<!-- setup our default custom texts -->
<meta name="text:Meta Keywords" content="" />
<meta name="text:Google Analytics UA Code" contnt="" />
<meta name="if:Include Navbar" content="1" />
<meta name="if:Include Search" content="0" />
<meta name="image:Favicon" content="" />
<!-- our regular meta informations -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{text:Keywords}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link rel="icon" type="image/x-icon" href="{image:Favicon}" >
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="http://cdn.robt.co/css/bootstrap.min.css" />
{block:IfIncludeNavbar}
<style>
body {
padding-top: 60px;
}
</style>
{/block:IfIncludeNavbar}
{block:IfNotIncludeNavbar}
<style>
body {
padding-top: 30px;
}
</style>
{block:IfNotIncludeNavbar}
<link rel="stylesheet" href="http://cdn.robt.co/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="http://cdn.robt.co/css/style.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://cdn.robt.co/js/bootstrap.min.js"></script>
<script src="http://cdn.robt.co/js/jquery.masonry.min.js"></script>
<script src="http://cdn.robt.co/js/jquery.infinitescroll.min.js"></script>
<style>
{CustomCSS}
</style>
</head>
<body>
<div class="container">
{block:IfIncludeNavbar}
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li><a class="brand" href="http://{name}.tumblr.com">{Title}</a></li>
<li><a href="http://tumblr.com/follow/{name}">Follow</a></li>
{block:AskEnabled}
<li><a href="/ask">AMA</a></li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li><a href="/submit"></a></li>
{/block:SubmissionsEnabled}
{block:Pages}
<li><a href="{URL}">{label}</a></li>
{/block:Pages}
</ul><!-- nav -->
<ul class="nav pull-right">
<li><a href="http://tumblr.com/dashboard">Account</a></li>
</ul>
{block:IfIncludeSearch}
<form action="/search" class="navbar-search pull-right" method="get">
<input type="text" class="search-query" name="q" value="{SearchQuery}"/>
</form>
{/block:IfIncludeSearch}
</div><!-- nav collapse-->
</div><!-- nav container -->
</div><!-- navbar inner -->
</div><!-- navbar -->
{/block:IfIncludeNavbar}
<header>
</header>
<section id="thegrid">
<ul class="thumbnails">
{block:Posts}
<!-- text -->
{block:Text}
<li class="span4">
<div class="thumbnail pad10">
{block:Title}
<h3>{Title}</h3>
{/block:Title}
<p>{body}</p>
</div>
</li><!--span4 -->
{/block:Text}
<!-- /text -->
<!-- quote -->
{block:Quote}
<li class="span4">
<div class="thumbnail">
<blockquote class="top20">
<p>{Quote}</p>
{block:Source}
<small class="text-right top10">{PlaintextSource}</small>
{/block:Source}
</blockquote>
</div><!-- thumbnail -->
</li><!-- span4 -->
{/block:Quote}
<!-- /quote -->
<!-- Photo -->
{block:Photo}
<li class="span4">
<div class="thumbnail">
<div id="detail-{PostID}" class="modal hide fade">
<div class="modal-body">
<img class="pad10" alt="{PhotoAlt}" src="{PhotoURL-500}">
{block:Caption}
<p>{caption}</p>
{/block:Caption}
{block:Exif}
<dl class="dl-horizontal">
{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}
</div><!-- modal-body -->
<div class="modal-footer">
<div class="pull-left">
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2F{URLEncodedName}.tumblr.com%2F&media={URLEncodedPhotoURL-500}&description={PlaintextCaption}" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
</div><!-- pull left -->
{block:HighRes}
<a href="{PhotoURL-HighRes}" class="btn">Download</a>
{/block:HighRes}
<a href="#" data-dismiss="modal" class="btn btn-primary">Close</a>
</div><!-- modal-footer -->
</div><!-- modal -->
<a data-toggle="modal" href="#detail-{PostID}">
<img alt="{PhotoAlt}" src="{PhotoURL-500}" >
</a>
</div><!-- thumbnail -->
</li><!-- span4 -->
{/block:Photo}
<!-- /Photo -->
<!-- video -->
{block:Video}
<li class="span4">
<div class="thumbnail">
{Video-500}
</div><!-- thumbnail -->
</li><!-- span4 -->
{/block:Video}
<!-- /video -->
<!-- Link -->
{block:Link}
<li class="span4">
<div class="thumbnail pad10">
<h3><a target="{Target}" href="{URL}">{Name}</a></h3>
{block:Description}
<p>{Description}</p>
{block:Description}
</div><!-- thumbnail -->
</li><!-- span4 -->
{/block:Link}
<!-- /Link -->
<!-- Chat -->
{block:Chat}
<li class="span4">
<div class="thumbnail pad10">
{block:Title}
<h3>{Title}</h3>
{/block:Title}
<dl class="dl-horizontal">
{block:Lines}
<dt>{block:Label}{Label}:{/block:Label}</dt>
<dd>{Line}</dd>
{/block:Lines}
</dl><!-- description list -->
</div>
</li>
{/block:Chat}
<!-- /Chat -->
{/block:Posts}
</ul><!-- thumbnails -->
</section><!-- the grid -->
<!-- next/prev navigation -->
{block:Pagination}
<section id="page-nav">
<div class="row">
{block:PreviousPage}
<div class="span2">
<a class="btn pull-left previous-page" href="{PreviousPage}">Previous</a>
</div>
{/block:PreviousPage}
{block:NextPage}
<div class="span2 offset10">
<a class="btn pull-right next-page" href="{NextPage}">Next</a>
</div>
{/block:NextPage}
</div>
</section>
{/block:Pagination}
<footer>
<p class="text-center">&copy; {title}, {CopyrightYears}</p>
<p class="pull-right">
Custom tumblr theme by the <a alt="boutique digital agency" href="http://robotcouture.com">boutique digital agency</a>, Robot Couture.
</p>
</div><!-- credits row -->
</footer>
</div><!-- container -->
<!-- our footer scripts -->
<script>
$(document).ready(function() {
$('.thumbnails').imagesLoaded(function(){
$('.thumbnails').masonry({
// options
isAnimated : true,
});
});
$('.thumbnails').infinitescroll({
// selector for the paged navigation (it will be hidden)
navSelector : "#page-nav",
// selector for the NEXT link (to page 2)
nextSelector : "a.next-page",
// selector for all items you'll retrieve
itemSelector : ".thumbnails > li",
// the end of the internet
donetext : "&nbsp;"
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$('.thumbnails').masonry( 'appended', $newElems, true );
$(fluidTube());
});
});
$(window).resize(function() {
$('.thumbnails').masonry('reload');
});
// youtube fluid width
// By Chris Coyier & tweaked by Mathias Bynens & Jordan Skole
function fluidTube() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $(".thumbnail");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
}
</script>
<!-- pinterest pin this button script -->
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</body>
</html>
@jordanskole
Copy link
Author

This still needs a lot of work to get it to comply with tumblr's theme requirements. The biggest thing is that all files need to be uploaded and hosted on tumblr's network, and I need to include all the specific post--types. The biggest one is audio

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment