Random intro image

[michael_vvc]

… was looking for this feature as well. would be great to have this option in the future :crystal_ball:

[ecoistic]

I would also love this option. Would definitely pay for this feature.

[l_s]

Any news on this topic? I need to display a random line of text (out of 5-7 options). Any input would be much appreciated!

[Richard]

Dear @l_s

At this time, still not possible sorry, apologies for the inconvenience.

This is possible however with the use of Custom JS within "Lay Options- Custom CSS & HTML"

The 7 lines of text would be all loaded, but be invisible "opacity:0".

The Code would choose one of these seven texts at random and give it a class making it visible to the user 'opacity:1'.

Here is some reference to get you in the right direction, I sincerely hope this helps you :)

https://laytheme.com/documentation.html#custom-javascript
This concerns how to implement JS into your Lay Theme site using 'New page events'.

Remember when using code off the internet to change the common '$' to 'jQuery'.

https://www.w3schools.com/jquery/html_addclass.asp
This concerns the 'addClass' function in jQuery

https://stackoverflow.com/questions/3614944/how-to-get-random-element-in-jquery
Getting a Random Class.

Also regarding the 'opacity' function of CSS you may need the help of this:

https://laytheme.com/documentation.html#custom-css-styling

If this all proves to much, seeking the aid of a developer for this task is an option.

Good luck and best wishes,
As always thank you for using Lay Theme.

Have a wonderful day, sincerely
Richard

[Arthur]

This post is deleted!

[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! 💥