hey, i currently use your degenerate 4chan theme and LOVE it. i was wondering if there was a code to make the banner is different on every refresh? does that make sense? i've made custom ones i'd like to cycle thru and make it look like og 4chan but i'm a code noob. sorry if this is worded weird, lol thank you so much in adv
Yeah, this is definitely possible and fairly easy! I’ll explain how to do it.
First, you’ll have to upload your images onto some image hosting site like Imgur. Tumblr also has a file-hosting facility in the theme HTML customization page, if you click the options button and then “Theme Assets”, although I find it a bit annoying to use.
Next, locate this part of the HTML:
<img src="{image:Banner}" class="header--banner" />
This is the image tag that’s in charge of rendering the banner image. You can see that right now, it uses the image at {image:Banner} which is a Tumblr-specific code for letting users upload this image through the Tumblr interface. However, because you want this image to be random upon refresh, you will want to remove that. You’ll also give this image tag an ID so it will be easy to manipulate it through JavaScript later. So it should now look like this:
<img class="header--banner" id="banner" />
Now, scroll all the way down to the JavaScript portion of the theme. Identify the part of the code that starts with
window.addEventListener("load", function() {
The code that occurs in this block is what happens when the page loads. Since you probably want to put the image in before anything else happens, we will write the new code at the beginning of this block (so before the decodeLinks() part of the code).
First, you’ll want to create an array of the image URLs that you created for the banners. An array is basically a list of things, except the word “list” has special meaning in computer science. It should look like this:
let bannerURLs = [ "URL", "URL", "URL", "URL" ];
Where, of course, each "URL" is replaced with one of your banner URLs. You need the quotation marks around each, and make sure these URLs all start with https instead of http, since the images may not load over http.
Now that you have a variable storing all the URLs, you need code to randomly select one of them. Here is how we will do that:
let index = Math.floor(bannerURLs.length * Math.random());
Math.random() returns a random decimal between 0 and 1. We multiply that by bannerURLs.length, which is the number of URLs that you put in the array, to get a random decimal between 0 and that length, and then floor it to get a random integer between 0 and that length. This allows us to specify which of the URLs to use.
Next, you will set the URL of the image like this:
document.getElementById('banner').src = bannerURLs[index];
You’ll recall that we set the ID of the image tag to banner previously. That’s why we can get it with getElementById now. You’ll also recall that we removed the src tag previously, but we’re setting it now with our randomly-chosen URL. This is selected by bannerURLs[index]. If index is the integer n, then bannerURLs[index] is the nth URL in the array bannerURLs.
And you are done. As always, let me know if you have any questions!
gummygunk
dailybridgerton
vaporwave
titsay
annaxmalina
kaledo-art
stormborns