Random intro image

[Arthur]

@yaradria @michael_vvc just came across this (know its an old question) –
one way to do this is as follows

Make sure intro image is ON.
into 'custom HTML at bottom', you can add/edit the following script
(change '34' to relate to your homepage ID)
(add your image urls from media library into the var of images...

<script>
var images = ['https://yourwebsite.com/image-url', 'https://yourwebsite.com/image-url-2', 'https://yourwebsite.com/image-url-3', ];

var randomImage = Math.floor(Math.random() * 3)

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(type == "page" && obj.id == 34){
jQuery(".mediawrap").css("background-image", "url('" + images[randomImage] +"')");
} else {
jQuery(".mediawrap").css("background-image", "")
}
});
</script>

[Richard]

Awesome thank you @Arthur ! 💥

[Loris]

Hi @Arthur, this doesn't work for me.
I have change the homepage ID, but none of images are showing up.
Links to my images seem to be good… I don't know how to solve that.
Any idea ?
Thanks for helping
Loris

[Richard]

Dear @Loris

Could you please post a link to your website with 'random intro image' applied to better inspect it 🌝

---

Best wishes & talk soon

Richard

[Remco van Dun]

@Richard said in Random intro image:

random intro image

Hi @Arthur and @Richard,

I've tried a lot but cant seem to get the page ID right? Am i not seeing the right ID perhaps?

When i was messing around and I changed the number to 105, 81 I was able to apply it to my background... so I felt like it at least worked.

[Remco van Dun]

@Richard

My website is www.remcovandun.nl
Can you see if anything's wrong?

[Richard]

Dear @Remco-van-Dun

Do you currently have any intro image's chosen or is this the issue; That you cannot see your Intro image that you have chosen.

Do you have functional issue with your Intro? or you just wish to apply to 'Random Image code' properly.

Just wish to clarify as there are a few sides to this thread 🌝

---

Have a wonderful day & Best wishes

Richard

[Remco van Dun]

Thanks for the reply @Richard

I currently have 3 images set and intro feature is turned on / added custom html at bottom.

I think I can't find my correct page ID for it to work (could you)? While I was looking for the right ID found 105, 81 which I also tried separately, but together they made my page bg change. So the code seems to work but just not where it's supposed to?

[Remco van Dun]

With some help of a friend I've found a (hacky) way.
Although it requires a fully transparent .png to be set in your customize > intro
Because without a file, it won't trigger the intro feature? And a normal image will of course cover up your random set intro images...

in Custom HTML at bottom:

<script>
 
var images = [
        'http://yourwebsite.com/image1.jpg', 
        'http://yourwebsite.com/image2.jpg', 
        'http://yourwebsite.com/image3.jpg' ];
    
var randomImage = Math.floor(Math.random() * images.length)
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        
if (obj.id == 1) 
{
var mediaWrap = jQuery(".mediawrap");
mediaWrap.css("background-image", "url('" + images[randomImage] +"')");
mediaWrap.css("background-size", "cover");
}  

    });
</script>

[kalamakumaran]

@Remco-van-Dun

Cheers!

[Richard]

@Remco-van-Dun Thank you! 💥