At the public library where I work, I use a software product called Porteus Kiosk for our catalog computers. It’s a free, Linux-based operating system that makes it easy to lock down a computer and turn it into a single-purpose device. Check out my previous blog post for more on that.
One of the many features Porteus supports is the ability to set a webpage as the computer’s screensaver. I have seen other libraries utilize the screensavers of their catalog computers for event promotion and such, so I decided to do the same.
I knew what I wanted to do:
- Retrieve all WordPress posts that have a specific category assigned (our library uses a WordPress website). This could be done using the WordPress PHP API because the screensaver webpage is hosted on the same server as the library website.
- Get the featured image URL of each post. These are the images that will appear in the screensaver’s carousel.
- Display the featured images on a webpage in a slideshow that advances automatically every 20 seconds using JavaScript.
Writing the WordPress PHP code
I had heard of programmers using ChatGPT to help them write code (or do it for them, even). I started by asking ChatGPT:
“Give me some sample PHP code that retrieves all WordPress posts tagged with a specific category.”
Its response was to give me code that accomplished this utilizing WordPress’s REST API, along with a seemingly detailed and authoritative explanation of how the code works. It really felt like I was reading something written by a human being on a site like Stackoverflow. However, I didn’t want to use the REST API, so I said,
“What about without using the REST API?”
It inferred what I meant based on the context of our conversation. It revised its code sample to use the WordPress PHP API, which happened to be what I was looking for. However, the code didn’t work. After a lot of troubleshooting on my part, I discovered why. ChatGPT’s code used an incorrect keyword in the WordPress query function call—“category” instead of “cat” to represent the database ID of the category. I told ChatGPT its mistake,
“You were wrong about how to query based on category ID. The array key is "cat" not "category".”
It quickly apologized, told me I was correct, provided the corrected code, and apologized once more. Would it have responded in the same way if I said it made a mistake when it really hadn’t?
Writing the JavaScript slideshow code
In a new chat conversation, I asked,
“Write Javascript code that generates a slideshow from a list of images”.
And it did! But it didn’t quite give me what I wanted. The slideshow I had in mind was one that advanced automatically every 20 seconds. The code ChatGPT generated had “previous” and “next” buttons for advancing the slides. So, I provided the following instruction,
“Remove the next and prev buttons. The slides should automatically change every 20 seconds.”
And it did exactly that! After some work on my part to insert the slider image URLs retrieved using the WordPress code, the slideshow actually worked!
The results
Once I had a functioning event slider carousel up and running, I worked on making the web page look pretty (*without* any help, thank you) by adding the library’s logo, a nice background (as it turns out, photos of bookshelves tile very nicely), and a large heading so patrons know what the computer is for. You can see the final result here:
http://mnl.mclinc.org/opac/screensaver/screensaver.php?branch=MNL
No comments:
Post a Comment