«

»

Oct 03

Making a Random Image Banner

So noticed how the banner at the top chnages? want the plugin?

Well your out of luck as i didn’t make a plugin but this guide will show you can make it yourself. i should point out that while this code is ment for child themes you can apply it to brand new themes if you know where you put the code or even more than the main banner

 

the code itself is javascript based. this is a double edge sword as Javascript can be disabled and some users will have javascript disabled because of pop-up, particular some retarded animal butt-fucker came up with the concept of having a pop up that runs a loop which always calls a javascript alert….which freeze your browser (retarded because what can the browser do now that you freeze it every moment aside to get the user to call a number you show. animal butt-fucker because these people are almost as bad a trolls…..and i can’t just say butt-fucker because i’m ok with homosexsuals).

However this modification does not remove/disable WordPress’s default banner so if the Javascript doesn’t run you still have the default banner to fall back on

 

Step 1 – Make a Child Theme

I’m not going to explain this part as WordPress does good job doing this themselves so read up and when your done come back. otherwise you can edit an existing theme but keep in midn that you may loose the code if the theme is updated

 

Step 2 – Locate the Image Code

First off we need to find which page displays the image and to do this we need to know how to identify the code.

Using Google Chrome, Right Click on the the image and go to Inspect Element. you could use the shortcut key but it wont go to the HTML which shows the image which means you have to be a bit more searching.

If you are lucky you’ll find exactly what you want, a <div> element and using Chrome you’ll get the element highlighted so the entire banner should be highlighted in this case. if your unlucky the image may actually be an <img> element, this is bad when you inspect the element you might get the <div> but have to hunt around a bit more for the <img>

Another problem you can come across is that there is a <div> element that’s sitting ontop which means there may be a bit of hinting If you do need to do some hunting then i would suggest you get the name of the image file you are expecting to appear

So now you should have something like this

Locating div

Locating the Banner in HTML

As you can see within the red box is my banner and i know this because of the name of the image in the CSS’s background attribute1. now from here we want something unique to the element itself which will help us find the code. i know of no code, or reason, that would dynamicaly generate every letter of a class for an element without it being random so in this case we are going to look for the class name site-name half left

 

Using something like Notepad++’s find tool we want to search all the files in the theme folder for the text header-image. when using Notepad++ we can also filter the files searched by using *.php. in Notepad++ i got these results.

Locating Code

Locating Banner in code

My Serach Results tell me that there is only 1 file with that class name called header.php and the class name itself is on line 30.

you may be thinking “what about the CSS Style?” Well in a number of themes i have played there is a .php file in the inc folder called custom-header.php which, with the theme i am currently using. the CSS is found there. this is how i assume WordPress allows you to assign your custom banner by using this line of code

<?php echo get_header_image(); ?>

We don’t want to edit this as my javascript code changes the default without needing to chnage this code as it can be different between theme. the theme i currently use utilizes a CSS rule but another theme i played around did this

<div id="headimg">
    <?php if ( get_header_image() ) : ?>
    <img src="<?php header_image(); ?>" alt="">
    <?php endif; ?>
</div>

and my code, while not perfect, can be adjusted much easier to account for the above.

 

Step 3 – teh codez

now we insert out Javascript. with the theme i am using i am going to add the code right after the <header> is closed because it works for me. if it doesn’t work for you try putting it futher down or even in the footer (generally this is where the “Proudly powered by WordPress” stuff is found. just use what has been explained in Step 2 to locate the footer but generally this is footer.php). the idea is that the javascript is called after the browser has made the banner image.

now the first thing we want to do is alter the element with out image by giving it an id. if it already has an id you can skip this. valid HTML (and generally any programming) requires unique id’s2. with that said i alter my line 30 to look like this

<div id="header-image" class="site-name half left">

and at the end of line 36 i make a new line and add the following

<?php    $imageurl = wp_upload_dir() ?>
<script>
    var id = "header-image";
    var attribute = "style";
    var bannerDir = "banners";
    var imgArray = new Array();
 
    imgArray.push("Devblog-amaranto1.png");
    imgArray.push("Devblog-aoishiro1.png");
    imgArray.push("Devblog-hack1.png");
 
    var selection = Math.floor(Math.random() * imgArray.length) + 0;
 
    switch(attribute)
    {
        case "img":
            document.getElementById(id).src= "<?php echo esc_url($imageurl["baseurl"]) ?>/"+ bannerDir +"/"+ imgArray[selection];
            break;
 
        case "style":
        default:
            document.getElementById(id).style.backgroundImage = "url('<?php echo esc_url($imageurl["baseurl"]) ?>/"+ bannerDir +"/"+ imgArray[selection] +"')";
    }
</script>
So how does it work?

  1. we get wordpress’s upload folder and store it in a variable. you can change this to any folder you like but keep in mind that using wp_upload_dir() means you also get the web address and the directory in the array. you’ll need one or the other
  2. we store the id we gave to our element
  3. we store what we are altering. if the banner is set in CSS to a <div> then you want to alter the style attribute so set this varibale to style. if the banner is a <img> then we want to alter the src so set this varibale to img
  4. we store the name of the folder that will contain our banners. you can chnage this if you want
  5. we create an empty array that will store all our images
  6. we now populate the array. if you want you can create a method to locate images dynamically rather than hardcoding it like i have but this way i know exactly what i am doing
  7. we then get a random number between 0 and the number of images we have in the array
    1. Math.random() will generate a random number between 0 and less than one (ie. 0.456123)
    2. we then multiply that by the number of images we have. this means our random number will be anything between 0 and (in my example) less than 3
    3. Math.floor() rounds our new number down to the nearest full number. if we get 1.0325 it’ll be 1, if it’s 2.9999999999999999 it’ll be 2
    4. we then add what the starting number of our random number range, in this case 03 now we will have a number between 0 and 2
  8. using a switch statement we change the style or the src attribute of our element. a switch...case is a shortcut to a huge if...else

[collapse]

Now if we save and load up the page (maybe clearing the browser cache) we see this

Demo

Demo

as you can see my original image was still added but using javascript (and a tiny bit of php) we have added the style we have made another image appear isted. if it was an <img> then we don’t have this but if Javascript was disabled we will still keep our original image specified in WordPress.


 

1: the reason why it’s cropped-cropped- is because in another theme i was messing around with for some reason my banner was being cropped and at first i thought it was the image but it wasn’t

2: with the exetion to some tricks involing forms

3: it’s kinda pointless to add 0 but the formula can be reused whenever you need a random number between 2 numbers

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>