My GSoC Journey: Week 4

Ladies and gentlemen! I’m proud to announce that this is the end of the fourth week of my GSoC journey and I have done quite a lot during this week. So let’s dive right into the details! (of course, we can’t continue without a gif 😁)

Tasks

I didn’t set a lot of tasks that bring a new feature this week since I had already worked on most of the functionality that has to be done till the first evaluation. So what I really needed to do was to complete all the unfinished and unoptimized tasks from the previous weeks and to finally wrap up the responsive images with default sizes functionality.

So the first thing that I did was to create reusable functions for generating srcset and sizes attributes for a given image. Here is the generateSrcset function which takes image source and responsive sizes as parameters and returns a srcset attribute (or false in case the generation doesn’t succeed):

And a relatively simple generateSizes function:

Now that we have the functions for generating the srcset and sizes attributes, we need an additional helper function which filters out the content and inserts these attributes into every single img tag there:

Great! We got the responsive image functionality with default sizes for content images, but what about the form images? Since they are rendered inside the templates of each component, we need to add this piece of code to insert the attributes:

And voilà, we got our responsive images with art direction!