Joomla! Documentation - User contributions [en]

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T15:01:26Z

BCWebdesign: Created page with "Ga naar plug-in-extensiemanager, zoek naar '''Media-Action Smart Crop'''"

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

== Meervoudige focus toevoegen ==
# Volg de basisstap om de eerste focuspunten in te stellen.
# Nu vindt u in de rechterbovenhoek van de plug-in een vervolgkeuzemenu met verschillende genoemde breedten.{{-}}[[File:Different Focus-en.png|center|800px]]
# Selecteer een breedte en selecteer vervolgens het focuspunt in de focuseditor.
# Opslaan en sluit het tabblad.

==Adding custom widths==
# Ga naar plug-in-extensiemanager, zoek naar '''Media-Action Smart Crop'''{{-}} [[File:Plugin extension manager-en.png|center|800px]]
# Now add new widths over here, and save the plugin.{{-}}[[File:Add Widths-en.png|center|800px]]{{-}}[[File:Enter Widths-en.png|center|800px]]
# You would be noticing those widths in the '''Smart Crop''' tab.{{-}}[[File: Custom widths-en.png|center|800px]]

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/32/nl

2019-10-19T15:01:26Z

BCWebdesign: Created page with "Ga naar plug-in-extensiemanager, zoek naar '''Media-Action Smart Crop'''"

Ga naar plug-in-extensiemanager, zoek naar '''Media-Action Smart Crop'''

Translations:J4.x:Adaptive Images for Media Manager/31/nl

2019-10-19T15:00:28Z

BCWebdesign: Created page with "==Adding custom widths=="

==Adding custom widths==

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:59:57Z

BCWebdesign: Created page with "Opslaan en sluit het tabblad."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

== Meervoudige focus toevoegen ==
# Volg de basisstap om de eerste focuspunten in te stellen.
# Nu vindt u in de rechterbovenhoek van de plug-in een vervolgkeuzemenu met verschillende genoemde breedten.{{-}}[[File:Different Focus-en.png|center|800px]]
# Selecteer een breedte en selecteer vervolgens het focuspunt in de focuseditor.
# Opslaan en sluit het tabblad.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/30/nl

2019-10-19T14:59:57Z

BCWebdesign: Created page with "Opslaan en sluit het tabblad."

Opslaan en sluit het tabblad.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:59:02Z

BCWebdesign: Created page with "Selecteer een breedte en selecteer vervolgens het focuspunt in de focuseditor."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

== Meervoudige focus toevoegen ==
# Volg de basisstap om de eerste focuspunten in te stellen.
# Nu vindt u in de rechterbovenhoek van de plug-in een vervolgkeuzemenu met verschillende genoemde breedten.{{-}}[[File:Different Focus-en.png|center|800px]]
# Selecteer een breedte en selecteer vervolgens het focuspunt in de focuseditor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/29/nl

2019-10-19T14:59:02Z

BCWebdesign: Created page with "Selecteer een breedte en selecteer vervolgens het focuspunt in de focuseditor."

Selecteer een breedte en selecteer vervolgens het focuspunt in de focuseditor.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:48:44Z

BCWebdesign: Created page with "Nu vindt u in de rechterbovenhoek van de plug-in een vervolgkeuzemenu met verschillende genoemde breedten."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

== Meervoudige focus toevoegen ==
# Volg de basisstap om de eerste focuspunten in te stellen.
# Nu vindt u in de rechterbovenhoek van de plug-in een vervolgkeuzemenu met verschillende genoemde breedten.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/27/nl

2019-10-19T14:48:43Z

BCWebdesign: Created page with "Nu vindt u in de rechterbovenhoek van de plug-in een vervolgkeuzemenu met verschillende genoemde breedten."

Nu vindt u in de rechterbovenhoek van de plug-in een vervolgkeuzemenu met verschillende genoemde breedten.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:47:45Z

BCWebdesign: Created page with "Volg de basisstap om de eerste focuspunten in te stellen."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

