README

此模块旨在允许您快速在管理面板或前端会员区域上传图片，添加图片属性如标题、alt，以及设置位置和图库的主要图片。功能

Ajax文件上传
服务器端缩放
客户端缩放
通过别名缩放图片，并将缩放后的图片存储在缓存中
在图片插入、删除等事件上调用相关模型的函数
编辑图片：缩放、裁剪、旋转。

安装

运行以下命令之一

php composer require wiperawa/yii2-gallery "@dev"

或者将此行添加到您项目的composer.json文件中

"wiperawa/yii2-gallery": "@dev",

然后运行

php composer update

之后运行迁移以创建必要的表

php yii migrate/up --migrationPath=@vendor/wiperawa/yii2-gallery/src/migrations

设置和使用

在您的应用配置文件中添加模块 'gallery'。（通常为main.php）

    'modules' => [
        'gallery' => [
            'class' => 'wiperawa\gallery\Module',
            'imagesStorePath' => dirname(dirname(__DIR__)).'/frontend/web/images/store', //path to origin images
            'imagesCachePath' => dirname(dirname(__DIR__)).'/frontend/web/images/cache', //path to resized copies
            'graphicsLibrary' => 'GD', //Can be GD or Шьфпшсл
            'placeHolderPath' => '@webroot/images/placeHolder.png',
            'access' => ['@'], //roles list who have access to module, remove if dont need it.  
        ],
        //...
    ]

将行为附加到要附加下载图片的模型

    function behaviors()
    {
        return [
            'images' => [
                'class' => 'wiperawa\gallery\behaviors\AttachImages',
                'mode' => 'gallery',
                'quality' => 60,
                'maxWidth' => 1920, //Set if need to resize image by height or width . NOTE that this take action only for server-size resizing, better to use client-side. see widget declaration below.
                'maxHeight' => 1080,
                'galleryId' => 'picture',	//here can be your model name for example
                'allowExtensions' => ['jpg', 'jpeg', 'png', 'gif'],
                'galleryBeforeDelete' => 'galleryBeforeDeleteEvt', // main model method name to fire before Image delete  
                'galleryBeforeInsert' => 'galleryBeforeInsertEvt', // main model method name to fire before Image  insert  
                'galleryBeforeSetMain' => 'galleryBeforeSetMain', // main model method name to fire before Image setMain event  
                'galleryCheckRightsCallback' => 'galleryCheckRightsCallback', // Main Model method that calls from defaultController before any image manipulation. if return false no action performed
            ],
        ];
    }

mode - 上传类型：gallery - 批量上传，single - 单张图片质量（0 - 100）- 压缩质量，0 - 最大压缩，100 - 最大质量。galleryId - 您的图库标识符。可以是模型名称，例如galleryBeforeDelete - 相关模型的函数名称galleryBeforeInsert - 相关模型的函数名称galleryBeforeSetMain - 相关模型的函数名称galleryCheckRightsCallback - 如果设置，将在每个图片操作（如裁剪、更改、删除等）时触发。如果在这里返回false，则操作将被取消。对于前端很有用，例如如果成员应该只有操作他们自己的图片的能力，我们可以检查所有者ID与登录的成员ID

行为使用

$images = $model->getImages();
foreach($images as $img) {
    //retun url to full image
    echo $img->getUrl();

    //return url to proportionally resized image by width
    echo $img->getUrl('300x');

    //return url to proportionally resized image by height
    echo $img->getUrl('x300');

    //return url to resized and cropped (center) image by width and height
    echo $img->getUrl('200x300');

    //return alt text to image
    $img->alt

    //return title to image
    $img->title
    
    //return description image
    $img->description
}

小部件

图片通过小部件下载。将以下参数添加到您的模型CRUD表单的 _form.php 中。以下参数传递给小部件：model -> 将图片附加到的模型，默认为null；previewSize -> 下载图片的预览大小，默认为 '140x140'；label -> 标签，默认 'Image'；fileInputPluginLoading -> 是否在输入位置显示进度加载指示器，默认为true；

fileInputPluginOptions -> 小部件 kartik/file/fileInput 的属性，默认为 []；

如果您使用常规上传，别忘了为表添加 multipart/form-data 选项

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

如果想要使用ajax上传，在 fileInputPluginOptions 中设置 uploadUrl

...
    'fileInputPluginOptions' => [
        'uploadUrl' => Url::to('/your/upload/action')
    ]
...

如果需要，您可以在控制器中创建操作，将上传的图片附加到您的模型中，如下所示

public function actionUploadPhoto($id) {
//$model - Our model with behavior attached
        $model = $this->findModel($id);

        Yii::$app->response->format = Response::FORMAT_JSON;

        try {
            if ($model->setImages(ActiveRecord::EVENT_AFTER_INSERT)) {
                return true;
            }
        } catch (\ErrorException $e) {
            return ['error' => $e->getMessage()];
        }

        return false;
    }

此外，如果您设置了 ResizeImage、maxImageHeight 或 maxImageWidth（如果设置了其中之一，图片将被按比例缩放），图片将在客户端（浏览器）上进行缩放。这样就不会过载服务器。（更多详情请参阅我们的 kartik/file-input）

最后，如果您使用不同的图标框架（iconDelete、iconEdit、IconCrop），可以设置自己的图标。默认为 glyphicons。

<?=\wiperawa\gallery\widgets\Gallery::widget(
    [
        'model' => $model,
        'previewSize' => '140x140',
        'fileInputPluginLoading' => true,
        'fileInputPluginOptions' => [
            'uploadUrl' => Url::to('/your/upload/action'),
            'maxFileCount' => 20,
          //'maxFileSize' => 5120,
          //'resizeImage' => true, //Set to true if need client-side resizing
          //'maxImageWidth' => 1760, //Max width
          //'maxImageHeight' => 1080 //Max height
          //Can set your own icons for buttons, for example if you use bootstrap4
          //'iconDelete' => '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>'
          //'iconCrop' => ...
          //'iconEdit' => ...  
          //'selectedImgLabel' => 'Default'
        ],
   
    ]
); ?>

<?= \wiperawa\gallery\widgets\FrontendGallery::widget([
    'model' => $model,
    'countInput' => 2,
    'classBlockRight' => 'col-sm-12',
    'previewWidth' => '200px',
    'previewHeight' => '150px',
    'informationBlock' => false,
    'otherInputsSettings' => [
        'you-photo' => ['label' => 'Your Photo', 'required' => true],
        'our-work' => ['label' => 'Your Work', 'required' => true],
    ],
]) ?>

擦除器 / yii2-gallery

维护者

详细信息

README

安装

设置和使用

行为使用

小部件