[3.X] Vich Uploader with namers

[wucherpfennig]

Short description of what this feature will allow to do:
Usign Vich Uploader should work as described here: #3434 and https://www.youtube.com/watch?v=MS4LICZ1j0s

But this solution does not apply if you are using vich namers.

Example of how to use this feature
See example here: which basically is saying that we should use #1402 (comment) vich_uploader_asset in twig.

[simondaigre]

Its working for me if you're using this example :

ImageField::new('picture', 'Picture')
    ->setBasePath('/images/picture_path'),

Replace picture_path with the same path you configured in Vich for your property.

[micotodev]

You can create your own field type for this. I integrated an optional LiipImagine filter via custom options which works with public/private uploads and works with the custom namers.

class VichImagineField implements FieldInterface
{
    use FieldTrait;

    public const OPTION_IMAGINE_FILTER = 'imagineFilter';

    public static function new(string $propertyName, ?string $label = null)
    {
        return (new self())
            ->setProperty($propertyName)
            ->setLabel($label)
            ->setTemplatePath('admin/field/vich_imagine.html.twig')
            ->setFormType(VichFileType::class)
            ->addCssClass('field-vich-imagine')

            ->setCustomOption(self::OPTION_IMAGINE_FILTER, 'admin_image')
        ;
    }


}

Twig template:

{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
{# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
{% set html_id = 'ea-lightbox-' ~ field.uniqueId %}
{% if vich_uploader_asset(entity.instance, field.property) is not null %}
<a href="#" class="ea-lightbox-thumbnail" data-featherlight="#{{ html_id }}" data-featherlight-close-on-click="anywhere">
    {% if field.customOptions.get('imagineFilter') is defined and field.customOptions.get('imagineFilter') != '' %}
    <img src="{{ vich_uploader_asset(entity.instance, field.property)|imagine_filter(field.customOptions.get('imagineFilter')) }}" class="img-fluid">
    {% else %}
    <img src="{{ vich_uploader_asset(entity.instance, field.property) }}" class="img-fluid">
    {% endif %}
</a>

<div id="{{ html_id }}" class="ea-lightbox">
    {% if field.customOptions.get('imagineFilter') is defined and field.customOptions.get('imagineFilter') != '' %}
        <img src="{{ vich_uploader_asset(entity.instance, field.property)|imagine_filter(field.customOptions.get('imagineFilter')) }}">
    {% else %}
        <img src="{{ vich_uploader_asset(entity.instance, field.property) }}">
    {% endif %}
</div>
{% endif %}

Limitation here is that if your upload files are private, you need to use an imagine filter to create the image previews in your media/cache folder.

[javiereguiluz]

Closing because we don't officially support Vich uploader, so we can't fix this. Sorry!