14

I want to add JavaScript code to every individual post page on my Tumblr blog. I have the following, but it seems to never show up on any page let alone just the permalink or individual post pages. I've tried many variations here with removing the Posts block or the PermalinkPage block to no avail. What am I doing wrong here?

<!-- Start JS -->
{block:Posts}
    {block:PermalinkPage}
    <script type='text/javascript'>
    __config = {
            {block:Date},date:'{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes}:{Seconds}'{/block:Date}
            {block:PostSummary},title:{JSPlaintextPostSummary}{/block:PostSummary}
            {block:HasTags},tags:[{block:Tags}'{Tag}', {/block:Tags}],{/block:HasTags}
            ,url:'{URLEncodedPermalink}'
    };
    (function(){
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = document.location.protocol + '//example.com/example.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);
    })();
    </script>
    {/block:PermalinkPage}
{/block:Posts}
<!-- END JS -->
Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
Eric Lubow
  • 673
  • 2
  • 10
  • 30
  • Why not just add the javascript to every page? It will get cached then at least – lharby Aug 10 '16 at 07:56
  • Because the Javascript app shouldn't fire on the main page of foo.tumblr.com. It should fire on foo.tumblr.com/EveryPageButSearch – Eric Lubow Aug 10 '16 at 14:19
  • Have a look at this: http://ejdraper.com/2009/12/13/advanced-tumblr-customization/ (just over half way down). Confusingly the Tumblr block indexPage refers to different types of index pages. You can target the search page using the tumblr tags, but omitting code is more complex. I know a way to solve this using jquery (which I would think could be ported to vanilla js) but of course it is more hacky and not as robust as setting it in the tumblr tags). – lharby Aug 10 '16 at 14:28
  • My goal is to get on every page except the front page and the search page. I'm trying to figure out how to do this with the Tumblr tags but haven't been able to so far. The information on that page didn't help me make any progress. – Eric Lubow Aug 11 '16 at 14:19
  • It's not possible using tumblr tags alone. – lharby Aug 11 '16 at 14:31

2 Answers2

9

This is how I would solve it using JavaScript/front end. 

var path = document.location.pathname;
path = path.split("/")[1]; // Should return the primary directory
path = path.toLowerCase(); // This should catch your.tumblr.com/Search and your.tumblr.com/search
if(path === "" || path === "search")){
    console.log('Index or Search page');
}else{
   // Run your function here
}

Basically if the path URL is empty or is equal to search then do not run the function, but run the function in any other case.

However, as I mentioned this is not 100% robust. As the path might be http://your.tumblr.com/# and the function will fail, so you may have to build more explicit logic (you can say if path !== " " for an empty string).

I'm still not sure why it's not a good idea to have this on every page. Unless users are definitely being linked to pages on the site that and are not being routed via the index page. And unless your JavaScript code is massive, it could all be cached from the index page (but still available from all other pages in case of hotlinking, etc.).

EDIT

As per comments below, I have created a basic example on a test Tumblr account.

The code looks like this: 

  var path = document.location.pathname;
  path = path.split("/")[1];
  path = path.toLowerCase();
  if(path === "" || path === "about"){
    $('body').css('background','#F09');
    console.log('Index or about page');
  }else{
    $('body').css('background','#FC0');
    console.log('Other page');
  }

The Tumblr page I am using is here: http://sg-test.tumblr.com/

(I do not think there is a search page, the search function is a block you insert or activate within your template and is available on every page.)

The function basically checks for the index page (empty primary directory), or the about page (substitute this for 'search' or another page if needs be).

Console logs will output on every page. And if path matches index or about I have set the body colour to pink, or else every other page will be orange.

http://sg-test.tumblr.com/about (pink background)

http://sg-test.tumblr.com/post/134796799695/post-title (orange background)

By this logic it should be easy to adapt the function to execute your code if it meets the path variable requirements, as in my first example.

As I mentioned though there is an issue with http://sg-test.tumblr.com/#. This is effectively still the index page, but our test is returning false for an empty directory, even though Tumblr is mapping it to the home page.

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
lharby
  • 2,720
  • 5
  • 19
  • 50
  • I don't mind caching it from the index page. I just don't want the JS firing on the index or search pages. In the cases I'm talking about, users are definitely being linked to the individual post pages. Is it possible with Tumblr tags if it's on every page but not firing? – Eric Lubow Aug 12 '16 at 14:56
  • 1
    There are no tumblr tags strictly for the home page (although there is a tag for the search page), as generally the template is one block of code for the entire site. So the solution I am proposing would run on every page but only execute the function if it meets the criteria of not being the index or search page. Would it help if I made an example? – lharby Aug 13 '16 at 10:26
  • I can't get your code to work on any other page besides the home page. An example would be very helpful. The console.log() isn't even firing on the home page. – Eric Lubow Aug 15 '16 at 14:15
  • With your update, I still do not see the code being loaded on foo.tumblr.com/image/12345 pages. Am I missing something here? I've tried putting your code in various places on the template and still not seeing it in the /image/$id pages. – Eric Lubow Aug 16 '16 at 20:02
  • 1
    Ah sorry, those pages are outside of the tumblr template architecture. They are the same on everyones account and not customisable. You can access `foo.tumblr.com/post/12345` `foo.tumblr.com/about` (and other custom pages) `foo.tumblr.com/tagged/sometag` etc. But not the image pages, or the archive. – lharby Aug 16 '16 at 21:16
-3

I shoved this into my sandbox blog to see what the issue could be and it's a forehead slapper when I checked the JS console.

{block:Date},date:

Remove the comma before date and it should work. Let me know if you have more questions.

Ally
  • 1,882
  • 1
  • 13
  • 20
  • I've tried pairing down the fields to only include *url* and it still didn't work. – Eric Lubow Aug 12 '16 at 20:43
  • Are you checking the page and certain the script tag isn't getting inserted at all? Are there any errors in the JS console for this area of the code? Because when I removed the comma from in front of date, it inserted the script tag just fine. – Ally Aug 12 '16 at 21:19
  • Yes, I have the browser opened to a post page in a separate window and I'm saving my changes and exiting the editor to be 100% sure and I'm still not seeing the JS. I've look on Posts and Images (foo.tumblr.com/image/123) and I don't see the JS. – Eric Lubow Aug 12 '16 at 21:44
  • Well, it wouldn't show up on the Image page because that's handled by Tumblr as a different thing. It would just be on the Permalink Pages. Are you not getting any console errors? – Ally Aug 12 '16 at 21:47
  • I'm not getting any console errors nor is the Javascript showing up on any pages. – Eric Lubow Aug 15 '16 at 14:07