agenciafmd/admix-media

媒体 - Agência F&MD

维护者

详细信息

github.com/agenciafmd/admix-media

主页

源代码

问题

安装次数: 3,302

依赖项: 1

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

dev-master 2023-08-04 13:51 UTC

Requires

MIT c231ab3378d9a45437a878464225253685212205

This package is auto-updated.

Last update: 2024-09-04 16:09:27 UTC

README

Downloads Licença

  • 简化文件和图像上传
  • 生成 pjpg 和 webp 格式的小图

安装

composer require agenciafmd/admix-media:dev-master

强烈建议安装这些应用程序。

sudo apt-get install jpegoptim
sudo apt-get install optipng
sudo apt-get install pngquant
sudo npm install -g svgo
sudo apt-get install gifsicle
sudo apt-get install webp

执行迁移

php artisan migrate

由于我们以 spatie/laravel-medialibrary 为基础，因此安装过程几乎相同。

use Agenciafmd\Media\Traits\MediaTrait;
use Spatie\MediaLibrary\HasMedia;

class YourModel extends Model implements HasMedia
{
    use MediaTrait;

    protected $guarded = [
        'media',
    ];
}

配置

默认情况下，包的配置是

  • 保持图像队列的缩放
  • 优化所有图像为发送质量的 95%
  • 使用包提供的视图进行图像渲染

如有需要，您可以自定义这些配置

php artisan vendor:publish --force --tag=admix-media:config

缩放

了解该包创建的缩略图将被用于我们的应用程序非常重要。要配置这些大小，需要在每个包中创建配置文件（upload-configs.php）。我知道这听起来很复杂，但实际上更容易。

return [
    'customer' => [ //nome da model em minusculo
        'image' => [ //nome do campo em minusculo
            'label' => 'imagem', //label do campo
            'multiple' => false, //se permite o upload multiplo
            'faker_dir' => false, #database_path('faker/customer/image'),
            'sources' => [
                [
                    'conversion' => 'min-width-1366',
                    'media' => '(min-width: 1366px)',
                    'width' => 938,
                    'height' => 680,
                ],
                [
                    'conversion' => 'min-width-1280',
                    'media' => '(min-width: 1280px)',
                    'width' => 776,
                    'height' => 565,
                ],
            ],
            // esta solução, permite mais de um campo na descrição da imagem
            // é muito util para galeria de imagens que possuem mais 
            // de uma simples descrição, como no exemplo abaixo.
            // Lembrando que este item é opcional e deve ser 
            // suprimido sempre que possivel.
            'meta' => [
                [
                    'label' => 'tipo',
                    'name' => 'type',
                    'options' => [
                        'Plantas Baixas',
                        'Implantações',
                    ],
                ],
                [
                    'label' => 'título',
                    'name' => 'title',
                ],
                [
                    'label' => 'descrição',
                    'name' => 'description',
                    'textarea' => true,
                ],
            ],
        ],
    ],
];

数据生成器

配置数据生成器以接收图像

...

$faker = Factory::create('pt_BR');

Category::factory($this->total)
    ->create()
    ->each(function ($category) use ($faker) {
        foreach (config('upload-configs.faqs-categories') as $key => $image) {
            $fakerDir = __DIR__ . '/../faker/faqs-categories/' . $key;

            if ($image['faker_dir']) {
                $fakerDir = $image['faker_dir'];
            }

            if ($image['multiple']) {
                $items = $faker->numberBetween(0, 6);
                for ($i = 0; $i < $items; $i++) {
                    $category->doUploadMultiple($faker->file($fakerDir, storage_path('admix/tmp')), $key);
                }
            } else {
                $category->doUpload($faker->file($fakerDir, storage_path('admix/tmp')), $key);
            }
        }

        $category->save();

        $this->command->getOutput()
            ->progressAdvance();
    });

Admix

为了在我们的包中放置上传字段，我们将前往 form.blade.php。按照惯例，在多文件上传时，我们将保持字段名称的单数形式。

{{ Form::bsImage('Imagem', 'image', $model) }}

{{ Form::bsImages('Imagens', 'images', $model) }}

{{ Form::bsMedia('Arquivo', 'file', $model) }}

{{ Form::bsMedias('Arquivos', 'files', $model) }}

或者“延迟”模式，其中 user 是我们的 model 名称的小写

@foreach(config('upload-configs.user') as $field => $upload)
    @if($upload['multiple'])
        {{ Form::bsImages($upload['label'], $field, $model) }}
    @else
        {{ Form::bsImage($upload['label'], $field, $model) }}
    @endif
@endforeach

我们不要忘记我们亲爱的 Request

class YourRequest extends FormRequest
{
    public function rules()
    {
        return [
            'media' => [
                'array',
                'nullable',
            ],
        ];
    }
}

前端

