VarboxInternational / varbox

THE Laravel Admin Panel package built by developers, for developers
https://varbox.io
Other
63 stars 13 forks source link

Individual image cropping styles #11

Closed andreiradoi closed 3 years ago

andreiradoi commented 4 years ago

What are you trying to achieve (screenshots might help):

I have a custom entity called Post. Each post can have a main_image and a cover_image.

How can I define different styles for those 2 image types using Varbox Media Library? I saw there's a config/varbox/upload.php for defining styles for images, but I was wondering if it's possible to define individual styles

zbiller commented 4 years ago

Indeed there's a config file called config/varbox/upload.php, but that acts as a generic configuration for your entire upload functionality.

To achieve what you want, you would have to customize the configuration, specifically for your Post model by implementing the getUploadConfig method present on the Varbox\Traits\HasUploads trait.

Here's the documentation part for reference: https://varbox.io/docs/1.x/file-uploads#specific-model-configurations

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Varbox\Traits\HasUploads;

class Post extends Model
{
    use HasUploads;

    /**
     * Get the specific upload config parts for this model.
     *
     * @return array
     */
    public function getUploadConfig()
    {
        return [
            'images' => [
                'styles' => [
                    'main_image' => [
                        'square' => [
                            'width' => '100',
                            'height' => '100',
                            'ratio' => true,
                        ]
                    ],
                    'cover_image' => [
                        'landscape' => [
                            'width' => '800',
                            'height' => '100',
                            'ratio' => true,
                        ]
                    ],
                ],
            ],
        ];
    }
}

Also, you might want to think about different device resolutions when displaying your images, thus creating multiple styles for both your main_image and cover_image and display them accordingly.