Joomla! Documentation - User contributions [en]

J4.x:Adaptive Images for Media Manager

2018-08-21T01:55:40Z

Gm2406:

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
<translate> Adaptative Image for New Media Manager Documentation</translate>}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
<translate>
== Introduction == 
</translate>
<translate> 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.</translate>

<translate>'''Update : ''Smart Crop'' has been renamed to ''Focus'''''</translate>
<translate>
==Features== 
</translate>
* <translate> Provided a focus editor for taking in the focus information from the author, in a more intuitive manner.</translate>
* <translate> Auto-Cropping of the images according to the viewport of the client device.</translate>
* <translate> The cropping is done around the focus area selected by the author.</translate>
* <translate> Author can select particular widths for which the images need to be cropped.</translate>
* <translate> Author can select different focus for different devices.</translate>
* <translate> Author can also remove all the resized images and the previous set focus points for a particular image from the focus editor.</translate>
* <translate> If an author deletes the original image from the media manager, its resized image and the focus points would be deleted too.</translate>

<translate> '''''Note: ''''' To Enable this Extention, Administrator has to enable two plugins from the plugin's extension manager:</translate>
<translate>
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin</translate>

<translate>
===Cropped Images=== 
</translate>
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

<translate>
==How to set focus points for a particular image?== 
</translate>
# <translate> Go to the Media Manager, locate the image you want to add focus points to.</translate>{{-}}[[File: NMM edit images-<translate> en</translate>.png|center|800px]]
# <translate> Edit that image, you would be redirected to the new window, go to Smart Crop tab.</translate>{{-}}[[File:Edit image-<translate> en</translate>.png|center|800px]]
# <translate> Now Select the focus area of the image, with the help of editor provided.</translate>{{-}}[[File: Smart Crop Tab-<translate> en</translate>.png | center|800px]]
# <translate> After setting up the area, Save and Close the editor, you would be redirected back to the media manager.</translate>{{-}}[[File:Parameters-<translate> en</translate>.png|center|800px]]
# <translate> Now just add that image normally to your article. ''Bash...!! Your image got responsive while preserving the important section of that image.''</translate>

<translate>
==Adding Multiple Focus== 
</translate>
# <translate> Follow the basic step to set the initial focus points.</translate>
# <translate> Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.</translate>{{-}}[[File:Different Focus-<translate> en</translate>.png|center|800px]]
# <translate> Select a width and then select its focus point in the focus editor.</translate>
# <translate> Save and close the tab.</translate>

<translate>
==Adding custom widths== 
</translate>
# <translate> Go to plugin's extension manager, look for '''Media-Action Smart Crop'''.</translate>{{-}} [[File:Plugin extension manager-<translate> en</translate>.png|center|800px]]
# <translate> Now add new widths over here, and save the plugin.</translate>{{-}}[[File:Add Widths-en.png|center|800px]]{{-}}[[File:Enter Widths-<translate> en</translate>.png|center|800px]]
# <translate> You would be noticing those widths in the '''Smart Crop''' tab.</translate>{{-}}[[File: Custom widths-<translate> en</translate>.png|center|800px]]

<translate>
==Deleting the previous set focus point== 
</translate>
<translate> '''Note: ''' This will delete all the previously saved focus and resized images of the original image generated by the plugin.</translate>
# <translate> Go to the '''Smart Crop tab''' in the '''Edit Image'''.</translate>
# <translate> In the lower right of the screen there is a delete focus button.</translate>
# <translate> After deleting the previous focus reload the page or hit cancel to go back to media-manager</translate>
[[File:Delete Focus Button-<translate> en</translate>.png|center|800px]]
<translate>
==Workflow== 
</translate>
<translate> This Extension consists of two independent plugins.</translate>

<translate>
===Smart Crop Plugin=== 
</translate>
<translate> This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller <tt>AdaptiveImageController.php</tt>. Finally, when the author is satisfied with the focus he hit '''Save and Close''' which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory <tt>/media/focus</tt>. Nomenclature of resized images is <tt>(resize image width)_(base64 encoded full path of the image).</tt></translate>