由于我们的一个想法是优化显示图像的过程，因此包中提供了一些便利。

例如

{{ $model->picture('image') }}
<picture>
    <source media="(min-width: 1366px)"
            srcset="/storage/81/conversions/irineu-junior-200810171044000-min-width-1366-webp.webp, /storage/81/conversions/irineu-junior-200810171044000-min-width-1366-webp@2x.webp 2x">
    <source media="(min-width: 1366px)"
            srcset="/storage/81/conversions/irineu-junior-200810171044000-min-width-1366.jpg, /storage/81/conversions/irineu-junior-200810171044000-min-width-1366@2x.jpg 2x">
    <source media="(min-width: 1280px)"
            srcset="/storage/81/conversions/irineu-junior-200810171044000-min-width-1280-webp.webp, /storage/81/conversions/irineu-junior-200810171044000-min-width-1280-webp@2x.webp 2x">
    <source media="(min-width: 1280px)"
            srcset="/storage/81/conversions/irineu-junior-200810171044000-min-width-1280.jpg, /storage/81/conversions/irineu-junior-200810171044000-min-width-1280@2x.jpg 2x">
    <img src="data:image/png;base64, R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
         loading="lazy"
         class="img-fluid"
         title="irineu-junior-200810171044000.jpg"
         alt="irineu-junior-200810171044000.jpg"></picture>
@foreach($model->fancyPictures() as $picture)
    {{ $picture }}
@endforeach
<a href="/storage/82/irineu-junior-200810171121000.jpg"
   data-fancybox="images"
   data-caption="irineu-junior-200810171121000.jpg"
   class="">
    <picture>
        <source media="(min-width: 1366px)"
                srcset="/storage/82/conversions/irineu-junior-200810171121000-min-width-1366-webp.webp, /storage/82/conversions/irineu-junior-200810171121000-min-width-1366-webp@2x.webp 2x">
        <source media="(min-width: 1366px)"
                srcset="/storage/82/conversions/irineu-junior-200810171121000-min-width-1366.jpg, /storage/82/conversions/irineu-junior-200810171121000-min-width-1366@2x.jpg 2x">
        <source media="(min-width: 1280px)"
                srcset="/storage/82/conversions/irineu-junior-200810171121000-min-width-1280-webp.webp, /storage/82/conversions/irineu-junior-200810171121000-min-width-1280-webp@2x.webp 2x">
        <source media="(min-width: 1280px)"
                srcset="/storage/82/conversions/irineu-junior-200810171121000-min-width-1280.jpg, /storage/82/conversions/irineu-junior-200810171121000-min-width-1280@2x.jpg 2x">
        <img src="data:image/png;base64, R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
             loading="lazy"
             class="img-fluid"
             title="irineu-junior-200810171121000.jpg"
             alt="irineu-junior-200810171121000.jpg"></picture></a>

<a href="/storage/83/irineu-junior-200810171123000.jpg"
   data-fancybox="images"
   data-caption="irineu-junior-200810171123000.jpg"
   class="">
    <picture>
        <source media="(min-width: 1366px)"
                srcset="/storage/83/conversions/irineu-junior-200810171123000-min-width-1366-webp.webp, /storage/83/conversions/irineu-junior-200810171123000-min-width-1366-webp@2x.webp 2x">
        <source media="(min-width: 1366px)"
                srcset="/storage/83/conversions/irineu-junior-200810171123000-min-width-1366.jpg, /storage/83/conversions/irineu-junior-200810171123000-min-width-1366@2x.jpg 2x">
        <source media="(min-width: 1280px)"
                srcset="/storage/83/conversions/irineu-junior-200810171123000-min-width-1280-webp.webp, /storage/83/conversions/irineu-junior-200810171123000-min-width-1280-webp@2x.webp 2x">
        <source media="(min-width: 1280px)"
                srcset="/storage/83/conversions/irineu-junior-200810171123000-min-width-1280.jpg, /storage/83/conversions/irineu-junior-200810171123000-min-width-1280@2x.jpg 2x">
        <img src="data:image/png;base64, R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
             loading="lazy"
             class="img-fluid"
             title="irineu-junior-200810171123000.jpg"
             alt="irineu-junior-200810171123000.jpg"></picture></a>
{{ $model->file() }}
/storage/90/irineu-junior-200811140054000.zip

自定义视图

可能需要自定义渲染的视图。为此，将它们（fancy-picture.blade.php / picture.blade.php）复制到 packages/frontend/src/resources/views/media，并在 config/admix-media.php 的字段中调用它们

return [
    ...
    'picture_view' => 'agenciafmd/frontend::media.picture',
    'fancy_picture_view' => 'agenciafmd/media::media.fancy-picture',
];

许可证

我们的包是开源的，对更亲近的人是 MIT 许可。

请随意开始构建您的应用程序，但请记住，成功与否的责任不在我们😊。