[4.0] webp support (#34690)

brianteeman · web-flow · commit 7a58d05cf5eb · 2021-07-03T20:11:19.000+01:00
# added partial support for webp by adding webp to the Legal Image Extensions (File Types) and Legal MIME Types

This PR completes the support for webp by adding webp to the Allowed Extensions

Also adds thumbnail and icon for webp

Makes sure the default values in the xml matches the base.sql

This PR does __not__ add the ability to edit a webp image as I tried - cropperjs is not compatible with firefox for windows. As a result the edit icon is not displayed for webp images
diff --git a/administrator/components/com_media/config.xml b/administrator/components/com_media/config.xml
@@ -54,7 +54,7 @@
 			label="COM_MEDIA_FIELD_RESTRICT_UPLOADS_EXTENSIONS_LABEL"
 			description="COM_MEDIA_FIELD_RESTRICT_UPLOADS_EXTENSIONS_DESC"
 			size="50"
-			default="bmp,gif,jpg,jpeg,png,ico,mp3,mp4,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv"
+			default="bmp,gif,jpg,jpeg,png,webp,ico,mp3,mp4,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv"
 			showon="restrict_uploads:1"
 		/>
 
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/row.vue b/administrator/components/com_media/resources/scripts/components/browser/items/row.vue
@@ -71,7 +71,7 @@ export default {
       }
 
       // @todo remove the hardcoded extensions here
-      const extensionWithPreview = ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'mp3', 'pdf'];
+      const extensionWithPreview = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'mp4', 'mp3', 'pdf'];
 
       // Show preview
       if (this.item.extension
diff --git a/build/media_source/com_media/scss/components/_media-browser.scss b/build/media_source/com_media/scss/components/_media-browser.scss
@@ -377,7 +377,8 @@
   &[data-type="jpeg" i],
   &[data-type="tiff" i],
   &[data-type="bmp" i],
-  &[data-type="svg" i] {
+  &[data-type="svg" i],
+  &[data-type="webp" i] {
     &::before {
       content: $icon-type-images;
     }
diff --git a/installation/sql/mysql/base.sql b/installation/sql/mysql/base.sql
@@ -157,7 +157,7 @@ INSERT INTO `#__extensions` (`package_id`, `name`, `type`, `element`, `folder`,
 (0, 'com_installer', 'component', 'com_installer', '', 1, 1, 1, 1, 1, '', '{"cachetimeout":"6","minimum_stability":"4"}', ''),
 (0, 'com_languages', 'component', 'com_languages', '', 1, 1, 1, 1, 1, '', '{"administrator":"en-GB","site":"en-GB"}', ''),
 (0, 'com_login', 'component', 'com_login', '', 1, 1, 1, 1, 1, '', '', ''),
-(0, 'com_media', 'component', 'com_media', '', 1, 1, 0, 1, 1, '', '{"upload_maxsize":"10","file_path":"images","image_path":"images","restrict_uploads":"1","allowed_media_usergroup":"3","restrict_uploads_extensions":"bmp,gif,jpg,jpeg,png,ico,mp3,m4a,mp4a,ogg,mp4,mp4v,mpeg,mov,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","check_mime":"1","image_extensions":"bmp,gif,jpg,png,jpeg","audio_extensions":"mp3,m4a,mp4a,ogg","video_extensions":"mp4,mp4v,mpeg,mov,webm","doc_extensions":"odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","ignore_extensions":"","upload_mime":"image\\/jpeg,image\\/gif,image\\/png,image\\/bmp,image\\/webp,audio\\/ogg,audio\\/mpeg,audio\\/mp4,video\\/mp4,video\\/webm,video\\/mpeg,video\\/quicktime,application\\/msword,application\\/excel,application\\/pdf,application\\/powerpoint,text\\/plain,application\\/x-zip"}', ''),
+(0, 'com_media', 'component', 'com_media', '', 1, 1, 0, 1, 1, '', '{"upload_maxsize":"10","file_path":"images","image_path":"images","restrict_uploads":"1","allowed_media_usergroup":"3","restrict_uploads_extensions":"bmp,gif,jpg,jpeg,png,webp,ico,mp3,m4a,mp4a,ogg,mp4,mp4v,mpeg,mov,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","check_mime":"1","image_extensions":"bmp,gif,jpg,png,jpeg,webp","audio_extensions":"mp3,m4a,mp4a,ogg","video_extensions":"mp4,mp4v,mpeg,mov,webm","doc_extensions":"odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","ignore_extensions":"","upload_mime":"image\\/jpeg,image\\/gif,image\\/png,image\\/bmp,image\\/webp,audio\\/ogg,audio\\/mpeg,audio\\/mp4,video\\/mp4,video\\/webm,video\\/mpeg,video\\/quicktime,application\\/msword,application\\/excel,application\\/pdf,application\\/powerpoint,text\\/plain,application\\/x-zip"}', ''),
 (0, 'com_menus', 'component', 'com_menus', '', 1, 1, 1, 1, 1, '', '{"page_title":"","show_page_heading":0,"page_heading":"","pageclass_sfx":""}', ''),
 (0, 'com_messages', 'component', 'com_messages', '', 1, 1, 1, 1, 1, '', '', ''),
 (0, 'com_modules', 'component', 'com_modules', '', 1, 1, 1, 1, 1, '', '', ''),
diff --git a/installation/sql/postgresql/base.sql b/installation/sql/postgresql/base.sql
@@ -163,7 +163,7 @@ INSERT INTO "#__extensions" ("package_id", "name", "type", "element", "folder",
 (0, 'com_installer', 'component', 'com_installer', '', 1, 1, 1, 1, 1, '', '{"cachetimeout":"6","minimum_stability":"4"}', '', 0, 0),
 (0, 'com_languages', 'component', 'com_languages', '', 1, 1, 1, 1, 1, '', '{"administrator":"en-GB","site":"en-GB"}', '', 0, 0),
 (0, 'com_login', 'component', 'com_login', '', 1, 1, 1, 1, 1, '', '', '', 0, 0),
-(0, 'com_media', 'component', 'com_media', '', 1, 1, 0, 1, 1, '', '{"upload_maxsize":"10","file_path":"images","image_path":"images","restrict_uploads":"1","allowed_media_usergroup":"3","restrict_uploads_extensions":"bmp,gif,jpg,jpeg,png,ico,mp3,m4a,mp4a,ogg,mp4,mp4v,mpeg,mov,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","check_mime":"1","image_extensions":"bmp,gif,jpg,png,jpeg","audio_extensions":"mp3,m4a,mp4a,ogg","video_extensions":"mp4,mp4v,mpeg,mov,webm","doc_extensions":"odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","ignore_extensions":"","upload_mime":"image\\/jpeg,image\\/gif,image\\/png,image\\/bmp,image\\/webp,audio\\/ogg,audio\\/mpeg,audio\\/mp4,video\\/mp4,video\\/webm,video\\/mpeg,video\\/quicktime,application\\/msword,application\\/excel,application\\/pdf,application\\/powerpoint,text\\/plain,application\\/x-zip"}', '', 0, 0),
+(0, 'com_media', 'component', 'com_media', '', 1, 1, 0, 1, 1, '', '{"upload_maxsize":"10","file_path":"images","image_path":"images","restrict_uploads":"1","allowed_media_usergroup":"3","restrict_uploads_extensions":"bmp,gif,jpg,jpeg,png,ico,webp,mp3,m4a,mp4a,ogg,mp4,mp4v,mpeg,mov,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","check_mime":"1","image_extensions":"bmp,gif,jpg,png,jpeg,webp","audio_extensions":"mp3,m4a,mp4a,ogg","video_extensions":"mp4,mp4v,mpeg,mov,webm","doc_extensions":"odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv","ignore_extensions":"","upload_mime":"image\\/jpeg,image\\/gif,image\\/png,image\\/bmp,image\\/webp,audio\\/ogg,audio\\/mpeg,audio\\/mp4,video\\/mp4,video\\/webm,video\\/mpeg,video\\/quicktime,application\\/msword,application\\/excel,application\\/pdf,application\\/powerpoint,text\\/plain,application\\/x-zip"}', '', 0, 0),
 (0, 'com_menus', 'component', 'com_menus', '', 1, 1, 1, 1, 1, '', '{"page_title":"","show_page_heading":0,"page_heading":"","pageclass_sfx":""}', '', 0, 0),
 (0, 'com_messages', 'component', 'com_messages', '', 1, 1, 1, 1, 1, '', '', '', 0, 0),
 (0, 'com_modules', 'component', 'com_modules', '', 1, 1, 1, 1, 1, '', '', '', 0, 0),
diff --git a/libraries/src/Helper/MediaHelper.php b/libraries/src/Helper/MediaHelper.php
@@ -35,7 +35,7 @@ class MediaHelper
 	 */
 	public static function isImage($fileName)
 	{
-		static $imageTypes = 'xcf|odg|gif|jpg|jpeg|png|bmp';
+		static $imageTypes = 'xcf|odg|gif|jpg|jpeg|png|bmp|webp';
 
 		return preg_match("/\.(?:$imageTypes)$/i", $fileName);
 	}
@@ -127,7 +127,7 @@ private function checkMimeType($mime, $component = 'com_media'): bool
 		{
 			$allowedMime = $params->get(
 				'upload_mime',
-				'image/jpeg,image/gif,image/png,image/bmp,application/msword,application/excel,' .
+				'image/jpeg,image/gif,image/png,image/bmp,image/webp,application/msword,application/excel,' .
 					'application/pdf,application/powerpoint,text/plain,application/x-zip'
 			);
 

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ export default {`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`// @todo remove the hardcoded extensions here`
`74`		`- const extensionWithPreview = ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'mp3', 'pdf'];`
	`74`	`+ const extensionWithPreview = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'mp4', 'mp3', 'pdf'];`
`75`	`75`
`76`	`76`	`// Show preview`
`77`	`77`	`if (this.item.extension`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ class MediaHelper`
`35`	`35`	`*/`
`36`	`36`	`public static function isImage($fileName)`
`37`	`37`	`{`
`38`		`- static $imageTypes = 'xcf\|odg\|gif\|jpg\|jpeg\|png\|bmp';`
	`38`	`+ static $imageTypes = 'xcf\|odg\|gif\|jpg\|jpeg\|png\|bmp\|webp';`
`39`	`39`
`40`	`40`	`return preg_match("/\.(?:$imageTypes)$/i", $fileName);`
`41`	`41`	`}`
`@@ -127,7 +127,7 @@ private function checkMimeType($mime, $component = 'com_media'): bool`
`127`	`127`	`{`
`128`	`128`	`$allowedMime = $params->get(`
`129`	`129`	`'upload_mime',`
`130`		`- 'image/jpeg,image/gif,image/png,image/bmp,application/msword,application/excel,' .`
	`130`	`+ 'image/jpeg,image/gif,image/png,image/bmp,image/webp,application/msword,application/excel,' .`
`131`	`131`	`'application/pdf,application/powerpoint,text/plain,application/x-zip'`
`132`	`132`	`);`
`133`	`133`