<translate>
===Adaptive Image Plugin=== 
</translate>
<translate> This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <tt><picture></tt> element to that image and all the associated resized-images will be appended to it from <tt>/media/focus/</tt>. This plugin will also delete all the resized images if the original image is not found (or deleted).</translate>

<translate>
==Extending Extension== 
</translate>

<translate>
===Changing storage for focus points=== 
</translate>
<translate> Currently, The focus area is being saved in JSON format in the file storage(<tt>JSONFocusStore</tt> Driver). This can be changed to any other storage by making a new driver class into <tt>Joomla\CMS\AdaptiveImage\</tt>.The driver class should implement <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt> interface.</translate>
<translate> <tt>JSONFocusStore</tt> driver class is implementing <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt>. <tt>FocusStoreInterface</tt> has following methods declared:</translate>

1. <tt>setFocus($dataFocus, $width, $imgSrc)</tt>
: <translate> This method stores/updates the focus area into the storage.</translate>
:* <translate> <tt>$dataFocus</tt> It has the dimensions of the focus area. It is an array with keys <tt>box-left</tt>, <tt>box-top</tt>, <tt>box-width</tt>, <tt>box-height</tt>.</translate>
:* <translate> <tt>$width</tt> It is the size of image for which the focus area is being stored.</translate>
:* <translate> <tt>$imgSrc</tt> It is the full path of the image corresponding to the focus area.</translate>
2. <tt>getFocus($imgSrc, $width)</tt>
: <translate> This method returns the focus area of the image. It return all the focus area associated with the image</translate>
:* <translate> <tt>$imgSrc</tt> It is the full path of the image corresponding to the focus area.</translate>
:* <translate> <tt>$width(optional)</tt> If the user want to take in the value of focus area for particular width then, it may be mentioned.</translate>
3. <tt>deleteFocus($imgSrc)</tt>
: <translate> It deletes all the focus associated with the image.</translate>
:* <translate> <tt>$imgSrc</tt> It is the full path of the image corresponding to the focus area.</translate>

