From a01a6119909143c5d1d9aaeb93b1f56de81145c5 Mon Sep 17 00:00:00 2001
From: Diego Najar <dignajar@gmail.com>
Date: Mon, 5 Sep 2022 20:06:18 +0200
Subject: [PATCH] add support to webp images, improve UI

---
 bl-kernel/admin/themes/booty/html/media.php | 16 ++++++++--------
 bl-kernel/boot/variables.php                |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/bl-kernel/admin/themes/booty/html/media.php b/bl-kernel/admin/themes/booty/html/media.php
index 0b61bf20..6446da35 100644
--- a/bl-kernel/admin/themes/booty/html/media.php
+++ b/bl-kernel/admin/themes/booty/html/media.php
@@ -36,7 +36,7 @@ $numberOfPages = count($listOfFilesByPage);
 		</form>
 
 		<!-- Progress bar -->
-		<div class="progress mt-2">
+		<div class="progress mt-3">
 			<div id="jsbluditProgressBar" class="progress-bar bg-primary" role="progressbar" style="width:0%"></div>
 		</div>
 
@@ -44,7 +44,7 @@ $numberOfPages = count($listOfFilesByPage);
 		IMAGES LIST
 	-->
 		<!-- Table for list files -->
-		<table id="jsbluditMediaTable" class="table mt-2">
+		<table id="jsbluditMediaTable" class="table mt-3">
 			<tr>
 				<td><?php $L->p('There are no images'); ?></td>
 			</tr>
@@ -105,12 +105,12 @@ function displayFiles(files, numberOfPages = <?= $numberOfPages ?>) {
 			tableRow = '<tr id="js'+filename+'">'+
 					'<td style="width:80px"><img class="img-thumbnail" alt="200x200" src="'+thumbnail+'" style="width: 50px; height: 50px;"><\/td>'+
 					'<td class="information">'+
-						'<div class="text-primary pb-2">'+filename+'<\/div>'+
+						'<div class="text-secondary pb-2">'+filename+'<\/div>'+
 						'<div>'+
-							'<a href="#" class="mr-3 text-secondary" onClick="editorInsertMedia(\''+image+'\'); closeMediaManager();"><i class="fa fa-plus"></i><?php $L->p('Insert') ?><\/a>'+
-							'<a href="#" class="mr-3 text-secondary" onClick="editorInsertMedia(\''+thumbnail+'\'); closeMediaManager();"><i class="fa fa-search"></i><?php $L->p('Insert thumbnail') ?><\/a>'+
-							'<a href="#" class="mr-3 text-secondary" onClick="editorInsertLinkedMedia(\''+thumbnail+'\',\''+image+'\'); closeMediaManager();"><i class="fa fa-link"></i><?php $L->p('Insert linked thumbnail') ?><\/a>'+
-							'<a href="#" class="text-secondary" onClick="setCoverImage(\''+filename+'\'); closeMediaManager();"><i class="fa fa-square-o"></i><?php $L->p('Set as cover image') ?><\/button>'+
+							'<a href="#" class="mr-3 text-primary" onClick="editorInsertMedia(\''+image+'\'); closeMediaManager();"><i class="fa fa-plus-circle"></i><?php $L->p('Insert') ?><\/a>'+
+							'<a href="#" class="mr-3 text-primary" onClick="editorInsertMedia(\''+thumbnail+'\'); closeMediaManager();"><i class="fa fa-image"></i><?php $L->p('Insert thumbnail') ?><\/a>'+
+							'<a href="#" class="mr-3 text-primary" onClick="editorInsertLinkedMedia(\''+thumbnail+'\',\''+image+'\'); closeMediaManager();"><i class="fa fa-link"></i><?php $L->p('Insert linked thumbnail') ?><\/a>'+
+							'<a href="#" class="text-primary" onClick="setCoverImage(\''+filename+'\'); closeMediaManager();"><i class="fa fa-desktop"></i><?php $L->p('Set as cover image') ?><\/button>'+
 							'<a href="#" class="float-right text-danger" onClick="deleteMedia(\''+filename+'\')"><i class="fa fa-trash-o"></i><?php $L->p('Delete') ?><\/a>'+
 						'<\/div>'+
 					'<\/td>'+
@@ -181,7 +181,7 @@ function uploadImages() {
 	var images = $("#jsimages")[0].files;
 	for (var i=0; i < images.length; i++) {
 		// Check file type/extension
-		const validImageTypes = ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml'];
+		const validImageTypes = ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp'];
 		if (!validImageTypes.includes(images[i].type)) {
 			showMediaAlert("<?php echo $L->g('File type is not supported. Allowed types:').' '.implode(', ',$GLOBALS['ALLOWED_IMG_EXTENSION']) ?>");
 			return false;
diff --git a/bl-kernel/boot/variables.php b/bl-kernel/boot/variables.php
index 94941f77..bbc93c86 100644
--- a/bl-kernel/boot/variables.php
+++ b/bl-kernel/boot/variables.php
@@ -107,7 +107,7 @@ define('MEDIA_MANAGER_SORT_BY_DATE', true);
 $GLOBALS['DB_TAGS_TYPES'] = array('published','static','sticky');
 
 // Allowed image extensions
-$GLOBALS['ALLOWED_IMG_EXTENSION'] = array('gif', 'png', 'jpg', 'jpeg', 'svg');
+$GLOBALS['ALLOWED_IMG_EXTENSION'] = array('gif', 'png', 'jpg', 'jpeg', 'svg', 'webp');
 
 // Allowed image mime types
-$GLOBALS['ALLOWED_IMG_MIMETYPES'] = array('image/gif', 'image/png', 'image/jpeg', 'image/svg+xml');
+$GLOBALS['ALLOWED_IMG_MIMETYPES'] = array('image/gif', 'image/png', 'image/jpeg', 'image/svg+xml', 'image/webp');