Randomiser for a set of blocs

I have a need for a number of similar blocks (text + image) to be shown in a different random order on a page, different every time the page is loaded.

Is that possible?

Hey Jerry, can the Text inside the quotes be replaced by ID’s?

That’s interesting, thanks. Jerry. What I am looking for (and probably wasn’t clear enough in the OP), is that all the blocks are visible at the same time, just in a different order each time the page is loaded.

It is doable.

You basically just have to index the blocs into an array. Randomise that order, and then append them back on the page.

My 2cents on things you need to consider……

  • Performance hit on the page. You are manipulating the DOM, potentially a lot here.
  • The content, lots of media, like images etc will have an impact on performance.
  • You need this to run as soon as the DOM loads, to avoid visible layout shift and flickering.
  • SEO, if your page layout is changing all the time, it may have a negative effect on crawlers understanding the content.

And there are more, this is just off the top of my head.

If you are going to do this, everything should be light weight. There are a lot of negatives.

1 Like

Performance is probably the biggest issue if there is a lot of content.

By the way, made sense to me :joy:

If I understand what you did here your JS is being applied to Text. If that is correct… I was wondering if your script could be applied to various blocs that would has assigned IDs.

Is it as simple as replacing
“Quote 1”, with “ID1”
“Quote 2”, with “ID2”
“Quote 3”, with “ID3”

Sorry, I should have included giving the various blocs IDs and then replacing the “Quote” with the ID.

Excuse my lack of knowledge @Jerry
Using this JS can it be applied to a random / refreshing resizing gallery?

I think you need to describe the behaviour you want as a starting point.

Okay, a gallery with various size images and when the page refreshes the images change sizes. Therefore the images may be in different locations. I hope that helps.

:question:

The images are sized differently of the page. Some Portrait and some landscape. Small, Medium and & Large. When the page is refreshed or revisited the images randomly change position and size. They would happen upon every refresh.

Ah, thanks. The SEO is not important, and the page loading isn’t much either. And the blocs will be fairly light in content.

I will experiment

I think Iconic Gallery by BlocsAddons will do this for you?

Thanks, I have it. I have to play around with it. Once I get it working, will I need this JS feature?

So.

I have had a look at the suggestion and am none the wiser, being almost totally ignorant when it comes to scripting!

This is what each block would be like. I can easily put them up in a set order, but would prefer to have the order changing.