== Meervoudige focus toevoegen ==
# Volg de basisstap om de eerste focuspunten in te stellen.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/26/nl

2019-10-19T14:47:45Z

BCWebdesign: Created page with "Volg de basisstap om de eerste focuspunten in te stellen."

Volg de basisstap om de eerste focuspunten in te stellen.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:47:22Z

BCWebdesign: Created page with "== Meervoudige focus toevoegen =="

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

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

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/25/nl

2019-10-19T14:47:21Z

BCWebdesign: Created page with "== Meervoudige focus toevoegen =="

== Meervoudige focus toevoegen ==

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:46:59Z

BCWebdesign: Created page with "Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''"

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

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

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/24/nl

2019-10-19T14:46:59Z

BCWebdesign: Created page with "Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''"

Voeg die afbeelding nu gewoon toe aan uw artikel. '' Bash ... !! Je afbeelding reageerde responsief met behoud van het belangrijke gedeelte van die afbeelding. ''

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:45:16Z

BCWebdesign: Created page with "Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/22/nl

2019-10-19T14:45:15Z

BCWebdesign: Created page with "Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager."

Na het instellen van het gebied, Opslaan en sluiten van de editor, wordt u teruggeleid naar de media manager.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:44:49Z

BCWebdesign: Created page with "Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/20/nl

2019-10-19T14:44:49Z

BCWebdesign: Created page with "Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor."

Selecteer nu het focusgebied van de afbeelding, met behulp van de meegeleverde editor.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:44:09Z

BCWebdesign: Created page with "Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/18/nl

2019-10-19T14:44:09Z

BCWebdesign: Created page with "Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop."

Bewerk die afbeelding, u wordt omgeleid naar het nieuwe venster, ga naar het tabblad Smart Crop.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:43:12Z

BCWebdesign: Created page with "Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/16/nl

2019-10-19T14:43:12Z

BCWebdesign: Created page with "Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen."

Ga naar Media Manager, zoek de afbeelding waaraan u focuspunten wilt toevoegen.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:42:49Z

BCWebdesign: Created page with "== Hoe focuspunten instellen voor een bepaalde afbeelding? =="

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/15/nl

2019-10-19T14:42:48Z

BCWebdesign: Created page with "== Hoe focuspunten instellen voor een bepaalde afbeelding? =="

== Hoe focuspunten instellen voor een bepaalde afbeelding? ==

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:42:21Z

BCWebdesign: Created page with "=== Bijgesneden afbeeldingen ==="

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

