Finding good YouTubers for the site is easier said than done. Every channel needs a careful look, you check the subscriber numbers, the total videos, skim the descriptions, and then hunt for thumbnails that actually grab your attention.
Copying and pasting the stats isn’t too bad, but the thumbnails quickly became the real time sink. Adding a single YouTuber could take 20 to 30 minutes.
Getting the thumbnails involves a few steps. First, you find a good-looking video, copy the link, extract the video ID, and then paste it into this URL:
https://i.ytimg.com/vi/<VideoID>/maxresdefault.jpg
This gives you the full-resolution version, but that’s not the end of it. If you upload these images as they are, the site’s backend automatically crops them, often cutting off half of someone’s face or important text.
I created a template with the correct dimensions and started manually cropping each thumbnail in GIMP. Even so, it remained painfully slow. This is the main reason there hasn’t been much new content added-the workflow just takes too long.
Time to automate
Manually gathering stats and cropping thumbnails takes forever, so it was time to speed things up. I created a tool that scrapes YouTuber info, fetches channel thumbnails, and lets you crop them directly within the WordPress add-post page.
1. Fetching the Data
Luckily, YouTube provides an API (with a free tier) that developers can use: https://developers.google.com/youtube/v3
With it, I was able to easily grab a YouTuber’s details in a single query
https://youtube.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics&forHandle=<channelName>&key=<mySecretAPIkey>That call returns everything needed for the description and stats in JSON format.
From there, all I had to do was take that info and populate the inputs. I set it up to run on a button press ‘Autofill Fields’:
- Enter the channel name.
- Click the button.
- The API call runs.
- The inputs are filled automatically.
- (Bonus: it also grabs the channel ID and stores it for the next API call.)
2. Making a thumbnail scraping tool, and cropper
Next, I created a tool to automatically fetch a YouTuber’s most popular videos and give me the ability to crop them myself.
As far as I can tell, you cannot use the channel name to find these video thumbnails. Instead, I use the channel ID returned from the previous API call to get the most popular videos:
https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=<ChannelID>&order=viewCount&maxResults=5&type=video&key=<mySecretKey>This gives me the five most popular videos, along with their thumbnails. However, the thumbnails are only up to 480×360, so I grab the video IDs and use the URL for the highest-quality thumbnail available (1280×720):
https://i.ytimg.com/vi/<videoID>/maxresdefault.jpgNext, I add the image to a canvas element for cropping. Luckily, YouTube has set the correct header, Access-Control-Allow-Origin: *, so we don’t run into CORS issues and end up with a “tainted canvas.” Once a canvas becomes tainted, the browser blocks you from reading its pixel data, copying it, or exporting it, so you can’t manipulate or save the image from that canvas.
We overlay a draggable box onto the canvas and track when it stops. Then we recreate the image within the confines of that box using toBlob() and add it to a live preview window using blob URLs. toBlob() also has a quality/compression option, which is super useful for keeping file sizes down. I added a quality slider to the preview window to adjust this value.
Once you get the crop and quality you want, you just press the save button on the preview window. It “duplicates” the image by copying the blob URL into a new image element within the saved images panel, where it can be reviewed or deleted before uploading.
I wasn’t sure if the upload button would work. The WordPress post page has a file input for uploading images from your filesystem, but I have an image within the page. After some Googling, it seemed possible to add files using DataTransfer. Thank you, StackOverflow. I had no idea if it would work in my use-case, but I tried anyway.
I iterated over the saved images, turned them into actual JPEGs via File(), and added them to the input. At first, nothing happened. Then I triggered a change event on the file input, which caused the page’s original upload script to run and successfully start the upload.
Lastly, something was missing-sometimes the returned thumbnails weren’t visually interesting or looked low-quality. To fix this, I added a URL input, so you can add any video you want.
Wrapping up
I can’t believe how well this all worked. Now, I can scrape YouTubers info and grab their thumbnails much faster, cropping them instantly in the browser right on the WordPress add-post page. I can add so much more content.
You can try out a demo of the cropper tool here on GitHub if you like: https://ipsumlorem16.github.io/YTimagecropper/
Just please don’t look too closely at the code. This is just a tool for myself really, not a polished product.