Sylius：如何使用 SyliusResourceBundle 在实体上正确渲染图像预览？

Question

我有一个注册为 Sylius-Resource 的自定义实体。 这个实体可以有一个图像列表。 对于我的用例，我遵循了Docs上的说明。

我使用 ImageType 的子类来提供 Upload-Image-Form：

艺术家图像类型：

<?php
declare(strict_types=1);

namespace AppBundle\Form\Type;

use Sylius\Bundle\CoreBundle\Form\Type\ImageType;

class ArtistImageType extends ImageType
{
    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix(): string
    {
        return 'artist_image';
    }
}

这就是我在 FormType 中重用这个 ArtistImageType 的方式：

final class ArtistType extends AbstractResourceType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name', TextType::class, [
                'empty_data' => '',
            ])
            ->add('firstName', TextType::class, [
                'empty_data' => '',
                'required' => false,
            ])
            ->add('lastName', TextType::class, [
                'empty_data' => '',
            ])

            ->add('images', CollectionType::class, [
                'entry_type' => ArtistImageType::class,
                'allow_add' => true,
                'allow_delete' => true,
                'by_reference' => false,
                'label' => 'app.images',
            ])

和 form.html.twig：

<div class="ui two column stackable grid">
    {{ form_errors(form) }}
    <div class="column">
        <div class="ui segment">
            <h4 class="ui dividing header">{{ 'sylius.ui.general_info'|trans }}</h4>
            <div class="two fields">
                {{ form_row(form.name) }}
            </div>

            {{ form_row(form.images) }}

        </div>
        <div class="ui segment">
            {{ form_row(form.firstName) }}
            {{ form_row(form.lastName) }}
        </div>
    </div>

我想知道如何显示已经上传到类似于产品表单的现有实体中的图像，其中现有图像显示在“选择文件”按钮旁边？

这就是我想要实现的目标：

但它仍然在没有任何预览的情况下渲染。 显然，一些进一步的定制是必要的。

Answer 1

阅读 Sylius 代码后，我可以自己回答：

1. ArtistType::buildForm()

我们需要添加属性entry_options以将 Artist-Entity 传递给 ImageType：

        ->add('images', CollectionType::class, [
            'entry_type' => ArtistImageType::class,
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' => false,
            'entry_options' => ['artist' => $options['data']],
            'label' => 'app.images',

2. 艺术家图像类型

然后我们让 ArtistImageType 适合正确处理这个属性：

class ArtistImageType extends ImageType
{

    public function buildView(FormView $view, FormInterface $form, array $options): void
    {
        parent::buildView($view, $form, $options);

        $view->vars['artist'] = $options['artist'];
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        parent::configureOptions($resolver);

        $resolver->setDefined('artist');
        $resolver->setAllowedTypes('artist', Artist::class);
    }


    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix(): string
    {
        return 'artist_image';
    }
}

考虑getBlockPrefix方法。

3.形式主题：

为图像部分创建一个表单主题：

{% extends '@SyliusUi/Form/imagesTheme.html.twig' %}

{% block artist_image_widget %}
    {% spaceless %}
        <div class="ui upload box segment">
            {{ form_row(form.type) }}
            <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
            {% if form.vars.value.path|default(null) is not null %}
                <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
            {% endif %}
            <div class="ui hidden element">
                {{ form_widget(form.file) }}
            </div>
            <div class="ui element">
                {{- form_errors(form.file) -}}
            </div>
        </div>
    {% endspaceless %}
{% endblock %}

考虑块名称artist_image_widget 。 它是 ImageType 实现的 Twig 和 getBlockPrefix-Function 之间的链接。

4. 我已经把整个图像部分的东西放在一个单独的文件中：

_media.html.twig :

{% form_theme form '@AppBundle/Form/imagesTheme.html.twig' %}

<div class="ui" >
    <h3 class="ui dividing header">{{ 'sylius.ui.media'|trans }}</h3>
    <br>
    {{ form_row(form.images, {'label': false}) }}

</div>

最终形式：

<div class="column">
    <div class="ui segment">
        <h4 class="ui dividing header">{{ 'sylius.ui.general_info'|trans }}</h4>
        <div class="two fields">
            {{ form_row(form.name) }}
        </div>

        {% include 'AppBundle:Admin:_media.html.twig' %}

    </div>
    <div class="ui segment">
        {{ form_row(form.firstName) }}
        {{ form_row(form.lastName) }}
    </div>

Answer 2

我猜@itinance 发布的 3.Form-Theme 确实是修复它的原因（通过复制小部件内容而不是 form_row(form.images..) 我也设法让它工作）。 但遗憾的是，我无法扩展“@SyliusUi/Form/imagesTheme.html.twig”，即使 getBlockPrefix 返回与此前缀匹配的前缀