Update on using a Tumblr blog as a subdirectory

I wrote a post a few years ago about moving my Tumblr blog from blog.elletricity.com to elletricity.com/blog. Tumblr has since changed and the information in that post needs an update.

Files and code:

  1. A subdirectory in your domain, with your name of choice. I used /blog.
  2. Two files in your subdirectory, proxy.php and .htaccess
  3. CSS fix in your Theme HTML or CSS file
  4. Script fixes in your Theme HTML
  5. External Javascript file - I put it in a .js file with the rest of my jQuery scripts but you can use a separate file. This has to be external for the scripts to work.

proxy.php

<?php

$from = "yourusername.tumblr.com";
$unto = "yourdomain.com/blog";

// Because Dreamhost doesn't do remote fopens, and to get content-type
function fetch($url) {
  $curl = curl_init();
  $timeout = 5; // set to zero for no timeout
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl, CURLOPT_URL, $url);
  curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
  curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
        $html = curl_exec($curl);
  $content_type = curl_getinfo($curl, CURLINFO_CONTENT_TYPE);
  curl_close($curl);
  return array($html, $content_type);
}

list($html, $content_type) = fetch($_GET['url']);

// Fix root-relative links etc.
$html = preg_replace('/\b(href|src|rel)="\//', '$1="http://'.$unto.'/', $html);
// Fix the iframe-url
$html = str_replace("iframe?src=http://".$unto, "iframe?src=http://".$from, $html);

// Replace the old URL with the new
$html = str_replace($from, $unto, $html);

header("Content-type: $content_type");
echo $html;

?>

.htaccess

RewriteEngine On
RewriteBase /blog

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$  proxy.php?url=http://yourusername.tumblr.com/$1

Before </head>

<script type="text/javascript"> if (location.host == 'yourusername.tumblr.com') location.replace(location.href.replace('yourusername.tumblr.com', 'yourdomain.com/blog')); </script>

Before </body>

{block:IndexPage}<div id="control_fix"></div>{/block:IndexPage}
{block:PermalinkPage}<div id="single_control_fix"{block:Posts} data-reblog="{ReblogURL}" data-id="{PostID}"{/block:Posts}></div>{/block:PermalinkPage}
<script>var controlFix={name:'{Name}'}</script>
<script type="text/javascript" src="http://yourdomain.com/javascripts/scripts.js"></script>

In your CSS file or in <style></style>

#tumblr_controls{display:none}

In your .js file

$(document).ready(function () {
	// Permalinks and other pages
	$("body").find("#single_control_fix").each(function () {
		var x = $(this);
		var a = x.attr("data-reblog");
		var b = a.slice(-8);
		var c = x.attr("data-id");
		x.after("<iframe src='http://www.tumblr.com/dashboard/iframe?src=http%3A%2F%2F" + controlFix.name + ".tumblr.com%2Fpost%2F" + c + "&pid=" + c + "&rk=" + b + "&lang=en_US&name=" + controlFix.name + "' scrolling='no' width='330' height='25' frameborder='0' style='position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;' id='tumblr_control'></iframe><!--[if IE]><script type='text/javascript'>document.getElementById('tumblr_control').allowTransparency=true;</script><![endif]-->")
	});
	// Home page
	$("body").find("#control_fix").each(function () {
		var x = $(this);
		x.after("<iframe src='http://www.tumblr.com/dashboard/iframe?src=http%3A%2F%2F"+controlFix.name+".tumblr.com%2F&lang=en_US&name=" + controlFix.name + "&avatar=http%3A%2F%2F25.media.tumblr.com%2Favatar_8b153d3df20d_64.png&title=" + controlFix.name + "&url=http%3A%2F%2F" + controlFix.name + ".tumblr.com%252F&page_slide=slide&_v=dddebe193046ef922006b33d60687b05' scrolling='no' width='330' height='25' frameborder='0' style='position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;' id='tumblr_control'></iframe><!--[if IE]><script type='text/javascript'>document.getElementById('tumblr_control').allowTransparency=true;</script><![endif]-->")
	});
	// To bring back colorful Tumblr controls for people who aren't logged into Tumblr
	if ($('#teaser_iframe_container').length > 0) {
	    $('#tumblr_control').hide();
	    $('#tumblr_controls').show();
	}
});

