Vimeo offers plenty of customisation options when embedding its player, but Tumblr’s automated code generator doesn’t respect these, overwriting them with its own defaults. To fix this, I wrote a quick jQuery function to rewrite Tumblr’s default options string for all Vimeo embeds on the current page (get the ready-to-install version):
$("object[data^='http://vimeo.com']").each(function() { var parent = $(this).parent(); var vimeoCode = parent.html(); var params = ""; if (vimeoCode.toLowerCase().indexOf("<param") == -1) { $("param", this).each(function() { params += $(this).get(0).outerHTML; }); } var oldOpts = /show_title=1&show_byline=0&show_portrait=0&color=00ADEF/g; var newOpts = "show_title=0&show_byline=0&show_portrait=0&color=55CC55"; vimeoCode = vimeoCode.replace(oldOpts, newOpts); if (params != "") { params = params.replace(oldOpts, newOpts); vimeoCode = vimeoCode.replace(/<embed/i, params + "<embed"); } parent.html(vimeoCode); });Tweak the
newOptsstring to whatever you prefer — it will work for all embeds except those that have had their options locked by their respective owners. You can see it in action here.Update: IE mangles the
<object>tag when returning it as an HTML string. I’ve updated the code to make it work as intended.
Tumblr Theme Recovery page
from staff.tumblr.com:
Accidently blow away all your hard work on a custom theme? Don’t worry!
Tumblr now stores the last 20 revisions of your Custom HTML. To revert to a previous version, just visit the Theme Recovery page.
(found this here: http://tumblr.boxofjunk.ws/wiki/index.php?page=Useful+secret+links)
![konrad:
ScreenShot free tumblr theme, beta.
About Theme for webdesign showcases. Simply add “link post” with no description, and this is all. You can view a live demo here. It use websnapr 2.0 to create screenshots.
How to Create a new tumblr account. Go to Customize > Theme > Use custom HTML. Copy and paste this text (new version! - 20.01.2009).
If you like this please reblog :].](http://25.media.tumblr.com/hrtkm5fKn6uusdqz7ufXByDv_500.jpg)
ScreenShot free tumblr theme, beta.
About
Theme for webdesign showcases. Simply add “link post” with no description, and this is all. You can view a live demo here. It use websnapr 2.0 to create screenshots.How to
Create a new tumblr account. Go to Customize > Theme > Use custom HTML. Copy and paste this text (new version! - 20.01.2009).If you like this please reblog :].
New theme variables: Jump Pagination
We just added some variables for designers to add jump to page links in Tumblr themes (in addition to next/previous links). Check out the new code in the Custom Theme docs.
You can see it in action in the Redux theme, where it’s now an appearance option.
The code in the Theme Docs is actually incorrect, and won’t work on your search and tag archives. Probably not a huge deal to most people, since tumblr is not for serious blogging/archiving. Anyway, here’s the correct code:
{block:JumpPagination length="5"}
{block:JumpPage}
<a href="{block:SearchPage}/search/{URLSafeSearchQuery}{/block:SearchPage}{block:TagPage}/tagged/{URLSafeTag}/{/block:TagPage}{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
Better Vimeo embeds on Tumblr
♪.tumblr.com
Jarred Bishop’s new project is a song-a-day Tumblr utilising recent support for extracting album art from uploaded tracks. Simply brilliant, from the jewel case design to the single-character unicode URL.
Tumblr Notes Plugin Redux
Last year I released a plugin to display notes for any post in a Tumblr site, in much the same fashion as the Dashboard does. At the time, in order to display the notes count, the plugin had to preload all notes for every post, which was quite inefficient. In February, Tumblr added custom theme tags for notes, so here’s an updated version of the plugin I’ve been using for the past few months: it uses theme tags to display the note count, and only loads the notes when the user clicks to view them for a particular post.
The benefit of this approach is the ability to display notes on any page of your Tumblr site, not possible using just the custom theme tags.
The installation process is largely the same as described previously, but I’ll repeat it for the sake of clarity. To upgrade from the previous version, grab or link to the new JavaScript file and use the updated markup and tags from Steps 3 and 4 below.
While logged in to Tumblr, go to this Dashboard page, view its source code, and search for the first occurrence of
display_post_notes. This is a function call with two parameters, the second of which you need to remember (it’s a short string, for example:oUVPjZYNo). This we’ll call your “user key”.In the
<head>of your custom theme, include links to jQuery and the notes-native.js file as follows:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/notes-native.js"></script>Feel free to host the JavaScript file or link to it on my server. If you wish to strip avatar images from the notes, use this file instead.
In your custom theme, for every post type, include a Notes link:
{block:NoteCount} <a href="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/?url=http://www.tumblr.com/dashboard/notes/{postID}/[user-key]" rel="{postID}" class="notes-button">{NoteCountWithLabel}</a> {/block:NoteCount}Replace
[user-key]in the above code with the user key string from Step 1. This proxy link converts the HTML fragment loaded from Tumblr into a JSONP callback function, and is based in part on Troy Wolf’s PHP Proxy. (If JavaScript is disabled, the link falls back to loading an unstyled notes view as a new page.)Near the Notes link, add a container for the imported markup:
<div class="notes-container" id="notes-{postID}"> <p class="loading">Loading...</p> <div class="notes-loader"></div> </div>The “Loading…” paragraph element is optional, and is hidden once the notes are loaded from the server. I styled mine with an animated spinner from Ajaxload.
Add styles to your CSS for the classes
.notes-button,.notes-container(and its child<ol>element containing the notes), and.notes-hide(the button that closes the notes container). The style for thebutton andcontainer elements must be set todisplay: none;initially. If there are 15 or more notes, the button element gets a class of.fave, which I’ve used to style my notes icon differently for popular posts. Here’s the bare minimum CSS you’ll need:.notes-container { display: none; } .notes-container ol { list-style: none; }That’s it. My email address is below if you have feedback or encounter problems.
Update: Caught a couple of minor issues with the markup, these are now fixed above. Here’s an example page so you can see it working in basic, unstyled form.
Tumblr Notes Plugin
A new version of this plugin that uses custom tags is here.On Friday I posted about loading Tumblr’s reblog “notes” via AJAX into a custom theme. I’ve had enough interest via email to release it as a plugin of sorts. Here’s a brief run-through of how to install it:
While logged in to Tumblr, go to the Dashboard page that lists all your posts, view its source code, and search for the first occurrence of
display_post_notes. This is a function call with two parameters, the second of which you need to remember (it’s a short string such asoUVPjZYNo). This we’ll call your “user key”.In the
<head>of your custom theme, include links to the jQuery library and the notes.js file as follows:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/notes.js"></script>Feel free to host the notes.js file or link to it on my server. If you wish to strip avatar images from the notes, you’ll need to host a copy of the file and modify the AJAX request to include
&noimages=1as a query string parameter.In your custom theme, for every post, include a Notes link as follows:
<a href="http://theme.matthewbuchanan.name/tumblr/tools/proxy/notes/?url=http://www.tumblr.com/dashboard/notes/{postID}/[user-key]" rel="{postID}" class="notes-button">Notes</a>Replace
[user-key]in the above URL with the user key string from Step 1. Leave both occurrences of{postID}as they are, they will be replaced by Tumblr’s theme engine with the ID of the current post. This proxy link converts the HTML fragment into a JSONP callback function, and is based in part on Troy Wolf’s PHP Proxy. (If JavaScript is disabled, the link falls back to loading an unstyled notes view as a new page.)Near the Notes link, add an empty
<div>as follows:<div class="notes-container" id="notes-{postID}"></div>Add styles to your CSS for the classes
.notes-button,.notes-container(and its descendant<ol>element containing the notes), and.notes-hide(the button that closes the notes once they’re open). (The styles for the button and container elements should both be set todisplay: none;initially.) If there are 15 notes or more, the button element gets a class of.faveadded to it, which I’ve used to style my notes icon differently for popular posts. Here’s the bare minimum CSS you’ll need to add:.notes-button, .notes-container { display: none; } .notes-container ol { list-style: none; }All feedback is welcomed, especially if anything’s unclear in these instructions. I’ll reserve the right to remove the scripts if anyone from Tumblr finds them objectionable. (This won’t break your theme, as nothing is visible on the page until the notes have loaded for a particular post.) Email me via the “By Day” link on this page.
Update: I’ve included explicit code for including the JavaScript files and for initially hiding the notes with CSS. Thanks for your feedback.
Tumblr - Upload a static file
Upload a static file
Use this to host small files required for custom themes (images, css, javascript). Once uploaded, files cannot be deleted or changed.
NoticeUploading anything other than theme assets will result in an immediate banning of your account.
modified Cargo theme 1
a modification of the Cargo Theme by jarredbishop
