1

I have created a Tumblr blog that shows photos of my interest. I am looking to have my tumblr photo posts to be displayed in random order such that every-time the page is loaded, the order of posts in my grid theme is randomly shown. This way everyone can see all my posts without scrolling.

Does anyone know a code that I can simply insert to my theme so that posts are shown in random order and be shown in random order every time the page loads.

Braiam
  • 1
  • 11
  • 47
  • 78
html-noob
  • 11
  • 1
  • 2

2 Answers2

1

I am not entirely familiar with Tumbler, but I am willing to bet there is a unique class name for those image blocks. You can insert JavaScript on Tumbler as well. see: http://www.problogtricks.com/2013/12/add-custom-css-javascript-code-to-tumblr-blog.html

That said, randomizing elements with JavaScript is super easy. Here is a demo of how that is done. After identifying a unique classname that applies only to those elements, you can change the parameter inside the JavaScript function below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .putauniqueclassnamehere{
        }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function (name) {
            return function () {
                var max = $(name).length;
                $.each($(name), function (p1, p2) {
                    var randPos = Math.floor(Math.random() * (max - 0 + 1) + 0);
                    $(p2).insertBefore($(name)[randPos]);
                })
                return ;
            }
        }(".putauniqueclassnamehere"))
    </script>
</head>
<body>
    <div class="mytest">Test 1</div>
    <div class="mytest">Test 2</div>
    <div class="mytest">Test 3</div>
    <div class="mytest">Test 4</div>
    <div class="mytest">Test 5</div>
</body>
</html>
Joshua Dannemann
  • 2,003
  • 1
  • 14
  • 34
  • Hi Joshua, Thanks for much for providing this for me. Althoguh I'm not computer coder myself, I was able to find the the class name for those blocks to be simply name "photo". I am not wondering how I can implement that to the script, as in what needs to be copied and changed from your demo below. any ideas? Much appreciated. – html-noob Apr 28 '15 at 18:14
  • Sorry I missed your comment. The link I posted above gives directions for how to add the JavaScript. When you have a chance, can you mark mine as the answer please? Thanks. – Joshua Dannemann Jun 04 '15 at 17:47
0

Just paste this at the end of your theme:

{block:IndexPage}
<script>
    $(document).ready(function (name) {
        return function () {
            var elts = $(name);
            var max = elts.length;
            $.each(elts, function (index, elt) {
                var randPos = Math.floor(Math.random() * (max - 0 + 1) + 0);
                $(elt).insertBefore(elts[randPos]);
            })
            return ;
        }
    }(".entry"))
</script>
{/block:IndexPage}

All the credit goes to Joshua Dannemann. I just pasted the relevant part of the code with the class to use with my theme: entry. It could be post or something else. Post a link to your tumblr and I can help you some more.

Edits:

  • renamed p1 and p2
  • added {block:IndexPage} and {/block:IndexPage} tags (without them, post pages are broken)
Gra
  • 1,542
  • 14
  • 28