If you’re using the fantastic Photonic plugin to display galleries from SmugMug, Flickr, or other sources in WordPress, you may have noticed there isn’t a built-in option to randomize the order of photos.

This is due to the way Photonic fetches images from external sources…it pulls them in a predefined order set by the image host. Since these images are loaded dynamically, controlling their order directly through Photonic settings isn’t possible.

Instead, a simple jQuery script can help shuffle the images after they load on the page.

Why This Works

Photonic applies different layouts like masonry, mosaic, carousel, and slideshows, each with its own structure. Instead of relying on Photonic’s settings, this approach waits until the images are added to the page and then reorders them randomly.

Since Photonic doesn’t provide a direct “random” option at the source level, this method works entirely in the browser without modifying the way Photonic fetches images.

Example

I load all of my artwork and photography to SmugMug so that I can offer prints of my work. For all of my photo galleries (Selected Photos, New Photos, and Collections galleries), I wanted to have my photos display randomly so that any returning visits to this page could lead to a user discovering something new.

The Code

To achieve this, I added the following snippet to my WordPress theme’s functions.php file:

// =========================================================================
// Photonic - Randomize Gallery Photos
// =========================================================================

function ess_randomize_photonic_gallery() {
  ?>
  <script>
  jQuery(document).ready(function($) {
    var containers = $('.photonic-masonry-layout, .photonic-gallery, .photonic-mosaic-layout, .photonic-slideshow, .photonic-carousel-layout, .photonic-strip-layout');

    containers.each(function() {
      var items = $(this).children();
      items.sort(function() { return 0.5 - Math.random(); }); // Shuffle items
      $(this).append(items);
    });
  });
  </script>
  <?php
}
add_action('wp_footer', 'ess_randomize_photonic_gallery');

The script detects Photonic’s gallery layouts, then randomizes the order of images within these containers after they load.

This runs on page load using jQuery(document).ready() to ensure Photonic has already rendered the gallery. WordPress still includes jQuery by default, and this script takes advantage of jQuery’s .children() and .sort() functions to efficiently shuffle images without breaking Photonic’s layout structure.

It’s not perfect since it only works after images are loaded, but for me it’s a quick and effective workaround for randomizing my stuff.