Pull Request for the tasks of the first evaluation period of Media Manager.

Introduction

Sometimes users have to wait more than 3 seconds for an image to get loaded while it unnecessarily wastes their cellular data. This is simply because the image that is being downloaded has a way bigger size than their mobile device and it is just shrunk by CSS to fit into it. So how can we fix this? By using the good old srcset and sizes attributes. These attributes allow us to display the right image for the right screen size.

In this part of the project, I made sure that every single image that gets inserted into the website content has its different-sized versions which are generated and set to the srcset attribute on the fly. In addition, the breakpoints are fully customizable so that it’s content authors who decide which size of an image to display on which screen.

Summary of Changes

• Implement generateMultipleSizes function. Refactored the generateThumbs function and its tests for creating generateMultipleSizes function which generates different sized versions of a given image once users complete all operations on the image in content editors and the “Save” button gets clicked.

• Implement createMultipleSizes function. Refactored the createThumbs function and its tests for creating createMultipleSizes function which takes different sizes of an image to be generated as a parameter and calls generateMultipleSizes function on them. Once the images are generated, this function stores them in the responsive directory of the folder where the original image is stored.

• Implement deleteMultipleSizes function. Added a method that finds and deletes responsive versions of an image with specified sizes and creation method.

• Add helper functions for generating content and form images. Developed multiple functions for handling the image and attributes creation for content and form images. generateFormResponsiveImages and generateContentResponsiveImages get images as parameters, filter them, and calls createMultipleSizes on them. On the other hand, generateSrcset and generateSizes methods create and return corresponding attributes with provided sizes. addContentSrcsetAndSizes is used to insert or update existing attributes for content images. Last but not least, getSizes is the one for getting the right sizes to generate.

• Add "Content - Responsive Images" plugin. Implemented a new plugin for using responsive images functionality in every component where it's needed. Images and attributes are generated and inserted into the web content by using the onContentBeforeSave and onContentAfterSave event methods.

• Add a new option to override default image sizes. Added a plugin option that ensures that it's possible to customize the default responsive image sizes. Newly specified sizes apply to all the images in the web content.

• Add a new option to set different size options for form images. Users can override the default sizes by using the plugin options - the sizes they specify become the new default, but what if they want to set different sizes for each image separately? Added form controls for individual form images to override the default plugin options.

NOTE: Option for customizing content responsive image sizes will be added until the final evaluation period (August 16 - August 23).

Testing Instructions

1. Install "Content-Responsive Images" plugin. Go to System -> Install -> Discover and install the plugin.

2. Activate the plugin. Go to System -> Plugins -> Content-Responsive Images and activate the plugin. You can define a new default for image sizes by using the "custom sizes" form field. If not, images will be generated with 800x600, 600x400, 400x200.
   

3. Insert images and save. Go to any component where it's possible to add images to web content. For example, create or edit an existing article by inserting a content or form image into it. Sizes for form images can be customized by using the "Custom responsive sizes" option.

4. Check the result. Go to the front-end of your article and inspect the images.

As you can see, the image size dropped from 221 kB to 41.3 kB as we decreased the screen size which basically means a faster website and with lower bandwidth usage.

Documentation Changes Required

MediaHelper and Image class methods must be added or updated.

Special thanks to my mentors (@sebenns, @fancyFranci, @GeraintEdwards, @shivamdiehard, Chris Keen) and @bembelimen for assisting me with the project.