[6.1] make media action crop aspect ratio configurable

administrator/language/en-GB/plg_media-action_crop.ini

@@ -4,6 +4,8 @@
 ; Note : All ini files need to be saved as UTF-8
 
 PLG_MEDIA-ACTION_CROP="Media Action - Crop"
+PLG_MEDIA-ACTION_CROP_ASPECT_RATIOS_DESC="Configure custom aspect ratios for the crop tool. Each ratio needs a label (e.g. '16:9'), a value (e.g. '16/9' or '1'), and optionally a group (landscape/portrait)."
+PLG_MEDIA-ACTION_CROP_ASPECT_RATIOS_LABEL="Aspect Ratios"
 PLG_MEDIA-ACTION_CROP_LABEL="Crop"
 PLG_MEDIA-ACTION_CROP_PARAM_ASPECT="Aspect Ratio"
 PLG_MEDIA-ACTION_CROP_PARAM_DEFAULT_RATIO="Default aspect ratio"
@@ -15,4 +17,11 @@ PLG_MEDIA-ACTION_CROP_PARAM_WIDTH="Width"
 PLG_MEDIA-ACTION_CROP_PARAM_X="X-Axis"
 PLG_MEDIA-ACTION_CROP_PARAM_Y="Y-Axis"
 PLG_MEDIA-ACTION_CROP_QUALITY="Quality"
+PLG_MEDIA-ACTION_CROP_RATIO_GROUP_LABEL="Group"
+PLG_MEDIA-ACTION_CROP_RATIO_GROUP_DESC="Optionally group this ratio under landscape or portrait"
+PLG_MEDIA-ACTION_CROP_RATIO_GROUP_NONE="No group"
+PLG_MEDIA-ACTION_CROP_RATIO_LABEL_LABEL="Label"
+PLG_MEDIA-ACTION_CROP_RATIO_LABEL_DESC="The label to display for this ratio (e.g. '16:9', '4:3', 'thumbnail', etc.)"
+PLG_MEDIA-ACTION_CROP_RATIO_VALUE_LABEL="Value"
+PLG_MEDIA-ACTION_CROP_RATIO_VALUE_DESC="The aspect ratio as numerator/denominator or number (e.g. 16/9, 4/3, 1)."
 PLG_MEDIA-ACTION_CROP_XML_DESCRIPTION="Adds crop functionality for images."

build/media_source/plg_media-action_crop/js/crop.es6.js

@@ -8,6 +8,32 @@ let formElements;
 let activated = false;
 let instance;
 
+/**
+ * Parse aspect ratio value from string format to number
+ * Accepts either a plain number (e.g. "1") or numerator/denominator format (e.g. "16/9")
+ * @param {string} value - The aspect ratio value
+ * @returns {number} The calculated aspect ratio as a number
+ */
+const parseAspectRatio = (value) => {
+  if (!value || typeof value !== 'string' || value.trim() === '') {
+    return NaN;
+  }
+  if (value.includes('/')) {
+    const [numeratorStr, denominatorStr] = value.split('/');
+    const numerator = parseFloat(numeratorStr);
+    const denominator = parseFloat(denominatorStr);
+    if (
+      isNaN(numerator) ||
+      isNaN(denominator) ||
+      denominator === 0
+    ) {
+      return NaN;
+    }
+    return numerator / denominator;
+  }
+  return parseFloat(value);
+};
+
 const addListeners = () => {
   formElements.cropX.addEventListener('change', ({ currentTarget }) => {
     instance.setData({ x: parseInt(currentTarget.value, 10) });
@@ -22,7 +48,7 @@ const addListeners = () => {
     instance.setData({ height: parseInt(currentTarget.value, 10) });
   });
   formElements.aspectRatio.addEventListener('change', ({ currentTarget }) => {
-    instance.setAspectRatio(currentTarget.value);
+    instance.setAspectRatio(parseAspectRatio(currentTarget.value));
   });
   activated = true;
 };
@@ -66,7 +92,7 @@ const init = (image) => {
     addListeners();
   }
 
-  instance.setAspectRatio(formElements.cropAspectRatioOption.value);
+  instance.setAspectRatio(parseAspectRatio(formElements.cropAspectRatioOption.value));
 };
 
 // Register the Events

