为Laravel Nova创建您自己的软件包:OptimalImage

在开发Laravel Nova用于管理的新项目时,我使用Google的网站管理员工具对其进行了测试。事实证明,该资源上的某些照片没有经过优化-它们的大小可以大大减小。使用node.js构建项目时,可以处理项目中的那些对象。为此有很多现成的软件包。用户仍然直接从站点管理面板上传了静止图像。当然,您可以在上传到站点之前优化每个图像,但是为什么不自动执行此过程。因此,这个想法诞生了,为Laravel Nova制作了一个包装:OptimalImage。


该软件包非常简单,因此不能伪装成为Laravel Nova创建软件包的完整指南。它没有涉及有关使用组件的可视组件的相当广泛的主题。如果出现关于组件的有趣想法,并带有可视组件-我将就该主题写一篇文章。


问题的提法


您要创建一个添加新字段的包。该字段将与
通常的图像加载字段不同,因为将对加载的图像执行优化。


环境的安装和配置。


要重复本指南中的所有步骤,您将需要一个带有Laravel和Laravel Nova的项目。Laravel Nova是一种付费工具,但在我看来,它的价格是可以承受的。


我在工作中使用过:


  1. PHP 7.3.16
  2. Laravel 7
  3. Laravel Nova 3.0

.


. — :


cd /path/to/nova/project
php artisan nova:field yarbala/optimal-image

. nova-components OptimalImage.


nova-components .gitignore git init


cd /path/to/nova/project/nova-components/OptimalImage
git init
git add .
git commit -m "First commit"
git remote add origin git@github.com:yarbala/nova-optimal-image-field.git
git push -u origin master


spatie/laravel-image-optimizer, require composer.json


"spatie/laravel-image-optimizer": "^1.6"

Laravel


composer update

.


:


nova-components/OptimalImage/dist
nova-components/OptimalImage/resources

:


nova-components/OptimalImage/webpack.mix.js
nova-components/OptimalImage/package.json
nova-components/OptimalImage/mix-manifest.json 

OptimalImage :


namespace Yarbala\OptimalImage;

use Illuminate\Contracts\Filesystem\FileNotFoundException;
use Laravel\Nova\Fields\Image;

/**
 *       Image.  ,    
 *   ,      .
 *
 * Class OptimalImage
 * @package Yarbala\OptimalImage
 */
class OptimalImage extends Image
{
    /**
     *        Image 'Fields/File.php'.     
     *    optimizeImage  .
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  string  $requestAttribute
     * @return string
     */
    protected function storeFile($request, $requestAttribute)
    {
        if (! $this->storeAsCallback) {
            $fileName = $request->file($requestAttribute)->store($this->getStorageDir(), $this->getStorageDisk());
            if ($fileName) {
                try {
                    $this->optimizeImage($fileName);
                } catch (FileNotFoundException $e) {
                }
            }

            return $fileName;
        }

        $fileName = $request->file($requestAttribute)->storeAs(
            $this->getStorageDir(), call_user_func($this->storeAsCallback, $request), $this->getStorageDisk()
        );

        if ($fileName) {
            try {
                $this->optimizeImage($fileName);
            } catch (FileNotFoundException $e) {
                //
            }
        }

        return $fileName;
    }

    /**
     *    
     *
     * @param $fileName
     * @throws FileNotFoundException
     */
    protected function optimizeImage($fileName)
    {
        // ...
    }
}

Laravel\Nova\Fields\Image.


public $component = 'optimal-image';

storeFile Laravel\Nova\Fields\File, Laravel\Nova\Fields\Image. . , optimizeImage .


optimizeImage:


namespace Yarbala\OptimalImage;

use Illuminate\Contracts\Filesystem\FileNotFoundException;
use Laravel\Nova\Fields\Image;
use Spatie\ImageOptimizer\OptimizerChain as ImageOptimizer;
use Storage;

/**
 *       Image.  ,    
 *   ,      .
 *
 * Class OptimalImage
 * @package Yarbala\OptimalImage
 */
class OptimalImage extends Image
{
    // ...

