Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Display grid of posts randomly

Home Forums Support Display grid of posts randomly

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #186905
    Ryan

    Is there any particular library or script which will allow me to display a grid of posts (like tiles) in a random order each time the page is loaded?

    I have looked into using Metafizzy’s Packery or Isotope library but I can’t see a random order sorting method.
    Is there anything out there that you could recommend?

    #186960
    Ryan

    Had some more time to look hard at this one. I know it’s quite off topic for something in a GP forum but I think I might be on to something. I thought about just generating my own shuffle function with jQery, borrowing a bit of logic from this Stackoverflow post http://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery.

    So I made a test JSFiddle https://jsfiddle.net/coolwebs/zLgsdno7/4/

    Now I suppose it’s all about integrating it into a GP page template. Is the posts grid structured in a way that would allow me to do this kind of customization Tom?

    I will try and look into it more over the next few days.

    #187091
    Tom
    Lead Developer
    Lead Developer

    Hmm, tough one.

    You could try (no idea if it will work):

    Changing .container to .content-area
    Changing .band to .site-main

    You may want to place .blog if front of those so it only applies to the blog as well.

    #187188
    Ryan

    I will have a play around and let you know what I find. The reason for doing this is that I’ve got a potential lead for a website build. He wants to use a page as an advertisement billboard where adds will get randomly positioned each time the website page is loaded (so they can all share some space at the top of the page at some stag).

    #187191
    Ryan

    Interesting.
    Right now I have set it up on a test site by using GP Hooks http://blogname.coolwebs.com.au/ and it keeps giving me an error in the inspector saying that I cannot declare ‘$’ blogname.coolwebs.com.au/:349 Uncaught TypeError: $ is not a function

    This is feels like deja vu from the time I was having issues with Google Tag Manager (GTM) for Google Analytics (GA).

    I can see that the WordPress core loads and manages the jquery long before I call upon it in the hooks but it’s still having an issue.

    What would I be doing wrong?

    #187203
    Tom
    Lead Developer
    Lead Developer

    In your javascript, replace all $ with jQuery.

    You need to be more specific in JS while in WordPress as jQuery isn’t the only library that uses $.

    #187239
    Ryan

    Thanks, that helped out heaps. I will have to keep that in mind – i think that was the issue I was having with the GTM code on another support post.

    Anyhow, I got it working in this demo site http://blogname.coolwebs.com.au/
    Obviously have to work on it some more. I have to change the code every time I choose between masonry and grid for the blogs as GP inserts another container div above the article elements.

    <script>
    
    (function($) {
      
      $.fn.randomize = function(tree, childElem) {
        return this.each(function() {
          var $this = $(this);
          if (tree) $this = $(this).find(tree);
          var unsortedElems = $this.children(childElem);
          var elems = unsortedElems.clone();
          
          elems.sort(function() { return (Math.round(Math.random())-0.5); });  
    
          for(var i=0; i < elems.length; i++)
            unsortedElems.eq(i).replaceWith(elems);
        });    
      };
    
    })(jQuery);
    
    jQuery(document).ready(function() {
                    console.log('random shuffle')
    		jQuery("body").css("display", "block");
    		jQuery("div.content-area").randomize("div.masonry-container");
    });
    
    </script>

    I think I find this a bit easier than trying to integrate a library such as isotope (with shuffle) when you already have masonry. Less (lib) code is better 😉

    #187241
    Ryan

    I found something better:

    function my_random_posts_order( $query ) {
        if ( $query->is_home() && $query->is_main_query() ) {
            $query->set( 'orderby', 'rand' );
        }
    }
    add_action( 'pre_get_posts', 'my_random_posts_order' );

    I could not manage to get the code working in GP Hooks so I added it to my child functions.php file.

    #187312
    Tom
    Lead Developer
    Lead Developer

    Ah yea, that’s a much better method 🙂

    #209983
    Tito Dupret

    Would it be possible to add this under Blog customization in GP ?

    Best from Brussels,

    #210033
    Tom
    Lead Developer
    Lead Developer

    As an option in the Customizer, it would be possible but I’m not sure there’s enough demand.

    Using the function above is a pretty easy solution without needing to create an option for it 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.