Sylius：如何使用 SyliusResourceBundle 正确呈现实体上的图像预览？答案

【问题标题】：Sylius: how to render a preview of Images on an entity properly using SyliusResourceBundle?Sylius：如何使用 SyliusResourceBundle 正确呈现实体上的图像预览？
【发布时间】：2019-08-23 21:54:51
【问题描述】：

我有一个注册为 Sylius 资源的自定义实体。这个实体可以有一个图像列表。对于我的用例，我按照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>

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

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

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

【问题讨论】：

标签： php symfony sylius

【解决方案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。它是 Twig 和 ImageType-implementation 的 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>

【讨论】：

【解决方案2】：

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

【讨论】：