User blog:Harbumz/Introducing Vignette, Wikia's New Thumbnailer

Hello everyone, this is Nelson. I’m a software engineer in the platform group at Wikia. Today I’m going to talk about our new thumbnailer, Vignette.

Why do we need a new thumbnailer?
Wikia recently started an effort to modernize the platform. Part of this effort includes retiring or replacing services that are difficult to maintain or written in languages that are no longer supported. One of our first targets for improvement was the image thumbnailer. MediaWiki’s default thumbnailer has previously proven effective and useful, but it was time to upgrade to something that matches Wikia’s needs, both in terms of scale and performance.

Around the time that discussions started about replacing the old thumbnailer, Wikia acquired a company called Huddler. Huddler had developed their own independent thumbnailer, so we wanted to see if we might be able to use either one or the other.

After some investigation, we decided to unify the thumbnailing across both platforms using the one developed at Huddler. The Huddler thumbnailer was a shell script wrapper for the ImageMagick command line tools. It worked well and provided some of the same functionality as the existing Wikia thumbnailer, in a addition to a few extra thumbnailing modes. Some of the advantages of the new thumbnailer, named Vignette, are:

Easy to understand URLs
The legacy thumbnailer defined a thumbnail using strings like “600px-imageName.jpg.png”, “600x200x10-imageName.jpg”, or the dreaded “v,000000,600x200x10--20,600,10,100-imageName.jpg”.

Vignette represents these as “scale-to-width/600?format=png”, “zoom-crop/width/600/height/200”, and “window-crop-fixed/width/600/height/200/x-offset/-20/y-offset/10/window-width/620/window-height/90”, respectively. While these URLs may still seem complex, their human-readable parameters make it easier for us to understand what sort of image is being generated just by looking at the URL.

Maintainable Client Code
One of the things we noticed when we were migrating the Wikia app to use Vignette was that thumbnail strings were being manually generated and appended to one another throughout the codebase. This was a pain to change, but the result is a much cleaner and easier-to-maintain single point of URL generation.

Backwards Compatibility
Vignette understands the legacy thumbnail URLs. This is important in the short term, because we still need to render those URLs properly since we can’t guarantee all clients (like our mobile apps) in the wild are updated to use Vignette-style URLs.

What’s Next?
You may be surprised to hear that Vignette is not only live already on Wikia, but its integration onto our site is almost complete. One of the goals of the Vignette project was to have no visible end-user impact. There were a few bumps along the way, but for the most part we were successful in this area.

Today, users shouldn’t see anything different with the images they view on their articles or file pages than they saw last year. The thumbnail quality is just the same as it was on the old thumbnailer.

Vignette is largely done, but there are a few loose ends to tie up. We need to migrate our mobile apps to use Vignette-style URLs, implement a way to specify image sizes when requesting article data via the Wikia API, and finally retire the legacy thumbnailer. We’ve learned a lot about what works and what doesn’t when retiring old software, and we look to do more of it as we modernize our platform.

Resources

 * Vignette source code - https://github.com/Wikia/vignette
 * Vignette PHP client - https://github.com/Wikia/app/tree/dev/lib/Wikia/src/Vignette
 * Bridge for dealing with legacy URLs - https://github.com/Wikia/app/tree/dev/includes/wikia/vignette