How to show a random image?

Using Neos & Flow Frontend & Integration
1

Hi!

I would like to have some kind of header image on my site where I show a different image for every request. My idea is to have the editor upload these images to an specific asset collection in the Neos backend.

My question is, how do I get a random image out of this collection?
Something like ${q(site).assets('headerimages').random().get(0)}?

Is there a better way?

2

Isn’t that contradicting the Website caching?
Because the site isn’t created every time new when a browser send a request.

3

So showing a random image on every request is not possible?
That would be a sad.

Then I would need to do it with Javascript. So, how would i get all the images from a specific AssetCollection?

4

Hi Florian!

Surely it is possible. Just set cache mode to uncached and use one of the random EEL helpers like this one: https://neos.readthedocs.org/en/1.2/Appendixes/EelHelpersReference.html#math-randomint-min-max or https://neos.readthedocs.org/en/1.2/Appendixes/EelHelpersReference.html#array-random-array

Even if there was no such helper, if would have been very easy to create your own.

5

Hi @dimaip!
Could you guide me a little bit more in the right direction? I am just beginning Neos Development.

  1. How do I get the assets from a specific asset collection?
  2. Do I need to make the whole page uncached or just my special image element?
6

Hey,
maybe smth like this would work, given you store your image nodes in headerimages contentcollection on your root site node:

yourRandomImage = ${Array.random(q(site).children('headerimages').children().get())}

Only the element that renders your image has to be uncached.