• Resolved krischan941

    (@krischan941)


    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.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn Presner

    (@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:

    Customize Self hosted Test not just another fake company

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

    Thread Starter krischan941

    (@krischan941)

    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)

    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)

    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, 12 months ago by Yui.
    • This reply was modified 1 year, 12 months ago by Yui. Reason: formatting
    • This reply was modified 1 year, 12 months ago by krischan941.
    • This reply was modified 1 year, 12 months ago by krischan941.
    Thread Starter krischan941

    (@krischan941)

    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, 10 months ago by krischan941.
    Moderator Kathryn Presner

    (@zoonini)

    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.