Random header image on page (re)load

Resolved krischan941
(@krischan941)

1 year, 10 months ago
I want my header image to change randomly when (re)loading the website. I try to accomplish this using javascript:
https://goonlinetools.com/snapshot/code/#k0e5gmzjghp0cxxhtp5jc
I call this script in the head section using “insert headers and footers” plugin. (Is this the correct way?). It doesn’t work so far.
The code is from https://codepen.io/monicams/pen/rVNKVN and slightly adjusted.
I refer in the script the css class “background-image-random” which I assigned in the “cover”-block in Gutenberg.
Any hints are appreciated or a better way to accomplish the desired goal. Many thanks.
- This topic was modified 1 year, 10 months ago by krischan941.
The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Moderator

(@zoonini)

Hi there! Twenty Twenty-Two is a new theme designed especially to work with the new Full-Site Editing (FSE) tool. You can learn more about it here:
https://wordpress.org/support/topic/support-resource-for-twenty-twenty-two/

If you want a random header image, I would probably suggest using a non-FSE theme that supports headers in the Customizer instead. You can then use Core’s built-in header randomization feature (under Appearance > Customize > Header), with no need for custom code. Here’s what the setting looks like:

That’ll be quite a bit simpler for you, I think!

Thread Starter

krischan941

(@krischan941)

1 year, 10 months ago

Thank you for your answer but I’d like to stay with Twenty Twenty Two if possible, I got used to it and really like it after spending time with it. It is my first WordPress Project so I don’t know any other Themes.

Moderator

Kathryn Presner

(@zoonini)

1 year, 10 months ago

I understand!

In that case, if you want help with your custom code you might want to try posting in the Developing with WordPress forum:

https://wordpress.org/support/forum/wp-advanced/

Thread Starter

krischan941

(@krischan941)

1 year, 10 months ago

Thanks for the hint. I played around and got it to work! The actual script:


<script>
window.onload = function () {
    var header = document.getElementById('random_header_image');
    var pictures = new Array('https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_06_400px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_05.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_04_500px-scaled.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_03_500px-scaled.jpg','https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_02_400px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_400px.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
        header.style.background = 'url(' + pictures[chosenPic] + ')';
    }
}
</script>

There was a typo in “getElementByClassName” which is correct “getElementsByClassName”. But that doesn’t work either. You need to take “getElementById”.
So I went to the Editor, deleted the cover block, created a custom html block


<div id="random_header_image"></div>

and customized the css


#random_header_image {
	background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-position: center center;
	background-repeat: repeat-x;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	box-sizing: border-box;
	min-height: 400px;
}

Now it works as expected except on mobile phones, the images don’t scale. Have you an idea how to solve that? Thank you

This reply was modified 1 year, 10 months ago by Yui.
This reply was modified 1 year, 10 months ago by Yui. Reason: formatting
This reply was modified 1 year, 10 months ago by krischan941.
This reply was modified 1 year, 10 months ago by krischan941.

Thread Starter

krischan941

(@krischan941)

1 year, 8 months ago

For the sake of completeness:
I modified the script so it creates an img-element inside the div id=”random_header_image” – element.
The code looks now:

<script>
window.onload = function () {
	var elem = document.createElement("img");
	elem.setAttribute("id", "random_header_img");
    var pictures = new Array('https://storch.watch/wp-content/uploads/2022/06/header_edit4_06_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_05_500px-scaled.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_04_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_03_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_02_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_500px-scaled.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
		elem.setAttribute("src", pictures[chosenPic]);
		document.getElementById('random_header_image').appendChild(elem);
    }
}
</script>

Personally I could better treat the img-element in css than editing the div id=”random_header_image” – element as background-image in css and got it to scale as expected and stay centered on all devices.

This is my css:

css of surrounding div with id “random_header_image”:

#random_header_image {
	justify-content: center;
	align-items: center;
	padding: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	display: block;
	height: 400px;
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
}

css of img-element with id “random_header_img”:

#random_header_img {       
	object-fit: cover;
	display: flex;
      justify-content: center; 
      align-items: center;
	width: 100%; 
	height: 400px;
	padding: 0 !important;
	animation: fadeIn ease 4s;
	-webkit-animation: fadeIn ease 4s;
	-moz-animation: fadeIn ease 4s;
	-o-animation: fadeIn ease 4s;
	-ms-animation: fadeIn ease 4s;
}

This reply was modified 1 year, 8 months ago by krischan941.

Moderator

Kathryn Presner

(@zoonini)

1 year, 8 months ago

Thanks for sharing your code in case it helps others!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Random header image on page (re)load’ is closed to new replies.