    /**
     *    
     *
     * @param $fileName
     * @throws FileNotFoundException
     */
    protected function optimizeImage($fileName)
    {
        $needsUploadBack = false;
        $localDisk = 'local';
        $disk = $this->getStorageDisk();

        /*         Storage,  Spatie\ImageOptimizer    
                    
        */
        if (!Storage::disk($localDisk)->exists($fileName)) {
            Storage::disk($localDisk)->put($fileName, Storage::disk($disk)->get($fileName));
            $needsUploadBack = true;
        }

        //       
        $path = Storage::disk($localDisk)->path($fileName);

        //  
        app(ImageOptimizer::class)->optimize($path);

        //    ,   
        if ($needsUploadBack) {
            Storage::disk($disk)->put($fileName, Storage::disk($localDisk)->get($fileName));
            Storage::disk($localDisk)->delete($fileName);
        }
    }
}

Storage, Spatie\ImageOptimizer . - local.


:


class OptimalImage extends Image
{
    // ....

    public function localDisk(string $disk)
    {
        return $this->withMeta(['localDisk' => $disk]);
    }

    protected function getLocalDisk()
    {
        return $this->meta['localDisk'] ?? 'local';
    }
}

OptimalImage :


<?php

namespace Yarbala\OptimalImage;

use Illuminate\Contracts\Filesystem\FileNotFoundException;
use Laravel\Nova\Fields\Image;
use Spatie\ImageOptimizer\OptimizerChain as ImageOptimizer;
use Illuminate\Support\Facades\Storage;

/**
 *       Image.  ,    
 *   ,      .
 *
 * Class OptimalImage
 * @package Yarbala\OptimalImage
 */
class OptimalImage extends Image
{
    /**
     *        Image 'Fields/File.php'.     
     *      optimizeImage  .
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  string  $requestAttribute
     * @return string
     */
    protected function storeFile($request, $requestAttribute)
    {
        if (! $this->storeAsCallback) {
            $fileName = $request->file($requestAttribute)->store($this->getStorageDir(), $this->getStorageDisk());
            if ($fileName) {
                try {
                    $this->optimizeImage($fileName);
                } catch (FileNotFoundException $e) {
                }
            }

            return $fileName;
        }

        $fileName = $request->file($requestAttribute)->storeAs(
            $this->getStorageDir(), call_user_func($this->storeAsCallback, $request), $this->getStorageDisk()
        );

        if ($fileName) {
            try {
                $this->optimizeImage($fileName);
            } catch (FileNotFoundException $e) {
                //
            }
        }

        return $fileName;
    }

    /**
     *    
     *
     * @param $fileName
     * @throws FileNotFoundException
     */
    protected function optimizeImage($fileName)
    {
        $needsUploadBack = false;
        $localDisk = $this->getLocalDisk();
        $disk = $this->getStorageDisk();

        /*         Storage,  Spatie\ImageOptimizer    
                    
        */
        if (!Storage::disk($localDisk)->exists($fileName)) {
            Storage::disk($localDisk)->put($fileName, Storage::disk($disk)->get($fileName));
            $needsUploadBack = true;
        }

        //       
        $path = Storage::disk($localDisk)->path($fileName);

        //  
        app(ImageOptimizer::class)->optimize($path);

        //    ,   
        if ($needsUploadBack) {
            Storage::disk($disk)->put($fileName, Storage::disk($localDisk)->get($fileName));
            Storage::disk($localDisk)->delete($fileName);
        }
    }

    /**
     *      
     *
     * @param string $disk
     * @return OptimalImage
     */
    public function localDisk(string $disk)
    {
        return $this->withMeta(['localDisk' => $disk]);
    }

    /**
     *   
     * 
     * @return string
     */
    protected function getLocalDisk()
    {
        return $this->meta['localDisk'] ?? 'local';
    }
}

. , config/image-optimizer.php :


php artisan vendor:publish --provider="Spatie\LaravelImageOptimizer\ImageOptimizerServiceProvider"

, .


, readme .


, - . . .


.


该项目的源代码可从MIT许可中获得并以MIT许可的形式分发。


包装包装


Novapackages包装


All Articles