Okay, so I wanted to make a cool banner for my website, you know, something that really pops. And I thought, “Hey, why not have the date displayed right there on the banner?” I’m calling it the “yinlin banner date” thing. Sounds fancy, right?
First, I messed around with some image editing software. I’m no pro, but I know how to slap some text on a picture. I picked a background image I liked – something kinda abstract and colorful.
Then came the tricky part: getting the date to show up automatically, and update itself, every single day. I don’t wanna be editing the banner image every morning, no way!
So, I did some digging. Turns out, there are a few ways to do this. I started exploring some simple HTML and JavaScript.
My First Attempt (The JavaScript Way)
- I created a basic HTML file. You know the drill:
<html>,<head>,<body>. - Inside the
<body>, I added an<img>tag for my banner image. Gave it an ID, like,<img id="myBanner" src="*">. - Then, the magic – I added a
<script>tag. Inside that, I wrote some JavaScript to grab the current date. - I used this: let currentDate = new Date();.
- Then formatted it nicely: let formattedDate = *();. This gave me something like “10/26/2023” (or whatever the date is, obviously).
- Now to attach this to the image, I initially failed and felt so bad.
The first attempt didn’t work well, cause I am not very familar with JavaScript and HTML. The date can be shown, but not on the image. It just insert the date under the image…
I knew I messed it up somewhere, and I was going to find another way.
Server-Side Scripting (The way I actually use)
I use a server-side language (I found some PHP code snippets online), that actually generates the image on the fly, with the date embedded in it.
- First install the enviroment for PHP, including a server like Apache.
- Create an image.
- Find some PHP code.
- It loads my background image.
- It gets the current date.
- It adds the date text to the image, in a nice font and color I chose.
- And then, it sends the whole thing to the browser as a .png image.
- I then saved this file as something like “*”.
- And in my HTML, instead of linking to a regular image file, I linked to the PHP script: <img src=”*”>
And that’s it! Now, whenever someone visits my page, the server runs the PHP script, creates a fresh banner with the current date, and sends it over. Every day, it’s a new banner, automatically! I’m pretty proud of myself, even though it took some trial and error. Feels good to have figured it out!
