Hôm nay tôi chia sẻ với các bạn cách để custom một tấm hình khi upload bằng ckfinder lên website, Custom ở đây các bạn có thể hiểu là => Tôi sẽ custom lại thẻ phần tử html và insert ngược lại nội dung trong ckeditor

Thông thường ckfinder khi upload ảnh lên nó sẽ sinh ra thẻ <img />, nay tôi custom nó lại thành như sau:

<picture>
            <source type="image/webp" setsrc="${imageSrcUrl}.webp">
            <img src="${imageSrcUrl}.webp" alt="" style="height:333px; width:500px">
 </picture>

Ah quên nói các bạn là, để có hình webp bạn cũng phải kết hợp việc chuyển hình từ jpg, png => webp nhé, chứ không phải custom là nó ra webp liên, mà ta cần phải convert nó ra hình webp trước rồi mới custom lại đường dẫn hình chứa file webp đó

Sau khi có hình webp và biết cách convert hình đến webp, thì bạn tiến hành kết hợp với việc custom nó như đoạn code sau:

Dưới đây là đoạn code khi thực hiện custom nó

<script>

    // bat su kien chon file ckfinder

    CKEDITOR.on('dialogDefinition', function(ev) {
        // Take the dialog name and its definition from the event data
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        var editor = ev.editor;
        if (dialogName == 'image') {
         dialogDefinition.onOk = function(e) {

          var imageSrcUrl = e.sender.originalElement.$.src;

          //goi ajax resize luon
          
          const xhttp = new XMLHttpRequest();
          xhttp.onload = function() {
            // location.reload();
            imageSrcUrl = imageSrcUrl.replace("/hinhanh/", "/webp/");
            var hkt_html = `<picture>
            <source type="image/webp" setsrc="${imageSrcUrl}.webp">
            <img src="${imageSrcUrl}.webp" alt="" style="height:333px; width:500px">
            </picture>`;
            var imgHtml = CKEDITOR.dom.element.createFromHtml(hkt_html);
            editor.insertElement(imgHtml);

          }
          xhttp.open("POST", "/getWebp.php");
          xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          xhttp.send("UrlHinh="+imageSrcUrl);
        };
      }
    });
</script>

Các bạn chú ý bên trên mình có viết một ajax với method="post" gửi đến file getWebp.php

Đây File getWebp.php

<?php

include "DB.php";
$db = new DB;
$UrlHinh = $_GET['UrlHinh'];
if ($UrlHinh != '') {
    $db->hkt_resize($UrlHinh, 200, 155);
    $db->hkt_resize($UrlHinh, 120, 95);
     $db->hkt_resize($UrlHinh, 150, 100);
    $db->hkt_resize($UrlHinh, 400, 320);
    $db->hkt_saveWebp($UrlHinh);
     $db->hkt_saveWebp(str_replace("/hinhanh/", "/resize/200x155/", $UrlHinh));
     $db->hkt_saveWebp(str_replace("/hinhanh/", "/resize/120x95/", $UrlHinh));
     $db->hkt_saveWebp(str_replace("/hinhanh/", "/resize/150x100/", $UrlHinh));
    $db->
hkt_saveWebp(str_replace("/hinhanh/", "/resize/400x320/", $UrlHinh));
}

Tiếp tục là file class DB.php ( giúp xử lý việc convert)

<?php 
//wp-admin dir
 class DB{
    public function hkt_saveWebp($UrlHinh)
    {
    	// echo $UrlHinh;echo "</br>";
    	// echo $UrlHinh;
    	// echo "</br>";
    	// echo $_SERVER['DOCUMENT_ROOT'] ;echo "</br>";
    	$file_name = basename($UrlHinh);
    	$path_get_content = $_SERVER['DOCUMENT_ROOT'] ."/". str_replace("https://hoanguyenit.com/", "", $UrlHinh);
    	// echo $path_get_content;echo "</br>";
    	$path_to = str_replace($file_name, "", $path_get_content);

    	if (strpos($path_to, "/resize/")) {
            // neu hien tai hinh anh nam trong thu muc resize
    		$path_to = str_replace("/resize/", "/webp/", $path_to);
    	} else {
    		$path_to = str_replace("/hinhanh/", "/webp/", $path_to);
    	}
    	// echo $path_get_content;echo "</br>";
    	// echo $path_to;echo "</br>";
        //kiem tra duong dan file
    	if (!file_exists($path_to)) {
    		mkdir($path_to, 0777, true);
    	}

        //filename : duong dan thu muc
    	$image = imagecreatefromstring(file_get_contents($path_get_content));
    	ob_start();
    	imagejpeg($image, NULL, 100);
    	$content1 = ob_get_contents();
    	ob_end_clean();
    	imagedestroy($image);
    	$content2 = imagecreatefromstring($content1);
    	$output = $path_to . $file_name . ".webp";
    	// exit();
    	imagewebp($content2, $output);
    	imagedestroy($content2);
    	// echo 1;exit();
    }


    public function hkt_resize($UrlHinh,$newWidth,$newHeight){
    	$file_name = basename($UrlHinh);
    	$path_get_content = $_SERVER['DOCUMENT_ROOT'] ."/". str_replace("https://hoanguyenit.com/", "", $UrlHinh);
    	list($width,$height,$type)= getimagesize($path_get_content);
    	// echo strtolower(image_type_to_mime_type($type));exit();
    	$newImage = imagecreatetruecolor($newWidth,$newHeight);

    	// kiem tra file nhap vao
    	switch(strtolower(image_type_to_mime_type($type)))
		{
			case 'image/jpeg':
			$source = imagecreatefromjpeg($path_get_content);
			break;
			case 'image/jpg':
			$source = imagecreatefromjpeg($path_get_content);
			break;      
			case 'image/png':
			$source = imagecreatefrompng($path_get_content);
			break;
			case 'image/gif':
			$source = imagecreatefromgif($path_get_content);
			break;
			default:
			return false;
		}

    	imagecopyresized($newImage, $source,0,0,0,0,$newWidth, $newHeight,$width,$height);

    	$path_to = str_replace($file_name, "", $path_get_content);
    	$path_to = str_replace("/hinhanh/", "/resize/{$newWidth}x{$newHeight}/", $path_to);

    	if (!file_exists($path_to)) {
    		mkdir($path_to, 0777, true);
    	}

    	//save image
    	imagejpeg($newImage,$path_to.$file_name);
    }

  

 }

Vậy là xong, mọi người có thể thử xem nhé

Mà thật nói webp nó giúp bạn tối ưu website của bạn rất nhiều, giúp web load nhẹ hơn, tối ưu hình ảnh hơn.