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}

Just a quick post to share with you a project I’ve been working on for the past couple of months: Theme Guide.

Theme Guide is a selection of free and excellent Tumblr themes that are available exclusively from the Theme Garden, sorted into relevant categories.

Theme Guide removes the hard work of finding new themes that enter the Theme Garden. Plus, Theme Guide allows you to find many new theme developers that haven’t made it to the front-page of the Theme Garden.

Check it out on Tumblr

Tumblr now allows theme developers to “retire” unwanted Tumblr themes from the Theme Garden.

Retiring Tumblr themes permanently deletes the theme’s page in the Theme Garden, preventing further installations.

Users who have already installed your code will be able to continue using the theme as usual.

How to remove your Tumblr theme

1. Head over to the Tumblr Theme Garden
2. Select the “Manage your themes” button
   
   
   
   
3. Hover over the theme you wish to remove and select “retire”