Geek Answers Handbook

Tumblr Development Tools

I want to create a Tumblr theme and injectesting are there any IDE plugins (Netbeans, Eclipse, PHPStorm) or development tools? The ideal thing is to view my theme in a browser without loading it into Tumblr. Thanks.

+7
source share
2 answers

In terms of resources, there are a few that I have found.

There is also a TextMate package , although it is several years old.

Developing for Tumblr is a bit of a pain since I do this by setting up a test tumblr to use, re-hack or post each type of message I want (photo, photoset, audio, text, etc.). I work on HTML locally and customize it the way I want until I find out that I can do almost everything I need to achieve with CSS only. Then I place any resources on my server (CSS / JS / etc.), I use the theme editor on a test topic to update the HTML code, and then everything I need to do can only be done in my remote assets. If I need to edit the HTML, I will make it locally and then bring it back to the theme editor.

This is not the nicest way to work, but I have done about 4 in this way, and it works well for me.

+6
source

I found my own way to develop tumblr themes using PhpStorm (or perhaps any other IDE), and avoid pasting manual copy to see my updates. I wrote simple javascript to execute in the browser console (MIT license).

setInterval(function() { jQuery.ajax('YOUR-URL-TO-THE-THEME-FILE', {cache: false}).success(function(html) { var btn = jQuery("div[data-action='update_preview']").first(); if (html!=ace.edit('editor').getValue()) { ace.edit('editor').setValue(html); if (!btn.hasClass('disabled')) btn.click() } }); },1000);

Howto:

  • Use JetBrains PhpStorm to edit the html theme file ( You can use other editors, it is only important that the file is located on a local or public server. ).
  • Click Open in browser in PhpStorm while viewing the file.
  • Your browser should open the URL: http://localhost:63342/TumblrTheme/index.html .
  • Paste this URL into the snippet above.
  • Open http://www.tumblr.com/customize/YOUR-BLOG-NAME .
  • Click Edit html .
  • Open the javascript browser console.
  • Paste in the fragment above (remember changing the path to the theme file).
  • The preview now automatically updates every second if the source has been changed.

Published in this document: https://gist.github.com/cmfcmf/7154536

+6
source

More articles:


All Articles