plugins/media-action/crop/crop.xml

@@ -19,4 +19,54 @@
 		<language tag="en-GB">language/en-GB/plg_media-action_crop.ini</language>
 		<language tag="en-GB">language/en-GB/plg_media-action_crop.sys.ini</language>
 	</languages>
+	<config>
+		<fields name="params">
+			<fieldset name="basic">
+				<field
+					name="aspect_ratios"
+					type="subform"
+					label="PLG_MEDIA-ACTION_CROP_ASPECT_RATIOS_LABEL"
+					description="PLG_MEDIA-ACTION_CROP_ASPECT_RATIOS_DESC"
+					multiple="true"
+					layout="joomla.form.field.subform.repeatable-table"
+					default='{"aspect_ratios0":{"label":"1:1","value":"1","group":""},"aspect_ratios1":{"label":"5:4","value":"5/4","group":"landscape"},"aspect_ratios2":{"label":"4:3","value":"4/3","group":"landscape"},"aspect_ratios3":{"label":"3:2","value":"3/2","group":"landscape"},"aspect_ratios4":{"label":"16:9","value":"16/9","group":"landscape"},"aspect_ratios5":{"label":"4:5","value":"4/5","group":"portrait"},"aspect_ratios6":{"label":"3:4","value":"3/4","group":"portrait"},"aspect_ratios7":{"label":"2:3","value":"2/3","group":"portrait"},"aspect_ratios8":{"label":"9:16","value":"9/16","group":"portrait"}}'
+				>
+					<form>
+						<field
+							name="label"
+							type="text"
+							label="PLG_MEDIA-ACTION_CROP_RATIO_LABEL_LABEL"
+							description="PLG_MEDIA-ACTION_CROP_RATIO_LABEL_DESC"
+							required="true"
+							filter="string"
+						/>
+						<field
+							name="value"
+							type="text"
+							label="PLG_MEDIA-ACTION_CROP_RATIO_VALUE_LABEL"
+							description="PLG_MEDIA-ACTION_CROP_RATIO_VALUE_DESC"
+							required="true"
+							pattern="([1-9]\d*/[1-9]\d*|[1-9]\d*)"
+							filter="string"
+							hint="9/16"
+							class="input-small"
+							size="10"
+							maxlength="10"
+						/>
+						<field
+							name="group"
+							type="list"
+							label="PLG_MEDIA-ACTION_CROP_RATIO_GROUP_LABEL"
+							description="PLG_MEDIA-ACTION_CROP_RATIO_GROUP_DESC"
+							default=""
+						>
+							<option value="">PLG_MEDIA-ACTION_CROP_RATIO_GROUP_NONE</option>
+							<option value="landscape">PLG_MEDIA-ACTION_CROP_PARAM_LANDSCAPE</option>
+							<option value="portrait">PLG_MEDIA-ACTION_CROP_PARAM_PORTRAIT</option>
+						</field>
+					</form>
+				</field>
+			</fieldset>
+		</fields>
+	</config>
 </extension>

plugins/media-action/crop/form/crop.xml

@@ -64,22 +64,22 @@
 			label="PLG_MEDIA-ACTION_CROP_PARAM_ASPECT"
 			hiddenLabel="true"
 			class="crop-aspect-ratio-options"
-			default="1.111"
-			>
-			<option class="crop-aspect-ratio-option" value="1.111">PLG_MEDIA-ACTION_CROP_PARAM_DEFAULT_RATIO</option>
+			default="10/9"
+		>
+			<option class="crop-aspect-ratio-option" value="10/9">PLG_MEDIA-ACTION_CROP_PARAM_DEFAULT_RATIO</option>
 			<option class="crop-aspect-ratio-option" value="">PLG_MEDIA-ACTION_CROP_PARAM_NO_RATIO</option>
 			<option class="crop-aspect-ratio-option" value="1">1:1</option>
 			<group label="PLG_MEDIA-ACTION_CROP_PARAM_LANDSCAPE">
