Cover image credits : freepik.com
This blog post is an update about my work as an Outreachy intern at the Wikimedia Foundation!
Author and Source Fields
This was the very first task I started with. It was relatively simple, so I selected it while I was still getting accustomed to Gerrit and other Wikimedia development tools.
For each image uploaded to Wikimedia Commons, there is a requirement for an Author and a Source field. The Author field contains the name of the person who took the image, drew the painting, etc. It can either be set to the user uploading it or attributed to the original author of the work. Similarly, the Source field requires the source of the digital media, which could be a URL, book, or publication.
These fields were added to the input form for the staged images. The values entered by the user were passed to the backend API. I modified the serializer to incorporate these additional fields and then formatted them into wiki text. This formatted text was uploaded to the Wikimedia API along with the image and other fields.
Since it was a fairly simple task, it didn’t require much effort, but it really helped me get accustomed to Wikimedia development tools.
UI Redesign
Tabulator.js was used for capturing metadata for the staged images from the user. By default, Tabulator provides a table-like structure, where each image occupies a row and fields are organized into columns. Initially, this was fine since there weren’t many metadata fields.
With the Author and Source fields added, and more fields planned, I decided to rework the UI of the staging area. Thanks to Tabulator’s RowFormatter functionality, I was able to design a custom row layout. I used Bootstrap form fields to make the UI clean and user-friendly.
This task was more challenging because retrieving input data wasn’t as straightforward as in the default table-like design. Tabulator has an inbuilt method for fetching data per field, but moving away from the default layout required me to rework the logic for retrieving metadata for each staged image.
Each image from Google Drive comes with a unique ID, which I used to identify each image. I implemented a generic formatting pattern to set tag IDs for each field by concatenating the field name with the Google Drive ID. This greatly simplified data retrieval and made future modifications easier.
Since JavaScript is not one of my strongest skills, it took me some time to implement this logic. Once completed, this task significantly boosted my confidence with the language.