So there I was, making a website. Well, actually, I was remaking a website. It was on a drag-and-drop website builder platform, and was being moved to another platform. Why? None of your business, that’s why.

Just kidding. It is because bluehost sucks. A lot. If you have a choice between rubbing a pinecone on your face and using bluehost, choose the pinecone every time. But I digress.

So I was remaking a website using a drag-and-drop tool. There was a problem, though.

The website had pictures. A lot of pictures. Oddly enough, none of them were pictures of me. And they were all named something like this:

12439442.jpg

39503942.jpg

90842249.jpg

This isn’t a problem for the drag-and-drop editor, because it can link to whatever name it generates for the image you upload. But I had to manually find the filenames of over 200 pictures.

I had FTP access on bluehost, and so I could download all the pictures. But that just gives me a folder with 1000 – literally, 1000 – pictures. All named with a bunch of numbers. So scanning through it to visually identify the correct picture would work, but take forever. And I am going to be straight with you, I am lazy. And that just sounded like way too much effort.

What to do, what to do…

So I figured, the website was still up and running. I could just view the source and get the exact filename I needed. That works, but then you have to find the right element – probably inside 10 div elements, because why not – and you have to expand out the DOM tree for every image URL.

Again, it works, but it was still very tedious. It was easy to loose my place in the DOM when getting image URLs, and the UI in the builder for uploading an image wasn’t the snappiest thing ever. If you were perfect and didn’t mess up, you could get a picture done every 30 seconds. But if you are human, your average is closer to 2 minutes.

Again, too much work. Still, it should be easy enough to write some javascript to scrape the image URLs, right? That was what I thought, so I tried it.

This particular website builder uses the same class for all elements of a particular type – like an image, or a slideshow of images. So I could just get all the elements of that class, and find the image URL within.

So I wrote up a quick script in notepad – the boring, native Windows notepad – and ran it in the inspector console. Great, it worked. But the image URLS it gave were a bit annoying.

Instead of getting “55579832.jpg”, I got “dubyadubyadubya.mahwebsite.com/some/path/that/is/way/too/long/oh/my/eyes/55579832.jpg” instead. If you were doing it one-by-one the stuff at the beginning doesn’t matter a ton, but I wanted to make a list of filenames one per line, and mark them off somehow. So I added a substring part to the script to extract the actual filename, after the last /.

But as it turns out, having a bunch of filenames consisting of only numbers next to each other is hard to read. It is very easy to loose your place. And it was a shame, too, because even after all of this, I still had to upload images one-by-one.

Unless…

And then it hit me. The website builder lets you upload multiple images at once, if you do a multiple selection in file explorer. Apparently the format for specifying this is like so:

“filename1.jpg” “filename2.jpg”

So really, it is just a list of filenames with some quotes tacked on. And I already had a list of filenames, so maybe… if I just had the quotes there… I might actually be able to upload the entire image list at once.

So I tried it. Again, I was lazy. I could have written another script to do the necessary substitution, but that also seemed like a lot of effort. So I tried using find-and-replace instead. Using a regex match for newlines, I was able to replace the newlines with quotes, and this actually made it match the format exactly. One final copy-and-paste later, and I was uploading tens of images at once.

So here was the new process: on each page with images (most pages had a slideshow), I would run the script, copy-and-paste the filenames into a text file, run find-and-replace, and finally, use that output in file explorer to select all the images filenames for that page.  The end result is that it took about 2 minutes to upload all of the images on any given page.

So be lazy, my friends. Or don’t. I am too lazy to care.