feat: improve/transform json output

Author: timnarr

README.md

@@ -144,7 +144,7 @@ $options = [
 
 
 ### JSON Output
-If you need JSON output instead of HTML markup (for headless CMS setups, API endpoints, or JavaScript-driven rendering), use the `imagex-picture.json.php` snippet:
+If you need JSON output instead of HTML markup (for headless CMS setups, API endpoints, or JavaScript-driven rendering), use the `imagex-picture-json.php` snippet:
 
 ```php
 <?php
@@ -155,7 +155,7 @@ $options = [
   // ... all other options work the same
 ];
 
-$json = snippet('imagex-picture.json', $options, true);
+$json = snippet('imagex-picture-json', $options, true);
 echo $json;
 ?>
 ```

docs/examples/json-output.md

@@ -1,14 +1,14 @@
 # Example: JSON Output
 
-The `imagex-picture.json` snippet provides JSON output instead of HTML markup. This is useful for:
+The `imagex-picture-json` snippet provides JSON output instead of HTML markup. This is useful for:
 - Headless CMS setups
 - API endpoints
 - JavaScript-driven rendering (SPA, React, Vue, etc.)
 - Custom client-side image handling
 
 ## Usage
 
-The `imagex-picture.json` snippet accepts the same options as `imagex-picture` but returns JSON data instead of HTML.
+The `imagex-picture-json` snippet accepts the same options as `imagex-picture` but returns JSON data instead of HTML.
 
 ### Global Plugin Config
 ```php
@@ -48,7 +48,7 @@ $options = [
 ];
 
 // Important: Pass `true` as third parameter to return the snippet output
-$json = snippet('imagex-picture.json', $options, true);
+$json = snippet('imagex-picture-json', $options, true);
 
 // Output JSON
 header('Content-Type: application/json');
@@ -96,8 +96,8 @@ $data = json_decode($json, true);
 
 ## Notes
 
-- All options from `imagex-picture` work with `imagex-picture.json`
-- The third parameter (`true`) in `snippet('imagex-picture.json', $options, true)` is required to return the output instead of echoing it
+- All options from `imagex-picture` work with `imagex-picture-json`
+- The third parameter (`true`) in `snippet('imagex-picture-json', $options, true)` is required to return the output instead of echoing it
 - The JSON includes all calculated attributes, srcsets, and URLs
 - Art-directed sources are also included in the `sources` array with their media queries
 - Combine with Kirby's routing system to create custom API endpoints

helpers/attributes.php

@@ -42,12 +42,18 @@ function validateAttributeTypes(array $options): void
  * Merges HTML attributes for different loading modes with optional default values.
  *
  * User attributes always override default attributes. Defaults are used as fallback.
- * Extend 'shared' by 'eager' or 'lazy' loading mode attributes.
+ * Extends 'shared' attributes with 'eager' or 'lazy' loading mode-specific attributes.
+ *
+ * For 'class' and 'style' attributes: Arrays are merged and duplicates removed.
+ * For other attributes: New values override existing values.
+ *
+ * Note: Returns attributes with 'class' and 'style' as arrays. Use transformForJson()
+ * to convert them to strings for JSON output.
  *
  * @param array $attributes User-defined attributes structured by loading modes.
- * @param string $loadingMode The loading mode to merge attributes for.
+ * @param string $loadingMode The loading mode to merge attributes for ('shared', 'eager', or 'lazy').
  * @param array $defaultAttributes Optional default attributes to apply as fallback.
- * @return array Merged array of HTML attributes for specified loading mode.
+ * @return array Merged array of HTML attributes for specified loading mode (class/style as arrays).
  * @throws InvalidArgumentException If $loadingMode is invalid or missing.
  */
 function mergeHTMLAttributes(array $attributes, string $loadingMode, array $defaultAttributes = ['shared' => [], 'eager' => [], 'lazy' => []]): array
@@ -72,8 +78,11 @@ function mergeHTMLAttributes(array $attributes, string $loadingMode, array $defa
 			// Ensure both values are arrays
 			$currentValues = is_array($currentValue) ? $currentValue : explode(' ', $currentValue);
 			$newValues = is_array($newValue) ? $newValue : explode(' ', $newValue);
-			// Merge, remove duplicates, re-index and remove empty values
-			$mergedValues = array_filter(array_values(array_unique(array_merge($currentValues, $newValues))));
+			// Merge, remove duplicates, and remove empty strings (but keep null values)
+			$merged = array_unique(array_merge($currentValues, $newValues));
+			$filtered = array_filter($merged, fn ($val) => $val !== '' && $val !== null && $val !== false);
+			// Re-index array to ensure sequential keys starting from 0
+			$mergedValues = array_values($filtered);
 
 			return $mergedValues;
 		} else {

helpers/misc.php

@@ -141,3 +141,35 @@ function srcHandler(string $src, array $srcAttributes, string $loadingMode): str
 		return null;
 	}
 }
+
+/**
+ * Transforms data for JSON output by converting class/style arrays to strings
+ * and removing null values and empty strings.
+ *
+ * @param mixed $data The data to transform.
+ * @return mixed The transformed data.
+ */
+function transformForJson(mixed $data): mixed
+{
+	if (is_array($data)) {
+		$result = [];
+		foreach ($data as $key => $value) {
+			// Convert class and style arrays to strings
+			if (($key === 'class' || $key === 'style') && is_array($value)) {
+				$value = implode(' ', $value);
+			}
+
+			// Recursively transform nested arrays
+			$transformed = transformForJson($value);
+
+			// Skip null values and empty strings
+			if ($transformed !== null && $transformed !== '') {
+				$result[$key] = $transformed;
+			}
+		}
+
+		return $result;
+	}
+
+	return $data;
+}

index.php

@@ -13,6 +13,6 @@
 	],
 	'snippets' => [
 		'imagex-picture' => __DIR__ . '/snippets/imagex-picture.php',
-		'imagex-picture-json' => __DIR__ . '/snippets/imagex-picture.json.php',
+		'imagex-picture-json' => __DIR__ . '/snippets/imagex-picture-json.php',
 	],
 ]);

snippets/imagex-picture.json.php renamed to snippets/imagex-picture-json.php

@@ -1,6 +1,6 @@
 <?php
 
-use TimNarr\Imagex;
+namespace TimNarr;
 
 $imagex = new Imagex([
 	'critical' => $critical ?? false,
@@ -20,4 +20,6 @@
 	'imgAttributes' => $imagex->getImgAttributes(),
 ];
 
-return json_encode($data, JSON_PRETTY_PRINT);
+$data = transformForJson($data);
+
+echo json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);