-				<option class="crop-aspect-ratio-option" value="1.25">5:4</option>
-				<option class="crop-aspect-ratio-option" value="1.3333333333333333">4:3</option>
-				<option class="crop-aspect-ratio-option" value="1.5">3:2</option>
-				<option class="crop-aspect-ratio-option" value="1.7777777777777777">16:9</option>
+				<option class="crop-aspect-ratio-option" value="5/4">5:4</option>
+				<option class="crop-aspect-ratio-option" value="4/3">4:3</option>
+				<option class="crop-aspect-ratio-option" value="3/2">3:2</option>
+				<option class="crop-aspect-ratio-option" value="16/9">16:9</option>
 			</group>
 			<group label="PLG_MEDIA-ACTION_CROP_PARAM_PORTRAIT">
-				<option class="crop-aspect-ratio-option" value="0.8">4:5</option>
-				<option class="crop-aspect-ratio-option" value="0.75">3:4</option>
-				<option class="crop-aspect-ratio-option" value="0.6666666666666667">2:3</option>
-				<option class="crop-aspect-ratio-option" value="0.5625">9:16</option>
+				<option class="crop-aspect-ratio-option" value="4/5">4:5</option>
+				<option class="crop-aspect-ratio-option" value="3/4">3:4</option>
+				<option class="crop-aspect-ratio-option" value="2/3">2:3</option>
+				<option class="crop-aspect-ratio-option" value="9/16">9:16</option>
 			</group>
 		</field>
 	</fieldset>

plugins/media-action/crop/src/Extension/Crop.php

@@ -11,6 +11,7 @@
 namespace Joomla\Plugin\MediaAction\Crop\Extension;
 
 use Joomla\CMS\Application\CMSWebApplicationInterface;
+use Joomla\CMS\Form\Form;
 use Joomla\Component\Media\Administrator\Plugin\MediaActionPlugin;
 use Joomla\Event\SubscriberInterface;
 
