Cover image creadits : 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 off with. It was a relatively simple task hence I selected it as I was still getting accustomed to Gerrit and other wikimedia dev tools.
For each image that is uploaded to Wikimedia commons, there is a requirement of an Author and a Source field. The Author field contains the name of the person who took the image, or drew the painting etc. It can either be set to the user who is uploading it, or can be attributed to the original author of the work. Similarly, the source field requires the source of the digital media. It could be a URL, book or a publication.
These two were simple text fields which were to be added to the input form for the staged images. The value entered by the user was passed to the backend API. I modified the serializer at the backend 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, I did not have to put in a lot of effort but it really helped me in getting accustomed to the wikimedia dev tools.
UI Redesign
Tabulator.js was used for taking the metadata for the staged images from the user. By default, Tabulator ships with a table-like structure, where each image is in a row and the fields are in the columns. Initially, it was fine since there weren’t many metadata fields. With the Author and Source fields already added, and more fields to be added soon, I decided to rework the UI of the staging area. Thanks to the RowFormatter functionality provided by Tabulator, I was able to design a custom row layout. I used bootstrap form fields in order to make the UI clean.
This was not the simplest task as retrieving the input data was not that straightforward. For the default table-like design, tabulator had an inbuilt method to fetch the data for each field. Since we moved away for that design, I had to rework logic to retrieve the metadata for each staged image.
Each image from the Google Drive comes with a unique ID and I decided to use this for identification of each image. I used a generic formatting pattern to set the tag ID’s for each field. I concatenated the field name with the ID from Google drive. This really helped in simplifying the process of data retrieval and made life easy, even for future modification.
Since JavaScript is not one of my strongest skills, it took me some time to work out this logic and implement it. Once I was done, this task really helped me boost my confidence with the language.