- Card images optimized
- New homepage banner images added
- Faster load times on card picks.
- Backend image storage now separated into folders rather than all files in one.
- Due to the change in approach to images, many pages needed updating to work off the right files. All pages should remain functionally the same.
My new source of To-Do’s for this website comes from the helpful folks over at r/webdev. Their feedback has been super useful in approaching this site with fresh eyes, as its been my primary project for the last few months. Today’s update focuses on performance optimization via image compression, and hopefully you’ll notice a slight step up in load-times.
The .jpg card files I harvested from Wizard’s Gatherer page are surprisingly not optimized for the web. I put the pictures (some 20 thousand of them) through a utility to compress them to about 85%. Needless to say, this took forever. Shouldn’t result in any noticeable difference in quality but let me know if you notice anything.
Furthermore, since WordPress likes to dump every uploaded image into massive folders sorted by month, I took this opportunity to sort out the backend organization of pictures. Now they are sorted by set rather than dumped into a single file. In the past, I’ve needed to hone in on a single picture to fix a broken image or such, but it was a nightmare even with using FTP due to the size of the folder. Now that things are sorted out better, I feel more prepared for fixing small little image problems that crop up.
Unfortunately across the few different pages that display images there are about 5 different approaches that needed to be attended to since they were built under the assumption that all images would belong in the same folder. Master_Stats and Master_Pack are the files that display booster packs and individual set stats respectively. These two were simple as I only needed to point to the new set-specific folder; These pages only show cards from one set so that’s no problem. These two files also cover the All Random (P1P) pack, which benefited heavily from all images being located in the same place. A few extra queries were necessary to determine which set the individual card is from before pulling its image. Ultimately I’m dissatisfied with my reliance on database queries for static information, so on this task I tried out a suite of ifelse statements to decide what folder to pull card images from. It’s not pretty (it’s about 6,000 lines of code) but it works and reduces overall database load.
Once I got everything compressed and uploaded, I ran into some problems. For one, I was dragging all pictures from a file into the compressing software, and then dragging the same pile of pics to WordPress to upload them. I noticed about halfway through that occasionally Finder would deselect some of the files, so I ended up missing card files in the upload. Handily, the stats page for each set straight up displays every card in that set (read: any card that could appear in that set’s packs, some duplication was used for set-hopping basic lands.) so I used them to verify that each set came out the other end of this process unscathed. While doing this, I found a few issues with existing tables. Stuff like MPS Arcbound Ravager finding his way onto the KLD table, DGM having issues with RTR and GTC shocks, SOM block packs didn’t have the working template. These were quick fixes, but also encouraged me to step through each pack and stats page while handling the images.
After all was said and done there was some minor cleanup for the few images I used that aren’t cards. Nothing too interesting happening with this portion. Overall I used three new Plugins on this update:
- Media Library Folders
- WordPress HTTPS
- Query Monitor
I also tried playing around with a Cache plugin to help on loadtimes. This plugin completely bricks the functionality of the site, which I discovered right after sharing this website with a potential future employer in the discussion leading up to a few interviews. Yikes, not my finest hour.
Until next time!