For a friend’s memorial I signed up to make a batch of images into a slideshow. All I wanted was the Simplest Possible Thing: a web page that would cycle through a batch of images. It’s been a while since I did something like this, so I looked around and didn’t find anything that seemed simple enough. The recipes I found felt like overkill. Here’s all I wanted to do:
- Put the images we’re gathering into a local folder
- Run one command to build slideshow.html
- Push the images plus slideshow.html to a web folder
Step 1 turned out to be harder than expected because a bunch of the images I got are in Apple’s HEIC format, so I had to find a tool that would convert those to JPG. Sigh.
For step 2 I wrote the script below. A lot of similar recipes you’ll find for this kind of thing will create a trio of HTML, CSS, and JavaScript files. That feels to me like overkill for something as simple as this, I want as few moving parts as possible, so the Python script bundles everything into slideshow.html which is the only thing that needs to be uploaded (along with the images).
Step 3 was simple: I uploaded the JPGs and slideshow.html to a web folder.
Except, whoa, not so fast there, old-timer! True, it’s easy for me, I’ve maintained a personal web server for decades and I don’t think twice about pushing files to it. Once upon a time, when you signed up with an ISP, that was a standard part of the deal: you’d get web hosting, and would use an FTP client — or some kind of ISP-provided web app — to move files to your server.
As I realized a few years ago, that’s now a rare experience. It seems that for most people, it’s far from obvious how to push a chunk of basic web stuff to a basic web server. People know how to upload stuff to Google Drive, or WordPress, but those are not vanilla web hosting environments.
It’s a weird situation. The basic web platform has never been more approachable. Browsers have converged nicely on the core standards. Lots of people could write a simple app like this one. Many more could at least /use/ it. But I suspect it will be easier for many nowadays to install Python and run this script than to push its output to a web server.
I hate to sound like a Grumpy Old Fart. Nobody likes that guy. I don’t want to be that guy. So I’ll just ask: What am I missing here? Are there reasons why it’s no longer important or useful for most people to be able to use the most basic kind of web hosting?
import os
l = [i for i in os.listdir() if i.endswith('.jpg')]
divs = ''
for i in l:
divs += f"""
<div class="slide">
<img src="{i}">
</div>
"""
# Note: In a Python f-string, CSS/JS squiggies ({}) need to be doubled
html = f"""
<html>
<head>
<title>My Title</title>
<style>
body {{ background-color: black }}
.slide {{ text-align: center; display: none; }}
img {{ height: 100% }}
</style>
</head>
<body>
<div id="slideshow">
<div role="list">
{divs}
</div>
</div>
<script>
const slides = document.querySelectorAll('.slide')
const time = 5000
slides[0].style.display = 'block';
let i = 0
setInterval( () => {{
i++
if (i === slides.length) {{
i = 0
}}
for (let j = 0; j <= i; j++ ) {{
if ( j === i ) {{
slides[j].style.display = 'block'
}} else {{
slides[j].style.display = 'none'
}}
}}
}}, time)
</script>
</body>
</html>
"""
with open('slideshow.html', 'w') as f:
f.write(html)
I know just what you mean. For myself, I’ve had an account on Dreamhost for a long time and I get email and a web server with it. It seems natural enough to push files to the server when I want to share something. But then, you and I can write programs and HTML pages. Most folks cannot. You’d think that a bit of knowledge in this area would be part of basic computer literacy, but on the contrary, the rise of smartphones, dropbox, social media, etc., have little to do with computer literacy and seem to me to actually work against it.
You ought not need to write any HTML or JS or Python to use a tool like that. I think the barrier to acquiring and using Python to run it is lower than the barrier to push the output to a web server, and that seems strange and unfortunate.
I used to have a slideshow maker that looked pretty good and was easy to use. I uploaded the albums with FTP. I’m not sure if I could resurrect that tool or not – I can’t at this moment remember what it was called.
I find myself using GitHub pages pretty much as you describe. I think that would have worked for you.
That’s a good point. I haven’t looked at GH pages in a while, my recollection is that the cognitive load was higher than 1990s-era web hosting. Has that changed? No reason it couldn’t/shouldn’t.
GitHub Pages is still needlessly complex—the GitHub userbase’s willingness to convince themselves otherwise notwithstanding. I remember an HN comment thread ca 2017 involving various developers junior and senior falling over themselves to talk up GitHub’s approachability for the average user, including non-dev designers. Someone joins in and makes a simple statement akin to, “I’m a designer, and I don’t think GitHub is very easy to use/understand.” The reaction from the community?: ruthlessly downvoted without comment.
Netlify has a drag-and-drop site publisher. Granted, the initiation steps and implicit assumptions about what kind of people are going to use Netlify still makes for a higher bar than it should be as well.
> GitHub Pages is still needlessly complex
Agree. Especially with “needlessly” :-)
Kudos to you trying to do it the right way. Social Media cares not for one’s memorials, only for the collecting and selling of the data by way of memorializing. And yet, that’s the first stop some would make, social media, sadly. Nginx? Reverse-proxy? VPS? Docker? all the brand names a litany of technologies, but no hammers, nails nor screwdrivers.
I’m not gonna say right or wrong, only that there’s value at least knowing about both ways.
On second thought I guess there is at least one aspect of this that I’d make a value judgment about: longevity. If you’re making a memorial for a friend you’d like it to last. My server may not outlive me for very long, but I can reasonably hope the Wayback Machine and its ilk (I wish there were more such ilk!) will. And the Simplest Possible Thing, using the most basic HTML and JS, has the best chance of continuing to work in that environment.
Jon, would something like this fit what you’re looking for? https://tildeverse.org/
That looks fun! I think requiring GitHub raises the activation threshold above what it was for 1990s-era web hosting, but per https://www.infoworld.com/article/2886828/github-for-the-rest-of-us.html that needn’t be the case.
Neocities (and similar stuff like ichi.city) provide pretty straightforward, just-put-your-pages-up-here-style hosting with no ties to CI pipelines or scripted devops deployment gewgaws.
I get the sense that when most people are reminded of Neocities, they see it as a quaint novelty, but the reality is that (esp. lately) there seems to be tons of “organic” use that I keep stumbling across in the wild. It’s like there’s this whole hidden market that no one is talking about, with large parts being Gen Z. I’m not sure where they’re coming from.
I agree but is it really just web hosting? Seems more a gap in the underlying working of the web.
Anyhow for the pesky HEIC formats using Automator to create a quick action is the answer for me
https://www.howtogeek.com/398927/how-to-convert-heic-images-to-jpg-on-a-mac-the-easy-way/amp/
It’s not quite automated but I use Backstretch often for simple sites to size a background image- it does have a slideshow option
https://www.jquery-backstretch.com/
And Vegas is also a decent option
https://vegas.jaysalvat.com/
But all does call for some means to put on the web. GitHub pages is my often go to but that scares folks, perhaps glitch.com ??
I’m with you on the old man web approach.
> GitHub pages is my often go to but that scares folks,
https://www.infoworld.com/article/2886828/github-for-the-rest-of-us.html was aspirational, and written long before GitHub was absorbed into Microsoft, which is the company perhaps best positioned to democratize it. I would love to see that happen.
> HEIC formats
Now that I realize it’s happening I’ve set my phone to just save as JPG.
Thought of this post reading a demo by Tom Woodward to build the image list with php and use Reveal.js to run the show
https://bionicteaching.com/auto-creating-a-reveal-js-slideshow-from-a-folder-of-images/
Does not address of course the limit of needing ftp chops.
The simple web is also fueled by reading other sites / blogs and having them rumble around in memory when you come across something else later that seems related.
Hi Jon,
I faced this problem two or three years ago and found a solution in the free/gratis version of
Firebase (now Google’s).
Once set up it allows you to upload/update a complete static web folder structure simply
from their command line client typing in “firebase deploy”.
In that way I maintain a local copy on my own PC – for readying/testing updates in private, before pushing them on the the firebase server for all to see.
FWIW my site is here:
https://quicklook-606e5.firebaseapp.com/Downloader/Sardinia.html
It’s more tricky but still feasible if you have to receive json/xml from an external site.
Another grumpy old … here Jon.
I guess ‘enterprise’ just sees ‘hard’ and layers it with tech to ‘make it easy’ (for those unwilling to learn html and ftp).
Simple, local and basic is no longer a generally supported use case. Just like this is probably expected to be a JavaScript SPA now, querying a micro service based processing backend running on a Kubernetes cluster. Alternatively a page builder SaaS – or social media. It’s ridiculous.
Drag and drop some files here and it’s online https://app.netlify.com/drop
Hi, Jon. I’m sorry to hear about your friend.
It’s not ideal, but I use Ubergallery https://www.ubergallery.net to generate photo gallery pages dynamically (and it generates the thumbnails as needed). Then, I curl the page to index.html and remove the php stuff so it’s just a static page, something like https://photos.darcynorman.net/365photos/2021/ – and everything runs fine on my old-school Reclaim Hosting webspace too…
So … I have to wonder if we could do the same using a Google Slides, then just share the Slides document. Might obviate the upload.
At the same time, horrified to see a program generating an HTML page. Early on I was under the delusion the PHP might indeed be a Personal Hypertext Processor (seemed a noble goal), but found instead they aimed more to re-invent Java.
Would rather see an HTML page (created in an HTML editor) that loaded a JSON file. The Python script would then generate that JSON (with a list of pictures).
If only there were an actual Personal Hypertext Processor.
It would be nice if Gdrive had a plain-vanilla hosting option but alas, no.
I realize that it’s not the standard nowadays, and I’m not sure what price point people are trying to hit (ie, if you’re looking for free, that’s certainly difficult), but Linodes’s $5/month plan is pretty straightforward.
Single-digit dollars per month should be fine for many people. I think the disconnect here is around what kinds of guardrails are provided, and then to what extent the guardrails preclude the ability to use the web in its simplest and most basic form.
For example, Anil Dash suggested (on Twitter) that Glitch could meet the following need:
a) Given a pile of JPGs in a folder on my computer
b) And a script that will turn those into a simple but effective SPA
c) I want to push the JPGs and the SPA to a web folder
I tried that, and found that I while I could upload individual files using the GUI, the options for bulk upload are:
1) Zip them, upload the zip, open a remote terminal to unzip
2) Use GitHub and sync that way
(Apologies if I’ve missed something, in which case I’ll happily stand corrected.)
These are both great options for me, but likely nonstarters for the persona I have in mind for steps a/b/c.
I think that following Reclaim Hosting’s instructions on installing/using an FTP client, or BlueHost’s web-based FTP, would be a more comfortable path for that persona. I’m not suggesting those long-in-the-tooth methods are the only way, just that they’re the kinds of things that have worked for people and could still in some form.
Ah, gotcha…I see your point now. I somehow missed the main point of the article! (usability for non-Grumpy Old Farts like us) Doh! Glitch does conceptually seem like a good idea for this; perhaps an enhancement to bulk loading options might come along.
Earlier this year I wrote slideshow utility to address the same frustrations .
Repo: https://github.com/dc25/slideshow1
Demo: https://dc25.github.io/slideshow1/?slidesURL=https%3A%2F%2Fdc25.github.io%2Fsample_slides%2Fslides.yml
Writeup: https://davecompton.net/2022/01/28/an-html-css-javascript-online-slideshow-utility.html
I think it’s pretty similar to what you did but instead of inlining the images, the image URL’s (and captions) are read from a .yaml file. The URL of the yaml file is passed as an argument when loading the page. The .yaml file as well as the images should be publicly served.
It’s a little “rough around the edges”. I did not do a autoplay like you have but that probably would be pretty easy to add.
As you pointed out, the biggest obstacle to usage is uploading the images (and .yaml file). I used github for the demo but any service that will statically serve files should do.
Also, perhaps of interest: https://policyreview.info/glossary/independently-hosted-web-publishing
Is the File manager in cPanel (or some other hosting GUI) a simple solution once you have all the files and index.html? That is a pretty handy tool that reminds me of the power of Geocities back in the day, but perhaps you want a straight, command line, local tool to do that pushing rather than a web interface uplaoder?
> straight command line
Nope, a host-based GUI File Manager is exactly what I’m talking about. Of course cPanel and others provide that, of course customers of Reclaim and others can use it.
My sense is that nowadays many never have that experience, but you’ll know better than me how to quantify that. What do you think?