CD Station Renovations

I’m lazy and impatient. When it comes to HTML stuff, I do not want to do things manually if I can help it. I want to automate as much as I can.

I’m playing around with ideas for the CD Station section of my site. The list of albums was boring me immensely and I decided I wanted a splash of colour. How am I going to achieve that? A picture of each album cover rather than the text sounds good.

reac_159_cds

Fuck that. It can stay as text. Unless…

Generating the template and data

I stumbled across a website that is made for creating album collages. It’s called Never Ending Chart Rendering. It’s a pretty cool albeit simple site. One very nice thing is that typing in the name of an album brings up its album art without you having to go searching for it online. I had only a handful of albums where I had to manually paste a URL in so it wasn’t too bad at all.

After a bit, I’ve got a page full of album covers, with a list of each title along the side.

reac_site_finish

You have a few basic options here. Export as a JSON or JPG/PNG. The JSON is indecipherable so I can’t do any magic with that, and exporting to JPG/PNG is just fucking stupid. What happens when I need to add to the page? Import the JSON, paste a new image in, re-save a PNG, run it through Photoshop, then repost the collage? Absolutely not. I need something flexible.

Let’s hang on a second. The ‘Export’ option, I would guess, just takes a snap of the screen for you. The actual raw design data is right on the screen.

reac_inspect_element

I don’t really want the list of albums on the side, but I’m going to keep that option checked because I’ll use the data later. We’ll get there.

<div id="chart-wrapper">

That div above has everything I need in it. Right-clicking and copying the outer HTML and sticking it in Notepad++ should do. I’ll also grab the CSS while I’m here. Checking the page source, all the CSS has been minified and thrown on the first line which makes my life significantly easier. Throw that into a CSS beautifier and we’re good to go.

After stripping out a bunch of crap I didn’t need, I’m left with this.

reac_prototype_cds

This is no good! Each album cover has to be fetched from another website. That’s hundreds of outgoing requests so the page will take FOREVER to load. I need to find some way to pull all the URLs from this file I have, download them as PNGs, and rename them at the same time.

Paging this gist from kndrio. Given a CSV of the format

(image title),(image url)

I can do this just fine. I just need to convert the HTML I stole acquired into this format. I’m going to use a couple of find-and-replaces to get some data together.

Creating the CSV

Stripping the HTML out gives me 2 lists.

reac_npp_lists

I’m almost there! Just need to convert the right hand list of artists into suitable filenames. Easy enough with a few find-and-replaces to get shot of punctuation, converting spaces to underscores, and convert the lot to lowercase. 2 minute job!

reac_excel

I just have to export this to a CSV and I’m ready to push forward.

Mass download!

I had to tweak the gist I mentioned before just a tad so I could use it with Python 3.x and my files would be named correctly. Run that with a simple

python image_downloader.py

and I have hundreds of pictures in a folder, correctly named. This has saved me hours of looking up album art and saving it in the correct format.

…. However, I always like to edit my pictures before I upload them. Par for the course is to add a RGB over the top (a Photoshop fill layer composed of one red, one green, and one blue pixel stored as a pattern) and whacking the saturation to 100%. Now, I don’t want to have to manually edit hundreds of pictures because that will honestly drive me insane. I need to batch these too. :(

Mass edit!

I just need to create an action - mine was pretty simple.

reac_action

File > Automate > Batch flew through the lot with this action in less than 2 minutes. Look how ugly my pictures look now?

reac_postaction

Just how nature intended.

Page renovations

Right, now to stick all of those pretty new files onto a page. This was just a case of reworking the CSS from before slightly to work with my site.

Cleanup

Well, I won’t lie, that was a bit of a faff. I’ve wanted to do something a bit more glamorous with the CD Station for a while but simply did not have the willpower to find, download, and edit so many photos. A bit of poking around in a site’s source code mixed with a bit of Notepad++ wizardry, a Python script, and a Photoshop batch operation sorted the lot out for me.

Now that I know that something like this can be achieved pretty painlessly, it makes me want to jush up the Playstation Portal with game covers. Or Magazine Mayhem with magazine covers. Something for me to sit on.