Rotating images on home page w/ cloud IPS

[fourday]

want to create a rotating images banner on home page.... but I have cloud version and can't figure out best way to use an image directory to pull the images? 

someone helped me w/ code... but again it wants an html photoimagedirectory for it and not sure where to do that in cloud version.

or... if there's a native way, I'm in.   🙂

Thanks for help either way.   Obviously I'm a rookie but will help any place I can pay back.

 

[opentype]

Search for “Slider” on the Marketplace. 

[fourday]

Ok thanks.   I really should have said random image vs rotating.   As in a single large graphic on home page, that can be random.    I don't think Slider can do that but I'll look.   I wish I was good at this stuff... my site would be so much better. 🙂 

 

[opentype]

Code sample for random output in a template:

{{$rand=rand(0,2);}}
{{if $rand==0}}
<img src="https://yoursite.com/your-image1.png">
{{elseif $rand==1}}
<img src="https://yoursite.com/your-image2.png">
{{else}}
<img src="https://yoursite.com/your-image3.png">
{{endif}}

Using that myself on all my community site for just the homepage and just guest visitors, e.g. https://typography.guru/

[fourday]

Thank you very much!   I'll give that a try.

[fourday]

I got this to work with 3 images. So thanks again.   

Hate to push it... but anyone know how to modify code to add 2 more images?   So if I had 5 random images in the code?   I've tried hacking it but it fails each time. 

[Joel R]

Expand your range to rand(0,4) and just add new elseif statements for 2 and 3.  

[fourday]

Thanks @opentype and @Joel R.     I stare at code like the Matrix and I don't even see the woman in the red dress, it just makes my eyes hurt.    Appreciate you guys.

[fourday]

Awesome - works for 5 images now.    I love that part.   

I just have to figure out how to make it work with existing pages.  

Since I'm not a coder, I use the stock editors for the site (WYSIWYG or custom block with a graphic placed in the content portion).  But when I use this code as the content of a custom block, it will display the random images correctly - but the images display at max size only and don't scale at all with the browser window.... just leaves it max size and screws up the rest of the page format.   

I don't understand what I'm doing wrong so I'll keep digging.