Randomiser for a set of blocs

I Need Help
1

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?

2

A little piece of Javascript can do that for you. Below is a sample of random quotes. It would be fairly simple to attach an image to each quote. There are countless samples on Google.

Small Potato Ltd - 000055

And a snippet to get you started:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const quotes = [
        "Quote 1",
        "Quote 2",
        "Quote 3",
        "Quote 4",
        "Quote 5",
        "Quote 6",
        "Quote 7",
        "Quote 8",
        "Quote 9",
        "Quote 10"
    ];
    let index = Math.floor(Math.random() * quotes.length);
    document.getElementById('randomquote').innerHTML = `<p class="my-fancy-random-quote">${quotes[index]}</p>`;
});
</script>
3

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

4

Hey @KBConcepts, I’m not sure if I understand what you would like to achieve. :thinking:

5

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.

6

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
7

No, you were not :rofl:

But no worries @PeteSharp has given his 2 cents on why your approach might not be the best for SEO / Ranking reasons.

8

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

By the way, made sense to me :joy:

9

The difference between 10PM :sleeping: and 07AM :coffee: :grin:

10

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.

11

Yes, you could.

12

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

13

No :grin:.
If it was as simple as that, all web developers around the world would be jobless. :man_technologist:

14

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

15

That does not change my previous answer. :blush:

16

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

17

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

18

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.

19

:question:

20

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.