Joomla! Documentation™

GSoC 2018
Adaptative Image for New Media Manager
Documentation

Joomla! 

4.x

Introduction

The main objective of this extension is to preserve the important message associated with the image, by providing the user a way to add the focus area for the image. Images are being made responsive with the help of this extension. This extension is supported by the media-action plugin and the content plugin.

Features

• Provided a focus editor for taking in the focus information from the author, in a more intuitive manner.
• Auto-Cropping of the images according to the viewport of the client device.
• The cropping is done around the focus area selected by the author.
• Author can select particular widths for which the images need to be cropped.
• Author can select different focus for different devices.
• Author can also remove all the resized images and the previous set focus points for a particular image from the focus editor.
• If an author deletes the original image from the media manager, its resized image and the focus points would be deleted too.

Note: To Enable this Extention, Administrator has to enable two plugins from the plugin's extension manager:

1. Media-Action: Smart Crop Plugin
2. Content: Adaptive Image Plugin

How to set focus points for a particular image?

1. Go to the Media Manager, locate the image you want to add focus points to.

2. Edit that image, you would be redirected to the new window, go to Smart Crop tab.

3. Now Select the focus area of the image, with the help of editor provided.

4. After setting up the area, Save and Close the editor, you would be redirected back to the media manager.

5. Now just add that image normally to your article. Bash...!! Your image got responsive while preserving the important section of that image.

Adding Multiple Focus

1. Follow the basic step to set the initial focus points.

2. Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.

3. Select a width and then select its focus point in the focus editor.

4. Save and close the tab.