Today we’ll quickly look at two but very notable developments in the world of jQuery grid plugins this month.

Masonry hits version three

Masonry, the popular jQuery library for creating Tumblr grid themes and other cascading grid layouts, has received a major update improving support for “percentage widths, gutter, [and] stamps”.

Along with the update, documentation has been refreshed for the new options. Check out the appendix for information about upgrading from version two.

Mason.js: New grid plugin for jQuery

Mason.js is a new plugin created by Drew Dahlman.

Mason.js is for creating a “perfect” gapless grid. “This is not Masonry, or Isotope or Gridalicious. Mason fills in those ugly gaps, and creates a perfectly filled space,” says Dahlman.

Download at Github

In this tutorial we’ll explore a simple and fast way to create pages with recent posts, based on their post type, using Tumblr’s blog embed code:

<script type="text/javascript" src="http://buildthemes.tumblr.com/js"></script>

The finished product, will be a page with your preferred post type, looking similar to this:

Creating the page

First we’ll create a page from the theme’s customize panel:

We’ll use a standard page, set where the page should live and its name then click on the HTML button:

Below is a list of code to embed different types of Tumblr posts: text [line 1], photos [2], quotes [3], links [4], chat [5], audio [6] and video [7]. Copy the line for the type of post filter you wish to display. For this example, we’ll use grab all text posts using line one.

<script type="text/javascript" src="http://buildthemes.tumblr.com/js?type=text"></script>
<script type="text/javascript" src="http://buildthemes.tumblr.com/js?type=photo"></script>
<script type="text/javascript" src="http://buildthemes.tumblr.com/js?type=quote"></script>
<script type="text/javascript" src="http://buildthemes.tumblr.com/js?type=link"></script>
<script type="text/javascript" src="http://buildthemes.tumblr.com/js?type=chat"></script>
<script type="text/javascript" src="http://buildthemes.tumblr.com/js?type=audio"></script>
<script type="text/javascript" src="http://buildthemes.tumblr.com/js?type=video"></script>

Then the HTML window, paste the code.

Be sure to change the Tumblr username from “buildthemes” to the URL of your blog.

Then click “update” and save the page.

Extra stylin’

By default, Tumblr will simply use the default theme’s style for the page. With CSS we’ll remove some of the default numbering of posts, and add a background to the posts.

In the customize panel’s advanced section, add the following extra Custom CSS:

.tumblr_posts {
    margin: 0;
    padding: 0;
	list-style: none;
}

.tumblr_post {
	padding: 4%;
	background: rgb(248, 248, 248);
	box-shadow: 1px 1px 0px 2px rgba(0, 0, 0, 0.07);
	margin-bottom: 2%;
}

.tumblr_title {
	font-size: 1.5em;
	text-transform: uppercase;
}

Be sure to save the theme, and you’re done!

Tumblr’s “read more” breaks are a perfect way to shorten long posts on your blog and Tumblr dashboard.

For text posts, Tumblr allows users to create a “read more” break in the text, by using this button, in the post editor:

HTML: Adding a “read more” link

To customize the “read more” button, use {block:More} within the text post block.

In this code sample, we’re creating a link to the permalink of the post, with localized text for “read more”:

{block:More} <a href="{Permalink}" class="button">{lang:Read more}</a> {/block:More}

Note that the break text is customizable, by changing {lang:Read more}. Depending on your Tumblr’s form, you may select a different “read more” break, such as “view the complete article” (for a news Tumblr) or “more details” (for a commerce Tumblr) .

Using {block:More} in your theme may look similar to this:

{block:Text}
<div class="text">
    {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
    {Body}
	{block:More}<a href="{Permalink}" class="button">{lang:Read more}</a>{/block:More}
</div>
{/block:Text}

Now in our theme, at the bottom of truncated posts, we’ll now find a link that follows the rest of your post’s link styling such as this:

CSS: Styling the “read more” link

As usual, we can add some CSS goodness to add some click-friendly, button-like features to the “read more” link.

In the CSS, we’ll add styling to the .button class (which we added directly to the “read more” link, previously):

.button {
    background: #FF6161;
	border-bottom: 2px solid rgba(0,0,0,0.1);
	padding: 1% 2%;
	display: inline-block;
}

 Now our read more break has almost irresistible clicking properties:

In this tutorial, we’ll be combining sprites plus Tumblr theme development to make a set of beautiful customizable social network icons.

Social network icons have become very popular on Tumblr themes (and, indeed the internet), and are used to link visitors to a voluminous social network presence.

The sprite

I’ve created a sprite with the icons of popular social networks including (in order) Facebook, Flickr, Foursquare, Google+, Instagram, Last.fm, LinkedIn, Myspace, Twitter, Vimeo and YouTube.

Using a sprite in your theme is an easy way to save bandwidth, and allows your theme to be loaded faster since less requests are made to servers to load each image.

Each of the above icons will link to the user’s profile and when hovered the colored icon will appear (second line).

The image loaded will be two times the actual size it’s displayed, for retina displays (more on this later).

Since the sprite is an asset for theme development, we are able to upload it to Tumblr (I’ve already uploaded a copy for us to use in this tutorial).

Tumblr have announced new reblog and like buttons using the variables {LikeButton} and {ReblogButton}. Sample code can be viewed from the updated theme documentation.

“Now Tumblr users can interact with a post right from your theme,” said Tumblr staff in an email to theme developers. “All you have to do is embed our new Like and Reblog buttons into your design — we’ll take care of the rest!”

Tumblr’s new reblog and like buttons make use of Scalable Vector Graphics (SVG), meaning they don’t lose resolution when they are enlarged, perfect for high pixel density displays. The buttons are available in three colors: grey, white, or black.

If your themes already use other code for Tumblr like and reblog buttons, staff have advised that developers “need to update to the latest code”.

Tumblr is A/B testing new Tumblr controls in blog themes. Tumblr controls are used to display like, reblog, follow and dashboard buttons (for signed in users); and promotional follow and join Tumblr buttons for users who aren’t yet part of Tumblr.

Currently the new style is only available to some users not signed into Tumblr (top image), with the old style still visible on most blogs (bottom image).

The buttons have been made slightly taller and now follow the rest of Tumblr’s design language. Old buttons had a height of 20px, whereas the newer buttons have a height of 26px.

Some blogs are instead displaying a large “card” version which sticks on top of the theme and additionally shows the blog’s name, username and avatar.

This update is part of a larger design shift to increase the cohesiveness of Tumblr’s identity. 

Here’s one of the new homepage designs Tumblr is testing:

And the new design bubbles up to the log out button, getting Tumblr’s shiny buttons as used elsewhere the new dashboard:

jQuery Photoset Grid makes Tumblr photosets resizeable (no more chopped off photosets), breaking the constraints of Tumblr’s own photoset script which can only be set to widths of 250px, 400px, 500px or 700px .

This plugin was originally used internally in Style Hatch’s premium Tumblr themes, but has now being released for free use by the folks at Style Hatch.

Using Photoset Grid: the Basics

HTML

The HTML is based on the photoset block, remember to include photosets within the posts block:

{block:Photoset}
<div class="photoset">
    <div class="photoset-grid" data-layout="{PhotosetLayout}">
		{block:Photos}
			<img src="{PhotoURL-500}" {block:Caption}alt="{Caption}"{/block:Caption} />
		{/block:Photos}
	</div>

	{block:Caption}
		{Caption}
	{/block:Caption}
</div>
{/block:Photoset}

Be sure to reference the jQuery library and Photoset Grid plugin in your HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/jgemkyt9x/jquery.photoset-grid.min.js"></script>

jQuery

At the most basic level, the jQuery plugin simply has to be called like so:

<script>
$('.photoset-grid').photosetGrid();
</script>

By default, the plugin generates a responsive grid without space (gutter) between images.

Be sure to check out the theme documentation to further customize your photoset with options, a lightbox plugin, plus HTML for a Tumblr photoset that links each image.

Download the plugin at Github

Read complete documentation

Tumblr have announced an all-new audio player, with a “fancy new audio visualizer, bigger album art, [and the ability to] click and drag to skip around”.

We’ll go through some of the inner details of the new audio player in this post.

I’m Free: Say goodbye to Flash

For developers, the new audio player works without Adobe Flash (no more of that “Flash 9 is required to listen to audio” business) as the old player required.

Audio can finally be enjoyed on mobile devices — that typically don’t have Flash installed.

Going Mobile: A responsive audio player

Tumblr has designed the new audio player to work on different devices and post sizes with ease. From a grid layout to full-width posts and from the iPhone to wide-screens, the new audio player makes use of available space.

Music Must Change: Tumblr’s audio player in HTML

To use the new audio player in its entirety make sure you’ve included the Tumblr audio variable {AudioEmbed}.

To simply use the previous “bar” style of the audio player (without the extra track name and album art, see below), continue using the {AudioPlayer} variable.

Disguises: Yes, different colors can still be used

As usual, theme developers are still able to change colors using the Tumblr variable of {AudioPlayerWhite}, {AudioPlayerGrey} or {AudioPlayerBlack}.

If you’re making a grid Tumblr theme for an image-heavy blog you’re bound to experience one horror: slow loading pages.

Luckily this can be curbed by delivering different resolutions of images, depending on the type of page the user is on - since most users won’t load all posts on the permalink page, there is also a saving of bandwidth.

Index page: low resolution images

On the index page (the page which displays all recent Tumblr posts), a grid layout is being used so loading large (and wide) full resolution images is not required.

In our code, we’ll restrict the image width to 500px for the index page.

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

Permalink page: full resolution images

When users click on a post permalink, we’ll display the full resolution image to reflect that the post is bigger and, as a result, takes up more screen space.

In our code:

{block:PermalinkPage} 
		{LinkOpenTag}
		<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
		{LinkCloseTag}
{/block:PermalinkPage}

Complete code

Combining the two methods with our photo block, yields the following complete code:

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