This is a test
Ut cras, mollitia, itaque senectus perferendis, dolorem eget hic? Occaecat dolore eiusmod dolorem dignissim, netus doloribus veritatis at! Molestias proident repudiandae bibendum, aenean natus, mollitia quasi, lorem magnis voluptatibus eligendi. Taciti in nullam facilisis sint nulla exercitationem illo malesuada scelerisque.
Sapien laudantium molestie feugiat ante libero, enim nec, pretium blandit, commodo rhoncus. Voluptatum, lectus! Sapiente quae, debitis dignissimos. Accusantium proin, illo cum. Anim ullamco qui laoreet eu mollitia? Vero recusandae in condimentum condimentum labore parturient vel. Adipisci architecto penatibus aute.
This demo is based on a personal need, and a question asked on the Facebook group — how to load a random image on page reload. I am not a huge fan of this because it uses jQuery, and I will be looking for a vanilla JavaScript solution. Since the JavaScript does not load in live edit or the backend editor, the images will not be visible until you view the live page. Image loading is truly random and may not seem to change every time.
The Recipe
- Add a code block
- Add a call to the jQuery CDN (not sure why the version in Avada doesn’t work)
- Add the Javascript
- the variable (var images) is an image array that allows the random math function to choose from. Use the full URL of the image.
- the .random-bg class can be anything, but it must be the same in the JS and the CSS.
- Add page-level custom CSS
- Assign the class name to the container or column
In the CSS there is a min-height setting so that a column has height, especially in a mobile view. This assumes you have the column set to stretch.
With a gradient overlay
This adds a small amount of code to the script – linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)). Adjust the gradient as needed.