<noinclude>
[[Category:Google Summer of Code 2018{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

J4.x:Adaptive Images for Media Manager

2018-07-31T08:31:05Z

Gm2406:

{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptative Image for New Media Manager Documentation}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
== 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:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

===Cropped Images===
[[File:Original Image.png|center|Original image with focus area]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==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.
[[File: NMM edit images.png|center]]
2. Edit that image, you would be redirected to the new window, go to Smart Crop tab.
[[File:Edit image.png|center]]
3. Now Select the focus area of the image, with the help of editor provided.
[[File: Smart Crop Tab.png | center]]
4. After setting up the area, Save and Close the editor, you would be redirected back to the media manager.
[[File:Parameters.png|center]]
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.
[[File:Different Focus .png|center]]
3. Select a width and then select its focus point in the focus editor.

4. Save and close the tab.

==Adding custom widths==

1. Go to plugin's extension manager, look for '''Media-Action Smart Crop'''.
[[File:Plugin extension manager.png|center]]
2. Now add new widths over here, and save the plugin.
[[File:Add Widths.png|center]]
[[File:Enter Widths.png|center]]
3. You would be noticing those widths in the '''Smart Crop''' tab.
[[File: Custom widths.png|center]]

==Deleting the previous set focus point==
'''Note: ''' This will delete all the previously saved focus and resized images of the original image generated by the plugin.

# Goto the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the window there is a delete focus button.
# After deleting the previous focus reload the page or hit cancel to go back to media-manager
[[File:Delete Focus Button.png|center]]

==Workflow==

This Extension consist of two independent plugins.

===Smart Crop Plugin===
This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller <tt>AdaptiveImageController.php</tt>. Finally, when the author is satisfied with the focus he hit '''Save and Close''' which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory <tt>/media/focus</tt>. Nomenclature of resized images is <tt>(resize image width)_(base64 encoded full path of the image).</tt>

===Adaptive Image Plugin===
This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <tt><picture></tt> element to that image and all the associated resized-images will be appended to it from <tt>/media/focus/</tt>. This plugin will also delete all the resized images if the original image is not found (or deleted).

==Extending Extension==

===Changing storage for focus points===
Currently, The focus area is being saved in JSON format in the file storage(<tt>JSONFocusStore</tt> Driver). This can be changed to any other storage by making a new driver class into <tt>Joomla\CMS\AdaptiveImage\</tt>.The driver class should implement <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt> interface.
<tt>JSONFocusStore</tt> driver class is implementing <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt>. <tt>FocusStoreInterface</tt> has following methods declared:

1. <tt>setFocus($dataFocus, $width, $imgSrc)</tt>
: This method stores/updates the focus area into the storge.
:* <tt>$dataFocus</tt> It has the dimensions of the focus area. It is an array with keys <tt>box-left</tt>, <tt>box-top</tt>, <tt>box-width</tt>, <tt>box-height</tt>.
:* <tt>$width</tt> It is the size of image for which the focus area is being stored.
:* <tt>$imgSrc</tt> It is the full path of the image corresponding to the focus area.
2. <tt>getFocus($imgSrc, $width)</tt>
: This method returns the focus area of the image. It return all the focus area associated with the image
:* <tt>$imgSrc</tt> It is the full path of the image corresponding to the focus area.
:* <tt>$width(optional)</tt> If the user want to take in the value of focus area for particular width then, it may be mentioned.
3. <tt>deleteFocus($imgSrc)</tt>
: It deletes all the focus associated with the image.
:* <tt>$imgSrc</tt> It is the full path of the image corresponding to the focus area.

<noinclude>
[[Category:Google Summer of Code 2018]]
[[Category:Development]]
[[Category:Joomla!_4.x]]
</noinclude>

J4.x:Adaptive Images for Media Manager

2018-07-29T14:07:48Z

Gm2406: /* Adaptive Image Plugin */

{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptative Image for New Media Manager Documentation}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
== 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:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

===Cropped Images===
[[File:Original Image.png|center|Original image with focus area]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==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.
[[File: NMM edit images.png|center]]
2. Edit that image, you would be redirected to the new window, go to Smart Crop tab.
[[File:Edit image.png|center]]
3. Now Select the focus area of the image, with the help of editor provided.
[[File: Smart Crop Tab.png | center]]
4. After setting up the area, Save and Close the editor, you would be redirected back to the media manager.
[[File:Parameters.png|center]]
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.
[[File:Different Focus .png|center]]
3. Select a width and then select its focus point in the focus editor.

4. Save and close the tab.

==Adding custom widths==

1. Go to plugin's extension manager, look for '''Media-Action Smart Crop'''.
[[File:Plugin extension manager.png|center]]
2. Now add new widths over here, and save the plugin.
[[File:Add Widths.png|center]]
[[File:Enter Widths.png|center]]
3. You would be noticing those widths in the '''Smart Crop''' tab.
[[File: Custom widths.png|center]]

==Deleting the previous set focus point==
'''Note: ''' This will delete all the previously saved focus and resized images of the original image generated by the plugin.

# Goto the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the window there is a delete focus button.
# After deleting the previous focus reload the page or hit cancel to go back to media-manager
[[File:Delete Focus Button.png|center]]

==Workflow==

This Extension consist of two independent plugins.

===Smart Crop Plugin===
This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller <tt>AdaptiveImageController.php</tt>. Finally, when the author is satisfied with the focus he hit '''Save and Close''' which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory <tt>/media/focus</tt>. Nomenclature of resized images is <tt>(resize image width)_(base64 encoded full path of the image).</tt>

===Adaptive Image Plugin===
This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <tt><picture></tt> element to that image and all the associated resized-images will be appended to it from <tt>/media/focus/</tt>. This plugin will also delete all the resized images if the original image is not found (or deleted).

==Extending Extension==

===Changeing storage for focus points===
Currently, The focus points are being saved in JSON format in the file storage. This can be changed to any other storage by making a new driver class into <tt>Joomla\CMS\AdaptiveImage\</tt>.The driver class should implement <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt> interface.

<noinclude>
[[Category:Google Summer of Code 2018]]
[[Category:Development]]
[[Category:Joomla!_4.x]]
</noinclude>

J4.x:Adaptive Images for Media Manager

2018-07-29T14:06:21Z

Gm2406:

{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptative Image for New Media Manager Documentation}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
== 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:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

===Cropped Images===
[[File:Original Image.png|center|Original image with focus area]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==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.
[[File: NMM edit images.png|center]]
2. Edit that image, you would be redirected to the new window, go to Smart Crop tab.
[[File:Edit image.png|center]]
3. Now Select the focus area of the image, with the help of editor provided.
[[File: Smart Crop Tab.png | center]]
4. After setting up the area, Save and Close the editor, you would be redirected back to the media manager.
[[File:Parameters.png|center]]
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.
[[File:Different Focus .png|center]]
3. Select a width and then select its focus point in the focus editor.

4. Save and close the tab.

==Adding custom widths==

1. Go to plugin's extension manager, look for '''Media-Action Smart Crop'''.
[[File:Plugin extension manager.png|center]]
2. Now add new widths over here, and save the plugin.
[[File:Add Widths.png|center]]
[[File:Enter Widths.png|center]]
3. You would be noticing those widths in the '''Smart Crop''' tab.
[[File: Custom widths.png|center]]

==Deleting the previous set focus point==
'''Note: ''' This will delete all the previously saved focus and resized images of the original image generated by the plugin.

# Goto the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the window there is a delete focus button.
# After deleting the previous focus reload the page or hit cancel to go back to media-manager
[[File:Delete Focus Button.png|center]]

==Workflow==

This Extension consist of two independent plugins.

===Smart Crop Plugin===
This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller <tt>AdaptiveImageController.php</tt>. Finally, when the author is satisfied with the focus he hit '''Save and Close''' which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory <tt>/media/focus</tt>. Nomenclature of resized images is <tt>(resize image width)_(base64 encoded full path of the image).</tt>

===Adaptive Image Plugin===
This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <tt><picture></tt> element to that image and all the associated resized-images will be appended to it from <tt>/media/focus/</tt>.

==Extending Extension==

===Changeing storage for focus points===
Currently, The focus points are being saved in JSON format in the file storage. This can be changed to any other storage by making a new driver class into <tt>Joomla\CMS\AdaptiveImage\</tt>.The driver class should implement <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt> interface.

<noinclude>
[[Category:Google Summer of Code 2018]]
[[Category:Development]]
[[Category:Joomla!_4.x]]
</noinclude>

File:Resized Images.png

2018-07-29T14:04:09Z

Gm2406:

Resized Images for focus area mentioned

File:Original Image.png

2018-07-29T14:02:15Z

Gm2406:

Original Image with focus point mentioned

J4.x:Adaptive Images for Media Manager

2018-07-29T12:11:15Z

Gm2406: /* =Changeing storage for focus points */

{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptative Image for New Media Manager Documentation}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
== 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:
# Media-Action: Smart Crop Plugin
# 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.
[[File: NMM edit images.png|center]]
2. Edit that image, you would be redirected to the new window, go to Smart Crop tab.
[[File:Edit image.png|center]]
3. Now Select the focus area of the image, with the help of editor provided.
[[File: Smart Crop Tab.png | center]]
4. After setting up the area, Save and Close the editor, you would be redirected back to the media manager.
[[File:Parameters.png|center]]
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.
[[File:Different Focus .png|center]]
3. Select a width and then select its focus point in the focus editor.

4. Save and close the tab.

==Adding custom widths==

1. Go to plugin's extension manager, look for '''Media-Action Smart Crop'''.
[[File:Plugin extension manager.png|center]]
2. Now add new widths over here, and save the plugin.
[[File:Add Widths.png|center]]
[[File:Enter Widths.png|center]]
3. You would be noticing those widths in the '''Smart Crop''' tab.
[[File: Custom widths.png|center]]

==Deleting the previous set focus point==
'''Note: ''' This will delete all the previously saved focus and resized images of the original image generated by the plugin.

# Goto the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the window there is a delete focus button.
# After deleting the previous focus reload the page or hit cancel to go back to media-manager
[[File:Delete Focus Button.png|center]]

==Workflow==

This Extension consist of two independent plugins.

===Smart Crop Plugin===
This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller <tt>AdaptiveImageController.php</tt>. Finally, when the author is satisfied with the focus he hit '''Save and Close''' which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory <tt>/media/focus</tt>. Nomenclature of resized images is <tt>(resize image width)_(base64 encoded full path of the image).</tt>

===Adaptive Image Plugin===
This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <tt><picture></tt> element to that image and all the associated resized-images will be appended to it from <tt>/media/focus/</tt>.

==Extending Extension==

===Changeing storage for focus points===
Currently, The focus points are being saved in JSON format in the file storage. This can be changed to any other storage by making a new driver class into <tt>Joomla\CMS\AdaptiveImage\</tt>.The driver class should implement <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt> interface.

<noinclude>
[[Category:Google Summer of Code 2018]]
[[Category:Development]]
[[Category:Joomla!_4.x]]
</noinclude>

J4.x:Adaptive Images for Media Manager

2018-07-29T12:10:56Z

Gm2406: /* Extending Extension */

{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptative Image for New Media Manager Documentation}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
== 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:
# Media-Action: Smart Crop Plugin
# 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.
[[File: NMM edit images.png|center]]
2. Edit that image, you would be redirected to the new window, go to Smart Crop tab.
[[File:Edit image.png|center]]
3. Now Select the focus area of the image, with the help of editor provided.
[[File: Smart Crop Tab.png | center]]
4. After setting up the area, Save and Close the editor, you would be redirected back to the media manager.
[[File:Parameters.png|center]]
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.
[[File:Different Focus .png|center]]
3. Select a width and then select its focus point in the focus editor.

4. Save and close the tab.

==Adding custom widths==

1. Go to plugin's extension manager, look for '''Media-Action Smart Crop'''.
[[File:Plugin extension manager.png|center]]
2. Now add new widths over here, and save the plugin.
[[File:Add Widths.png|center]]
[[File:Enter Widths.png|center]]
3. You would be noticing those widths in the '''Smart Crop''' tab.
[[File: Custom widths.png|center]]

==Deleting the previous set focus point==
'''Note: ''' This will delete all the previously saved focus and resized images of the original image generated by the plugin.

# Goto the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the window there is a delete focus button.
# After deleting the previous focus reload the page or hit cancel to go back to media-manager
[[File:Delete Focus Button.png|center]]

==Workflow==

This Extension consist of two independent plugins.

===Smart Crop Plugin===
This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller <tt>AdaptiveImageController.php</tt>. Finally, when the author is satisfied with the focus he hit '''Save and Close''' which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory <tt>/media/focus</tt>. Nomenclature of resized images is <tt>(resize image width)_(base64 encoded full path of the image).</tt>

===Adaptive Image Plugin===
This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <tt><picture></tt> element to that image and all the associated resized-images will be appended to it from <tt>/media/focus/</tt>.

==Extending Extension==

===Changeing storage for focus points==
Currently, The focus points are being saved in JSON format in the file storage. This can be changed to any other storage by making a new driver class into <tt>Joomla\CMS\AdaptiveImage\</tt>.The driver class should implement <tt>Joomla\CMS\AdaptiveImage\FocusStoreInterface</tt> interface.

<noinclude>
[[Category:Google Summer of Code 2018]]
[[Category:Development]]
[[Category:Joomla!_4.x]]
</noinclude>

J4.x:Adaptive Images for Media Manager

2018-07-29T11:46:35Z

Gm2406: /* Adaptive Image Plugin */

{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptative Image for New Media Manager Documentation}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
== 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:
# Media-Action: Smart Crop Plugin
# 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.
[[File: NMM edit images.png|center]]
2. Edit that image, you would be redirected to the new window, go to Smart Crop tab.
[[File:Edit image.png|center]]
3. Now Select the focus area of the image, with the help of editor provided.
[[File: Smart Crop Tab.png | center]]
4. After setting up the area, Save and Close the editor, you would be redirected back to the media manager.
[[File:Parameters.png|center]]
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.
[[File:Different Focus .png|center]]
3. Select a width and then select its focus point in the focus editor.

4. Save and close the tab.

==Adding custom widths==

1. Go to plugin's extension manager, look for '''Media-Action Smart Crop'''.
[[File:Plugin extension manager.png|center]]
2. Now add new widths over here, and save the plugin.
[[File:Add Widths.png|center]]
[[File:Enter Widths.png|center]]
3. You would be noticing those widths in the '''Smart Crop''' tab.
[[File: Custom widths.png|center]]

==Deleting the previous set focus point==
'''Note: ''' This will delete all the previously saved focus and resized images of the original image generated by the plugin.

# Goto the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the window there is a delete focus button.
# After deleting the previous focus reload the page or hit cancel to go back to media-manager
[[File:Delete Focus Button.png|center]]

==Workflow==

This Extension consist of two independent plugins.

===Smart Crop Plugin===
This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller <tt>AdaptiveImageController.php</tt>. Finally, when the author is satisfied with the focus he hit '''Save and Close''' which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory <tt>/media/focus</tt>. Nomenclature of resized images is <tt>(resize image width)_(base64 encoded full path of the image).</tt>

===Adaptive Image Plugin===
This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <tt><picture></tt> element to that image and all the associated resized-images will be appended to it from <tt>/media/focus/</tt>.

==Extending Extension==

<noinclude>
[[Category:Google Summer of Code 2018]]
[[Category:Development]]
[[Category:Joomla!_4.x]]
</noinclude>

J4.x:Adaptive Images for Media Manager

2018-07-29T11:32:09Z

Gm2406: /* Workflow of the Extension */

J4.x:Adaptive Images for Media Manager

2018-07-29T11:30:35Z

Gm2406:

J4.x:Adaptive Images for Media Manager

2018-07-29T11:00:21Z

Gm2406:

File:Delete Focus Button-en.png

2018-07-29T10:58:25Z

Gm2406:

Deleting previous focus

File:Custom widths-en.png

2018-07-29T10:42:02Z

Gm2406:

Custom Widths in the smart crop tab

File:Enter Widths-en.png

2018-07-29T10:38:35Z

Gm2406:

Enter Custom Widths

File:Add Widths-en.png

2018-07-29T10:37:36Z

Gm2406:

Add Custom Width

File:Plugin extension manager-en.png

2018-07-29T10:35:30Z

Gm2406:

Locating smart crop

J4.x:Adaptive Images for Media Manager

2018-07-29T10:25:23Z

Gm2406:

J4.x:Adaptive Images for Media Manager

2018-07-29T10:18:38Z

Gm2406:

J4.x:Adaptive Images for Media Manager

2018-07-29T10:18:00Z

Gm2406:

File:Different Focus-en.png

2018-07-29T10:14:49Z

Gm2406:

Different focus for different width

File:Parameters-en.png

2018-07-29T10:09:49Z

Gm2406:

Focus Parameters

File:Smart Crop Tab-en.png

2018-07-29T10:04:03Z

Gm2406:

Plugin main page

File:Edit image-en.png

2018-07-29T10:01:01Z

Gm2406:

Edit Image Tab

File:NMM edit images-en.png

2018-07-29T09:58:20Z

Gm2406:

New Media Manager edit images button

J4.x:Adaptive Images for Media Manager

2018-07-28T02:16:57Z

Gm2406:

J4.x:Adaptive Images for Media Manager

2018-07-28T02:15:52Z

Gm2406:

J4.x:Adaptive Images for Media Manager

2018-07-26T18:25:44Z

Gm2406:

J4.x:Adaptive Images for Media Manager

2018-07-26T18:17:21Z

Gm2406: