sinus/yii2-filemanager

Yii2 filemanager

Installs: 2

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 90

Type:yii2-extension

dev-master 2020-02-21 15:56 UTC

This package is auto-updated.

Last update: 2022-04-27 19:42:10 UTC


README

This module provide interface to collect and access all mediafiles in one place. Inspired by WordPress file manager.

Features

  • Integrated with TinyMCE editor.
  • Automatically create actually directory for uploaded files like "2014/12".
  • Automatically create thumbs for uploaded images
  • Unlimited number of sets of miniatures
  • All media files are stored in a database that allows you to attach to your object does not link to the image, and the id of the media file. This provides greater flexibility since in the future will be easy to change the size of thumbnails.
  • If your change thumbs sizes, your may resize all existing thumbs in settings.

Screenshots

687474703a2f2f7a61626f6c6f74736b696b682e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031342f31322f796969322d66696c656d616e616765722d75706c6f61642e706e67

687474703a2f2f7a61626f6c6f74736b696b682e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031342f31322f796969322d66696c656d616e616765722d696d6167652d73656c6563742e706e67

687474703a2f2f7a61626f6c6f74736b696b682e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031342f31322f796969322d66696c656d616e616765722d696e6465782e706e67

687474703a2f2f7a61626f6c6f74736b696b682e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031342f31322f796969322d66696c656d616e616765722d66696c65732d696e2d61646d696e2e706e67

687474703a2f2f7a61626f6c6f74736b696b682e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031342f31322f796969322d66696c656d616e616765722d73657474696e67732e706e67

687474703a2f2f7a61626f6c6f74736b696b682e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031342f31322f796969322d66696c656d616e616765722d73656c65637465642d696d6167652e706e67

687474703a2f2f7a61626f6c6f74736b696b682e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031342f31322f796969322d66696c656d616e616765722d73656c65637465642d696d6167652d776974686f75742d696e7075742e706e67

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist pendalf89/yii2-filemanager "*"

or add

"pendalf89/yii2-filemanager": "*"

to the require section of your composer.json file.

Apply migration

yii migrate --migrationPath=vendor/pendalf89/yii2-filemanager/migrations

Configuration:

'modules' => [
    'filemanager' => [
        'class' => 'pendalf89\filemanager\Module',
        // Upload routes
        'routes' => [
            // Base absolute path to web directory
            'baseUrl' => '',
            // Base web directory url
            'basePath' => '@frontend/web',
            // Path for uploaded files in web directory
            'uploadPath' => 'uploads',
        ],
        // Thumbnails info
        'thumbs' => [
            'small' => [
                'name' => 'Мелкий',
                'size' => [100, 100],
            ],
            'medium' => [
                'name' => 'Средний',
                'size' => [300, 200],
            ],
            'large' => [
                'name' => 'Большой',
                'size' => [500, 400],
            ],
        ],
    ],
],

By default, thumbnails are resized in "outbound" or "fill" mode. To switch to "inset" or "fit" mode, use mode parameter and provide. Possible values: outbound (\Imagine\Image\ImageInterface::THUMBNAIL_OUTBOUND) or inset (\Imagine\Image\ImageInterface::THUMBNAIL_INSET):

'thumbs' => [
    'small' => [
        'name' => 'Мелкий',
        'size' => [100, 100],
    ],
    'medium' => [
        'name' => 'Средний',
        'size' => [300, 200],
    ],
    'large' => [
        'name' => 'Большой',
        'size' => [500, 400],
        'mode' => \Imagine\Image\ImageInterface::THUMBNAIL_INSET
    ],
],

Usage

Simple standalone field:

use pendalf89\filemanager\widgets\FileInput;

echo $form->field($model, 'original_thumbnail')->widget(FileInput::className(), [
    'buttonTag' => 'button',
    'buttonName' => 'Browse',
    'buttonOptions' => ['class' => 'btn btn-default'],
    'options' => ['class' => 'form-control'],
    // Widget template
    'template' => '<div class="input-group">{input}<span class="input-group-btn">{button}</span></div>',
    // Optional, if set, only this image can be selected by user
    'thumb' => 'original',
    // Optional, if set, in container will be inserted selected image
    'imageContainer' => '.img',
    // Default to FileInput::DATA_URL. This data will be inserted in input field
    'pasteData' => FileInput::DATA_URL,
    // JavaScript function, which will be called before insert file data to input.
    // Argument data contains file data.
    // data example: [alt: "Ведьма с кошкой", description: "123", url: "/uploads/2014/12/vedma-100x100.jpeg", id: "45"]
    'callbackBeforeInsert' => 'function(e, data) {
        console.log( data );
    }',
]);

echo FileInput::widget([
    'name' => 'mediafile',
    'buttonTag' => 'button',
    'buttonName' => 'Browse',
    'buttonOptions' => ['class' => 'btn btn-default'],
    'options' => ['class' => 'form-control'],
    // Widget template
    'template' => '<div class="input-group">{input}<span class="input-group-btn">{button}</span></div>',
    // Optional, if set, only this image can be selected by user
    'thumb' => 'original',
    // Optional, if set, in container will be inserted selected image
    'imageContainer' => '.img',
    // Default to FileInput::DATA_IDL. This data will be inserted in input field
    'pasteData' => FileInput::DATA_ID,
    // JavaScript function, which will be called before insert file data to input.
    // Argument data contains file data.
    // data example: [alt: "Ведьма с кошкой", description: "123", url: "/uploads/2014/12/vedma-100x100.jpeg", id: "45"]
    'callbackBeforeInsert' => 'function(e, data) {
        console.log( data );
    }',
]);

With TinyMCE:

use pendalf89\filemanager\widgets\TinyMCE;

<?= $form->field($model, 'content')->widget(TinyMCE::className(), [
    'clientOptions' => [
           'language' => 'ru',
        'menubar' => false,
        'height' => 500,
        'image_dimensions' => false,
        'plugins' => [
            'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code contextmenu table',
        ],
        'toolbar' => 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
    ],
]); ?>

In model you must set mediafile behavior like this example:

use pendalf89\filemanager\behaviors\MediafileBehavior;

public function behaviors()
{
    return [
        'mediafile' => [
            'class' => MediafileBehavior::className(),
            'name' => 'post',
            'attributes' => [
                'thumbnail',
            ],
        ]
    ];
}

Than, you may get mediafile from your owner model. See example:

use pendalf89\filemanager\models\Mediafile;

$model = Post::findOne(1);
$mediafile = Mediafile::loadOneByOwner('post', $model->id, 'thumbnail');

// Ok, we have mediafile object! Let's do something with him:
// return url for small thumbnail, for example: '/uploads/2014/12/flying-cats.jpg'
echo $mediafile->getThumbUrl('small');
// return image tag for thumbnail, for example: '<img src="/uploads/2014/12/flying-cats.jpg" alt="Летающие коты">'
echo $mediafile->getThumbImage('small'); // return url for small thumbnail