Replace the bolded parts with your information. Comment or email me if you have any problems with this!

How to use high-res images in text posts

Tumblr automagically shrinks any images you upload in text posts to 500px and replaces images from other websites with an ugly grey icon, but here’s a workaround that will let you post images of any size!

  1. Go to your dashboard and open a new photo post.

    image

  2. Select the photo you would like to post.

    image

  3. Upload the photo as a private post.

    image

  4. Click on the photo once the post finishes uploading and then right-click and copy the image URL.

    image

  5. Open a new text post or reblog a post and switch from rich text formatting to HTML (the far right button on your format bar). Use the following HTML code wherever you need your image:

    <img src="PASTE IMAGE URL HERE"/>

    image

  6. Click Post and you’re finished! The images should show up as native Tumblr image thumbnails.

You can always delete the original photo posts once you’ve finished with them.

All images in this tutorial were uploaded in the same way. Let me know if you have any problems with this method!

HOW TO CHANGE THE COLOR OF YOUR AUDIO PLAYERS

Please note that you may need additional styling to match your theme. Also, this may not work properly with appended posts (e.g. posts that show up when you enable infinite/endless scrolling)

Look in your theme HTML and look for the audio player embed. It should look like {AudioPlayer}, {AudioPlayerWhite}, {AudioPlayerGrey}, or {AudioPlayerBlack}.

Replace that code with:

<div class="audio_box" id="{PostID}">{AudioPlayerWhite}</div>

Put this code right before </body>:

<script type="text/javascript">
$(function () {
    $(".audio_box").each(function () {
    	var d = $(this).attr("id"),
			e = $(this);
		$.ajax({
			url: "http://" + {Name} + ".tumblr.com/api/read/json?id=" + d,
			dataType: "jsonp",
			timeout: 5E4,
			success: function (d) {
				d = d.posts[0]["audio-player"].replace("FFFFFF", "XXXXXX");
				e.html('<div class="audio_player">' + d + "</div>")
			}
		})
	});
});
</script>

Replace XXXXXX with the hex code of your desired color.

elletricity:

Want to learn how to make this awesome widget? Click on the image to be taken to a tutorial on how to put everything together on your desktop.
Compatible with Mac OS X 10.6.8+
Requires GeekTool, iCalBuddy, and a Gmail account (read the tutorial for details)
I hope you find this tutorial useful!
Please reblog this post when referring to the tutorial. You may link either to this post or to the original tutorial but do not copy the tutorial or host the files on your own site.

elletricity:

Want to learn how to make this awesome widget? Click on the image to be taken to a tutorial on how to put everything together on your desktop.

  • Compatible with Mac OS X 10.6.8+
  • Requires GeekTool, iCalBuddy, and a Gmail account (read the tutorial for details)
I hope you find this tutorial useful!

Please reblog this post when referring to the tutorial. You may link either to this post or to the original tutorial but do not copy the tutorial or host the files on your own site.

Want to learn how to make this awesome widget? Click on the image to be taken to a tutorial on how to put everything together on your desktop.
Compatible with Mac OS X 10.6.8+
Requires GeekTool, iCalBuddy, and a Gmail account (read the tutorial for details)
I hope you find this tutorial useful!
Please reblog this post when referring to the tutorial. You may link either to this post or to the original tutorial but do not copy the tutorial or host the files on your own site.

Want to learn how to make this awesome widget? Click on the image to be taken to a tutorial on how to put everything together on your desktop.

  • Compatible with Mac OS X 10.6.8+
  • Requires GeekTool, iCalBuddy, and a Gmail account (read the tutorial for details)
I hope you find this tutorial useful!

Please reblog this post when referring to the tutorial. You may link either to this post or to the original tutorial but do not copy the tutorial or host the files on your own site.