@@ -25,14 +26,167 @@
  */
 final class Crop extends MediaActionPlugin implements SubscriberInterface
 {
+    /**
+     * The form event. Load additional parameters when available into the field form.
+     * Override to dynamically inject aspect ratios from plugin settings.
+     *
+     * @param   Form       $form  The form
+     * @param   \stdClass  $data  The data (required by the event interface, not used in this implementation)
+     *
+     * @return  void
+     *
+     * @since   __DEPLOY_VERSION__
+     * @note    The $data parameter is required by the Joomla event interface but is not used in this method.
+     */
+    public function onContentPrepareForm(Form $form, $data): void
+    {
+        // Check if it is the right form
+        if ($form->getName() !== 'com_media.file') {
+            return;
+        }
+
+        $this->loadCss();
+        $this->loadJs();
+
+        // The file with the params for the edit view
+        $paramsFile = JPATH_PLUGINS . '/media-action/' . $this->_name . '/form/' . $this->_name . '.xml';
+
+        // When the file exists, load it into the form
+        if (file_exists($paramsFile)) {
+            $form->loadFile($paramsFile);
+
+            // Get the aspect ratios from plugin parameters
+            $aspectRatios = $this->params->get('aspect_ratios');
+
+            // Convert to array if needed (handles stdClass from Registry)
+            if (\is_object($aspectRatios)) {
+                $aspectRatios = (array) $aspectRatios;
+            }
+
+            // If we have custom aspect ratios, modify the form field
+            if (!empty($aspectRatios) && \is_array($aspectRatios)) {
+                $this->injectAspectRatios($form, $aspectRatios);
+            }
+        }
+    }
+
+    /**
+     * Inject custom aspect ratios into the crop form
+     *
+     * @param   Form   $form          The form object
+     * @param   array  $aspectRatios  The aspect ratios from plugin settings
+     *
+     * @return  void
+     *
+     * @since   __DEPLOY_VERSION__
+     */
+    private function injectAspectRatios(Form $form, array $aspectRatios): void
+    {
+        // Get the aspectRatio field (try without group first, then with 'crop' group)
+        $field = $form->getField('aspectRatio');
+
+        if (!$field) {
+            $field = $form->getField('aspectRatio', 'crop');
+        }
+
+        if (!$field) {
+            return;
+        }
+
+        // Build new XML for the field with custom options
+        $xml = new \SimpleXMLElement('<field/>');
+        $xml->addAttribute('name', 'aspectRatio');
+        $xml->addAttribute('type', 'groupedlist');
+        $xml->addAttribute('label', 'PLG_MEDIA-ACTION_CROP_PARAM_ASPECT');
+        $xml->addAttribute('hiddenLabel', 'true');
+        $xml->addAttribute('class', 'crop-aspect-ratio-options');
+        $xml->addAttribute('default', '10/9');
+
+        // Add default options
+        $option = $xml->addChild('option', 'PLG_MEDIA-ACTION_CROP_PARAM_DEFAULT_RATIO');
+        $option->addAttribute('class', 'crop-aspect-ratio-option');
+        $option->addAttribute('value', '10/9');
+
+        $option = $xml->addChild('option', 'PLG_MEDIA-ACTION_CROP_PARAM_NO_RATIO');
+        $option->addAttribute('class', 'crop-aspect-ratio-option');
+        $option->addAttribute('value', '');
+
+        // Group ratios by landscape/portrait
+        $grouped = [
+            ''          => [],
+            'landscape' => [],
+            'portrait'  => [],
+        ];
+
+        foreach ($aspectRatios as $ratio) {
+            // Convert individual ratio to array if it's an object
+            $ratio = (array) $ratio;
+
+            $label = $ratio['label'] ?? '';
+            $value = $ratio['value'] ?? '';
+            $group = strtolower(trim($ratio['group'] ?? ''));
+
+            if (empty($label) || $value === '' || $value === null) {
+                continue;
+            }
+
+            if (!isset($grouped[$group])) {
+                $grouped[$group] = [];
+            }
+
+            $grouped[$group][] = [
+                'label' => $label,
+                'value' => $value,
+                'group' => $group,
+            ];
+        }
+
+        // Add ungrouped ratios
+        foreach ($grouped[''] as $ratio) {
+            $option = $xml->addChild('option', htmlspecialchars($ratio['label'], ENT_XML1, 'UTF-8'));
+            $option->addAttribute('class', 'crop-aspect-ratio-option');
+            $option->addAttribute('value', htmlspecialchars($ratio['value'], ENT_XML1, 'UTF-8'));
+        }
+
+        // Add landscape group
+        if (!empty($grouped['landscape'])) {
+            $group = $xml->addChild('group');
+            $group->addAttribute('label', 'PLG_MEDIA-ACTION_CROP_PARAM_LANDSCAPE');
+
+            foreach ($grouped['landscape'] as $ratio) {
+                $option = $group->addChild('option', htmlspecialchars($ratio['label'], ENT_XML1, 'UTF-8'));
+                $option->addAttribute('class', 'crop-aspect-ratio-option');
+                $option->addAttribute('value', htmlspecialchars($ratio['value'], ENT_XML1, 'UTF-8'));
+            }
+        }
+
+        // Add portrait group
+        if (!empty($grouped['portrait'])) {
+            $group = $xml->addChild('group');
+            $group->addAttribute('label', 'PLG_MEDIA-ACTION_CROP_PARAM_PORTRAIT');
+
+            foreach ($grouped['portrait'] as $ratio) {
+                $option = $group->addChild('option', htmlspecialchars($ratio['label'], ENT_XML1, 'UTF-8'));
+                $option->addAttribute('class', 'crop-aspect-ratio-option');
+                $option->addAttribute('value', htmlspecialchars($ratio['value'], ENT_XML1, 'UTF-8'));
+            }
+        }
+
+        // Replace the field in the form
+        // Try setting in default group first, then 'crop' group
+        if (!$form->setField($xml, null, true)) {
+            $form->setField($xml, 'crop', true);
+        }
+    }
+
     /**
      * Load the javascript files of the plugin.
      *
      * @return  void
      *
      * @since   4.0.0
      */
-    protected function loadJs()
+    protected function loadJs(): void
     {
         parent::loadJs();
 
@@ -50,7 +204,7 @@ protected function loadJs()
      *
      * @since   4.0.0
      */
-    protected function loadCss()
+    protected function loadCss(): void
     {
         parent::loadCss();