Random Background Image

[Chackmool]

Hello, I have three distinct background images: back_1.jpg, back_2.jpg, and back_3.jpg.

I’m wondering how I can make it so that each time the page loads, it displays a different background randomly using NODEJS.

I was contemplating something like this:

<div style="background-image: url(back1.jpg);"></div>

However, how could I create an array, randomize the selection, and then apply and display the randomized background?

Any help will be very appreciated.

[Chackmool]

@ben Any idea?? You always have a solution to my problems…

[Teodor]

@Chackmool

However, how could I create an array, randomize the selection, and then apply and display the randomized background?

hi there, your question actually contains the answer.

1. Use the array component to store the 3 images;
2. Use the randomize formatter to randomize the array;
3. Get the 1st image from the randomized array and use it in the dynamic styling for your backgorund;

Example array:

<dmx-array id="arr1" dmx-bind:items="['img1.jpg', 'img2.jpg', 'img3.jpg']"></dmx-array>

The code looks like:

dmx-style:background-image="'url(/assets/img/'+arr1.items.randomize().top(1)+')'"

[bpj]

@teodor’s approach is great but you can also do it pre-render (to prevent possible flicker after render but before App Connect gets started) if you are using NodeJS:

<% var randomNumber = Math.floor(Math.random() * 3) + 1; %>
<div style="background-image: url(/assets/img/back<%= randomNumber %>.jpg);"></div>

[Notum]

@Teodor Tried to replicate your code but with static image and it’s not working:

<div class="container-fluid" dmx-style:background-image="'url(https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp)'"></div>

[bpj]

Can your server handle webp? There was a discussion here:

Browsers always ignoring webp version of image

Hello all, I have the below code for one of my images and hope that most modern browsers would use the webp version so that the image is optimised but on every browser it just uses the fallback png version. Any advice on why this could be? <picture> <source srcset="/assets/images/The Real Life Money Promise.webp" type="image/webp"> <img src="/assets/images/The Real Life Money Promise.png" class="img-fluid" id="i_howdoesitwork_rlmpromise" alt="Real Life Money Promise Image"> </picture> …

[Teodor]

@Notum

@Teodor Tried to replicate your code but with static image and it’s not working:

<div class="container-fluid" dmx-style:background-image="'url(https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp)'"></div>

Works perfectly fine.
Are you sure your div has some height set at all so you can see the background?

[Notum]

I’ve just created blank project to test your solution.
Page is 100% empty.
Here is page code bellow:

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" -->

<div class="container" dmx-style:background-image="url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp')"></div>

<meta name="ac:route" content="/">

[Teodor]

Well … if your container has a height of 0px it would be extremely hard (impossible) to see its background

[Notum]

I’m sorry, but I didn’t get it.
I’ve added Heading and changed to fluid and still the same.

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" -->
<div class="container-fluid" dmx-style:background-image="'url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp')'">
    <div class="row">
        <div class="col">
            <h1>Fancy display heading</h1>
        </div>
    </div>

</div>
<meta name="ac:route" content="/">

[Teodor]

this:

dmx-style:background-image="'url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp')'"

should be

dmx-style:background-image="'url(https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp)'"

[Notum]

Thank you!
Now I hate CSS even more.

[Chackmool]

I follow your example

But when I run and inspect get this.

Any help??

[famousmag]

@Chackmool

I have three distinct background images: back_1.jpg, back_2.jpg, and back_3.jpg

1. Have you updated in your code the image names?
   dmx-bind:items="['back_1.jpg', back_2.jpg', 'back_3.jpg']"

2. The images directory is at assets/img folder? Or you have to change it depending on your images location?

[Teodor]

Well did you just copy my code without actually applying the formatters using the UI? If that’s the case the formatter js include is probably missing.

[Chackmool]

you was right.

My only problem is now the code is like this

The &quot: on the code is normal? or I need to scape them in other way??

Thanks a lot

[Apple]

Isn’t missing a [0] to get the first element of the array? Or is .top(1) returning a single object instead of an array with a single object?

[Teodor]

Well top(1) is returning a single item. The code i provided is 100% correct

[Chackmool]

Is correct this one but as you told me, need to be added via the interface.
Thanks

[Apple]

Well top(1) is returning a single item. The code i provided is 100% correct

So it’s returning an array, it shouldn’t be possible the code you wrote! It’s missing the [0] to select the 1st element of the array:

Why it works without [0] is a mystery to me… Where do we stand? Is it ok to teach Wapplers this undocumented “trick”? Or is it better to edit the example?

Maybe Patrick can provide further insight into the behaviour of why your code works when it shouldn’t:

dmx-style:background-image="'url(/assets/img/'+arr1.items.randomize().top(1)+')'"

Seems to me there’s an implicit array to string conversion and it grabs the 1st element of the array, but I don’t know if this is by intentional design