Boost: cut off image filenames in the IG analysis report at 20 charac…

…ters to avoid overflow (#31670)

* Cut off the image titles at 20 characters in the IG analysis report

* changelog

* Add "truncateString" function

* Define the length in the truncateString parameter

projects/plugins/boost/app/assets/src/js/modules/image-size-analysis/recommendations/components/RowTitle.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+	import { truncateString } from '../../../../utils/truncate-string';
 	export let title: string;
 	export let url: string;
+	const maxTitleLength = 20;
 
 	const urlWithoutProtocol = url.replace( /^https?:\/\/(www\.)?/, '' );
+	const croppedTitle = truncateString( title, maxTitleLength );
 </script>
 
-<b>{title}</b>
+<b>{croppedTitle}</b>
 <a href={url} target="_blank">
 	{urlWithoutProtocol}
 </a>

projects/plugins/boost/app/assets/src/js/utils/truncate-string.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns a string truncated to a given length.
+ * If truncated, the string will end with an ellipsis.
+ *
+ * @param {string} str       string to truncate
+ * @param {number} maxLength maximum length of the string
+ */
+export function truncateString( str: string, maxLength = 20 ): string {
+	return str.length > maxLength ? str.slice( 0, maxLength ) + '…' : str;
+}

projects/plugins/boost/changelog/fix-overflowing_filenames_image_guide_analysis

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Boost: Cut off image titles at 20 characters in the Image Guide Analysis report