=== Bijgesneden afbeeldingen ===
[[File:Original Image.png|center|Original image with focus area|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/14/nl

2019-10-19T14:42:21Z

BCWebdesign: Created page with "=== Bijgesneden afbeeldingen ==="

=== Bijgesneden afbeeldingen ===

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:41:02Z

BCWebdesign: Created page with "'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:"

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:
# Media-Action: Smart Crop Plugin
# Content: Adaptive Image Plugin

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

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/12/nl

2019-10-19T14:41:02Z

BCWebdesign: Created page with "'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:"

'' '' 'Opmerking:' '' '' Om deze extensie in te schakelen, moet de beheerder twee plug-ins inschakelen vanuit de extensiebeheerder van de plug-in:

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:40:10Z

BCWebdesign: Created page with "Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

'''''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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/11/nl

2019-10-19T14:40:10Z

BCWebdesign: Created page with "Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd."

Als een auteur de originele afbeelding uit mediabeheer verwijdert, worden de aangepaste afbeelding en de focuspunten ook verwijderd.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:39:18Z

BCWebdesign: Created page with "Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.
* 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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/10/nl

2019-10-19T14:39:18Z

BCWebdesign: Created page with "Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen."

Auteur kan ook alle aangepaste afbeeldingen en de vorige ingestelde punten voor een bepaalde afbeelding uit de editor verwijderen.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:38:27Z

BCWebdesign: Created page with "Auteur kan verschillende focus selecteren voor verschillende apparaten."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* Auteur kan verschillende focus selecteren voor verschillende apparaten.
* 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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/9/nl

2019-10-19T14:38:26Z

BCWebdesign: Created page with "Auteur kan verschillende focus selecteren voor verschillende apparaten."

Auteur kan verschillende focus selecteren voor verschillende apparaten.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:37:39Z

BCWebdesign: Created page with "Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.
* 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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/8/nl

2019-10-19T14:37:39Z

BCWebdesign: Created page with "Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden."

Auteur kan bepaalde breedten selecteren waarvoor de afbeeldingen moeten worden bijgesneden.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:36:53Z

BCWebdesign: Created page with "Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.
* 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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/7/nl

2019-10-19T14:36:52Z

BCWebdesign: Created page with "Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied."

Het bijsnijden gebeurt rond het door de auteur geselecteerde gebied.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:36:13Z

BCWebdesign: Created page with "Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.
* 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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/6/nl

2019-10-19T14:36:13Z

BCWebdesign: Created page with "Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat."

Automatisch bijsnijden van de afbeeldingen volgens de viewport van het cliëntapparaat.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:33:46Z

BCWebdesign: Created page with "Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.
* 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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/5/nl

2019-10-19T14:33:46Z

BCWebdesign: Created page with "Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier."

Biedt een editor de mogelijkheid voor het opnemen van de informatie van de auteur, op een meer intuïtieve manier.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:28:00Z

BCWebdesign: Created page with "Kenmerken"

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

Kenmerken
* 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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/4/nl

2019-10-19T14:27:59Z

BCWebdesign: Created page with "Kenmerken"

Kenmerken

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:27:24Z

BCWebdesign: Created page with "Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor..."

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

==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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/3/nl

2019-10-19T14:27:24Z

Het hoofddoel van deze extensie is het behouden van de belangrijke boodschap die aan de afbeelding is gekoppeld, door de gebruiker een manier te bieden om het focusgebied voor de afbeelding toe te voegen. Afbeeldingen worden responsief gemaakt met behulp van deze extensie. Deze extensie wordt ondersteund door de media-actie-plug-in en de inhoud-plug-in.

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:24:33Z

BCWebdesign: Created page with "Introductie"

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[Image:Gsoc2016.png|75px|center|link=GSOC 2018]]
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
Introductie
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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Translations:J4.x:Adaptive Images for Media Manager/2/nl

2019-10-19T14:24:33Z

BCWebdesign: Created page with "Introductie"

Introductie

J4.x:Adaptive Images for Media Manager/nl

2019-10-19T14:23:51Z

BCWebdesign: Created page with "Adaptief beeld voor nieuwe Media Manager Documentatie"

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|text-color=#333|title=
GSoC 2018 
Adaptief beeld voor nieuwe Media Manager Documentatie}}
[[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|800px]]
[[File:Resized Images.png|center|Resized Images for focus area mentioned]]

==How to set focus points for a particular image?==
# Go to the Media Manager, locate the image you want to add focus points to.{{-}}[[File: NMM edit images-en.png|center|800px]]
# Edit that image, you would be redirected to the new window, go to Smart Crop tab.{{-}}[[File:Edit image-en.png|center|800px]]
# Now Select the focus area of the image, with the help of editor provided.{{-}}[[File: Smart Crop Tab-en.png | center|800px]]
# After setting up the area, Save and Close the editor, you would be redirected back to the media manager.{{-}}[[File:Parameters-en.png|center|800px]]
# 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==
# Follow the basic step to set the initial focus points.
# Now in the upper right corner of the plugin you will find a drop-down menu with different widths mentioned.{{-}}[[File:Different Focus-en.png|center|800px]]
# Select a width and then select its focus point in the focus editor.
# Save and close the tab.

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

==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.
# Go to the '''Smart Crop tab''' in the '''Edit Image'''.
# In the lower right of the screen 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-en.png|center|800px]]
==Workflow==
This Extension consists 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 storage.
:* <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{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>