Tell us what you are trying to do?
I'm replicating a client's website. I want to create random header images that change when the page refreshes. I have created a custom post type for each image (6) with appropriate links to images and created a view. I'm using Astra theme & Elementor and came up with a few ways that might work.
1 Astra custom layout with wp_head hook.
RESULT: If I leave the shortcode in the editor, I get an image above the navigation, with no CSS. If I go to into Elemetor and add the shortcode within the header background image area in the shortcode widget, it does nothing.
2 I tried calling dynamic a background image in Elementor, that did nothing.
3 Add javacript to header with image links... here's what I tried, from a google search:
tried first: <script>
var bgs = [
'hidden link',
'hidden link',
'hidden link',
'hidden link',
'hidden link',
'hidden link',
'hidden link',
'hidden link',
'hidden link',
];
window.onload = function () {
var n = Math.floor(Math.random()*bgs.length);
document.body.style.backgroundImage = 'url(' + bgs[n] + ')';
}
</script>
no results
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
var loading = function () {
var totalCount = 6;
var num = Math.floor(Math.random() * totalCount) + 1
document.body.background = 'images/' + num + '.jpg'
}
</script>
no results
CSS I used for my view of random header:
.eye_rndm_background {
width: 100%;
height: 50vh;
background-repeat: no-repeat;
background-size: cover;
background-color: #DBDBDB;
background-position: center center;
overflow: hidden;
}
Is there any documentation that you are following? I found javascript from a search that I tried also... sorry, not a developer and fumbling more than I should.
Is there a similar example that we can see? hidden link
What is the link to your site? here's what I'm getting as a result from the custom layout in Astra. hidden link
